Cara Membuat Kotak Komentar Facebook Di blogger

Cara membuat kotak / kolom komentar facebook di blogger, cara buat comment box / columns dibawah artikel postingan tentunya akan menambah nilai lebih bagi blog yang pastinya akan terlihat lebih proffesional.

Tidak hanya komentar facebook saja, tapi juga ada membuat komentar fb yahoo aol hotmail di blogspot yang tersusun dalam satu kolom komentar. Komentar facebook ini berada tepat disamping / disebelah komentar blogger. Selain itu anda juga bisa memasang like box facebook dan fans pages di blog. Perhatikan contoh gambar dibawah ini.

Gambar 1. Klik gambar untuk perbesar tampilan.

Dari contoh gambar diatas pastinya anda sudah tahu kira-kira seperti apa tampilan nya. Dan langsung saja kita bahas langkah-langkahnya di bawah ini.

1. Buat dahulu halaman aplikasi di facebook, perhatikan langkahnya dibawah ini.

Langkah - langkahnya: 

- Log in ke akun facebook anda 

- Pergi ke link https://developers.facebook.com/apps 

- Cari dan klik "create a new app" atau "buat aplikasi baru". Lihat gambar dibawah.

Gambar 2. Klik gambar untuk perbesar tampilan.

- Kemudian isi data yang akan anda buat aplikasinya. Lihat contoh gambar dibawah.

Gambar 3.

-lalu anda telah selesai membuat aplikasinya, dan simpan nomor app id anda, itu yang dipakai untuk alamat aplikasi tersebut. Perhatikan contoh gambar dibawah.

Gambar 4.

-Perhatikan gambar diatas dan ikuti cara pengisian datanya, ya tidak usah dijelaskan lagi pasti anda sudah pada mengerti apa yang mau di isi, hanya yang perlu bagian terpenting nya di bagian "canvas url" isi dengan alamat blog anda.

-Selesai. Anda sudah berhasil membuat alamat aplikasi nya, silahkan lanjutkan cara pasang di blog.

2. Kemudian pasang kotak komentar nya di blog, perhatikan langkahnya dibawah ini.

Untuk cara memasang kotak / kolom komentar FB di blog, perhatikan caranya dibawah ini.

Langkah-langkahnya:

• Log in ke akun blog anda 
• Ke menu "Template" >> "Edit Html". Jangan lupa untuk back-up template dahulu untuk mengantisipasi error code.
• Klik di sembarang tempat dalam kotak kode html nya, dan tekan Ctrl+F pada keyboard komputer anda, untuk menampilkan kotak pencarian cepat.
• Cari kode  ]]></b:skin> dikotak pencarian tadi
• Lalu letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tadi

.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;}

Note: Ganti #f2f2f2 apabila ingin warna background yang lain. Jika ingin transparant, hapus #f2f2f2 tadi atau ganti dengan transparent.

• Selanjutnya cari kode </head> dan letakkan kode dibawah ini tepat diatas 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='https://developers.facebook.com/apps/471486256299703/' 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>

Note: Yang warna merah diatas adalah alamat aplikasi yang dibuat di facebook tadi, kode ID App anda, silahkan diganti dengan kode id anda. Ata bisa berbentuk seperti https://apps.facebook.com/gusti_oioi

• Kemudian cari kode <div class='comments' id='comments'>
• Letakkan kode dibawah ini tepat dibawah kode <div class='comments' id='comments'> tadi. Note: Bianya ada 2(dua) atau lebih kode <div class='comments' id='comments'> tersebut, tergantung template masing-masing. Jika ada 2, maka letakkan di kode yang ke 2.

<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='450'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

Note: '5' adalah jumlah komentar yang tampil. '450' lebar kolom komentar

• Save, Finish, Selesai.

Jika anda ingin tampilan yang lain dari cara diatas, maksudnya widget komentar fb nya bisa dipindah ke segala arah di blog melalui add widget, perhatikan caranya dibawah ini.

3. Tampilan FB komentar yang bisa dipindahkan tempatnya.

Langkah-langkahnya

• Ke menu "edit html" cari kode <body> atau <body
• Lalu paste kan kode dibawah ini tepat dibawah kode <body> tersebut

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&amp;appId=471486256299703";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

• Kode yang warna merah diatas adalah ID aplikasi facebook anda, ganti dengan id anda
• Simpan template
• Lalu pergi ke halaman "layout / tampilan" >> "add gadget" >> "html/javascript". Kemudian kasih judul gadget terserah anda, contoh "Facebook Comment". Kemudian paste kan kode dibawah ini tepat dikolom atau dibawah judul gadget tadi.

<div class="fb-comments" data-href="http://gustilubis.blogspot.com" data-width="500" data-num-posts="5"></div>

Note: Warna merah diatas adalah alamat url blog anda, silahkan diganti, yang warna hijau adalah lebar dan jumlah komentar, silahkan di sesuaikan sesuai selera anda.

• Simpan, dan lihat hasilnya
• Finish.

Note: Jika anda ingin meletakkan posisinya tepat dibawah postingan artikel, klik saja gadget nya dan seret pindahkan ke posisi dibawah postingan. Jika tidak bisa mungkin anda harus terlebih dahulu menambah gadget diatas postingan, baru bisa di pindahkan kebawah postingan.

Artikel Rekomendasi:
Cara membuat breadcrumbs di blog

Terima Kasih.
Cara Membuat Kotak Komentar Facebook Di blogger.