Thursday, March 28, 2013

Cara Membuat Kotak Komentar Facebook Di Blog Terbaru

kotak komentar facebook di blogger

Diaryciboy - Cara Membuat Kotak Komentar Facebook Di Blog Terbaru. Selamat malam sobat blogger semua kali ini Diaryciboy akan memberikan tutorial membuat kotak komentar facebook yang sudah di tes terlebih dahulu. Karena sekarang facebook penggunanya semakin menggila jadi kotak komentar facebook ini harus ada aga visitor mudah dalam meninggalkan jejak. Kebanyakan visitor adalah orang2 yang tidak punya kun Gmail dan dengan adanya Komentar facebook maka pengunjung akan mudah dalam berkomunikasi. Oke langsung aja simak tutorialnya dibawah ini.

  • Login ke Facebook Anda.
  • Silahkan klik link Pembuatan Aplikasi Facebook ini.
  • Klik "Create New App"
  • Masukkan Nama Aplikasi anda di "App Display Name" , seperti gambar diatas.
  • Beri centang di I agree to the Facebook Platform Policies dan tekan "Continue".
  • Masukkan kode yang tertera, apabila kode benar maka akan muncul tampilan berikut ini



Isikan pada kolom "Website", dan "App on Facebook (Canvas URL)" dengan alamat blog kamu. Lalu Simpan. Catat nomor Aplikasi ID Anda, seperti yang ditunjukkan di gambar Facebook tersebut. Sampai disini anda telah selesai membuat plugin aplikasi facebook. Sekarang lanjut ke tahap pembuatan komentar facebook di blog.

1. Masuk akun blogger anda lalu pilih TEMPLATE, EDIT HTML (Jangan Lupa Backup template dulu dengan copy semua dan pindahkan ke notepad atau download template lengkap sebelum ikuti langkah ini.
2. Jangan lupa centang tulisan EXPAND TEMPLATE WIDGET
3. Lalu cari kode ]]></b:skin> (Untuk memudahkan pencarian, gunakan CTRL + F
4. Letakan kode CSS di bawah tepat di atas kode ]]></b:skin> :

.comments-page { background-color: #00BFFF;}
#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;}

5. Setelah itu cari lagi kode </head> kemudian letakkan kembali kode di bawah ini tepat di atas kode </head> :
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Anda' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>

Ganti kata ID FB Anda dengan aplikasi facebook yang telah Anda buat tadi. Jika Anda tidak membuat aplikasi facebook, silahkan masukkan id facebook anda yang terlihat di browser. Contoh : http://facebook.com/ciboy masukkan ciboy saja.

6. Karena kita akan membuatnya berdampingan dengan komentar bawaan dari blogger. Maka kita perlu menambahkan beberapa script lagi. Silahkan cari kode <div class='comments' id='comments'>  .. Biasanya kode tersebut tidak hanya 1, kalau di dalam template anda terdapat lebih dari 1 kode tersebut.Cari kode yang paling terakhir, lalu letakan script dalam kotak di bawah ini tepat di bawah kode <div class='comments' id='comments'> :

<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='5' width='500'/>
    <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:588px;'>Facebook Comments by
<b><a href='http://diaryciboy.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Diaryciboy Blog</a></b>
</div>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>
Lalu, Klik Simpan Template dan lihat hasilnya. Jika Kotak Komentar Facebook belum terlihat juga mungkin template tidak memiliki script kode yang support dengan facebook.

Maka, cari kode ini <html dan ganti dengan kode di bawah ini :
<html xmlns:fb='http://www.facebook.com/2008/fbml'
Simpan Template Anda.


Anda sedang membaca Cara Membuat Kotak Komentar Facebook Di Blog Terbaru, Silahkan klik Disini untuk membaca artikel terkait lainnya. Terima kasih telah berkunjung ke blog http://diaryciboy.blogspot.com, karena tanpa kalian kami tidak berarti apa-apa. Label: Facebook, komentar, Blogger, Tutorial
thumbnail
Judul: Cara Membuat Kotak Komentar Facebook Di Blog Terbaru
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh

Artikel Terkait Tutorial Blogger :

1 komentar:

  1. mas bro knp ya kl ada yg komentar pada blog comments, fb comments-nya langsung hilang?.....

    ReplyDelete

Silahkan Berkomentar Dengan Bijak Dan Sopan, Komentar Spam Tidak Akan Kami Tanggapi. Terima Kasih

 
Copyright © 2013. About - Sitemap - Contact - Privacy
Template Seo Elite oleh Bamz