Cara Memasang Komentar Facebook di Blog


clip_image001Pada postingan kali ini kita akan membahas bagaimana cara membuat atau memasang komentar facebook pada blog. Tutorial kali ini saya akui banyak dicari-cari oleh para blogger karena disamping dapat meningkatkan trafic blog juga akan memperindah tampilan blog sobat. Bagi sobat yang berminat untuk memasang komentar facebook pada blognya ikuti langkah-langkah di bawah ini.

1. Masuk ke https://developers.facebook.com/docs/reference/plugins/comments/
2. Isilah URL blog anda, misalnya : http://junedalbughisy.blogspot/

komentar facebook

3. Tekan / klik GET CODE, maka akan muncul seperti gambar di bawah ini:

clip_image003

4. Login ke blogger atau klik disini
5. Pilih template >> Edit Html >> Lanjutkan
6. Centang Expand Template Widget
7. Carilah code <body>
8. Kembali ke Developer Facebook tadi
9. Salin / Copy Script no 1 dan letakkan tepat di bawah code <body> pada edit HTML templateblog anda.
hasilnya akan menjadi seperti di bawah ini bila anda sudah mempastekannya :

<body>

<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";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

dst....

(catatan: seandainya template sobat telah menyediakan code diatas, abaikan saja. Sobat tidak perlu lagi mempastenya, artinya template sobat telah menyediakan code tersebut)
10. Setelah anda salin code 1 tadi (atau sudah ada), salin lagi code no 2
11. Sebelumnya cari code <div class='post-footer-line post-footer-line-1'> pada Edit HTML Template Anda kawan
12. Tempatkanlah code no 2 tadi tepat di bawah code
<div class='post-footer-line post-footer-line-1'>

<div class="fb-comments" data-href="http://junedalbughisy.blogspot.com" data-num-posts="2" data-width="470"></div>

13. Selanjutnya gantilah code data-href="http://junedalbughisy.blogspot.com" dengan code ini: expr:data-href='data:post.url' maka hasilnya akan seperti ini

<div class="fb-comments" expr:data-href='data:post.url' data-num-posts="2" data-width="470"></div>

Jangan lupa sesuaikan ukurannya. Ganti angka yang berwarna merah sesuai keinginan (lebar postingan sobat).

14. Lalu simpan template anda. Lihat hasilnya.

Selamat mencoba, Happy blogging Open-mouthed smile

2 komentar:

  1. Balasan
    1. Setiap template blog itu berbeda-beda gan tergantung pembuat templatenya. Tapi tutorial di atas sudah sy usahakan menggunakan kode template yang umum digunakan

      Hapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top