Sabtu, 13 Oktober 2012

Cara memasukan kotak komentar facebook di blog

Masih bingung gimana caranya membuat kotak komentar facebook diblog.ikuti caranya berikut ini


1. Masuk ke akun blogger sobat
2. Selanjutnya masuk pada bagian Template
3. Klik Edit HTML
4. Silahkan centang Expand Template Widget
5. Sudah itu, Anda cari kode ]]></b:skin>
6. Setelah ketemu, silahkan letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

.comments-page { background-color: #f2f2f2;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px;
    cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

7. Kemudian Anda cari kode </head>
8. Jika sudah ketemu, silahkan letakkan kode di bawah ini tepat di atas kode </head> tadi

  <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='271922886233753' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(".comments-tab").addClass("inactive-select-tab");
    $(selectTab).removeClass("inactive-select-tab");
    $(".comments-page").hide();
    $(selectTab + "-page").show();
    }
    </script>

Catatan:
Silahkan anda ganti angka yang berwarna biru tersebut dengan AppId anda. jika anda belum punya AppId caranya gampang koq.



9.   Langkah selanjutnya, Anda cari lagi  kode <div class='comments' id='comments'>
10. Biasanya kita akan menemukan dua kode <div class='comments' id='comments'>
Jika memang bener terdapat dua kode tersebut anda letakkan kode dibawah ini tepat di bawah kode <div class='comments' id='comments'>yang ke dua tersebut.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='3' width='400'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

11. Terakhir simpan template, dan untuk memastikanya apakah sudah berhasil atau tidak silahkan anda buka salah satu postingan anda. jika belum muncul juga kotak  komentar facebooknya berarti ada yang salah.jangan menyerah sob.. ulangi lagi mungkin ada yang salah. Namun jika masih juga belum berhasil ikuti cara yang kedua ini

Caranya masih sama dengan cara yang pertama

1. Login Blogger
2. Pilih Rancangan
3. EDIT HTML
4. Centang tulisan Expend Widget
5. Car kode yang mirip di ibawah ini :
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='comment-form' var='post'>
<div class='comment-form-block'>
Jika sudah ketemu tambahkan kode komentar fb ini di attas </b:includable> :

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/>
<script src=' http://connect.facebook.net/en_US/all.js#appId=271922886233753&amp;xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>

6. Jangan lupa untuk mennganti dengan appId facebook sobat masing-masing
Catatan:Angka yang berwarna biru adalah lebar main posting, jika terlalu lebar bisa sobat atur ukuranya menyesuaikan template sobat masing-masing dengan mengganti nilainya

Saya rasa aja yang bisa saya berikan. selamat mencoba semoga gak bikin pusing.hee..........


Reaksi:
Comments
0 Comments

0 komentar:

Poskan Komentar