Wednesday, March 23, 2016

Tutorial Cara Mudah Membuat Kotak Komentar Facebook pada Bloggrer

loading...

Kotak komentar facebook pada blog berfungsi agar pengunjung dapat berkomentar menggunakan akun facebook nya dengan mudah. Selain itu komentar tersebut juga bisa di share oleh pengunjung di akun sosial media nya jadi dengan menambahkan kotak komentar ini dibawah postingan blogger, wordpress maupun website maka tidak menutup kemungkinan dapat meingkatkan trafik situs/blog sobat apalagi dari facebook yang merupakan sosmed terpopuler yang memiliki banyak pengguna di internet dan pastinya jika blog memilik banyak komentar maka juga akan membuat blog tersebut menjadi lebih SEO.

Kali ini saya akan share gimana Cara Membuat Kotak Komentar Facebook Di Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin menambahkan kolom komentar fb dibawah post / artikel pada blogger.

Cara Memasang Kotak Komentar Facebook Di Blog Tanpa Fungsi Tab :

1. Bikin kotak komentar tanpa fungsi tab seperti gambar di atas yaitu dengan cara masuk menu Template dan klik Edit HTML
Klik Untuk Memperbesar Gambar

2. Cari kode <body>, gunakan Ctrl+F untuk memudahkan pencarian

Klik Untuk Memperbesar Gambar
3. Kemudian copy kode berikut :

<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

paste tepat dibawah kode <body>
Klik Untuk Memperbesar Gambar

4. Lalu cari kode <div class='comments' id='comments'>, biasanya kode tersebut ada 2 di html namun sobat bisa cari yang pertama dari atas, gunakan Ctrl+F untuk mempermudah

Klik Untuk Memperbesar Gambar
5. Kemudian copy kode berikut :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top:20px'>
<div class='fb-comments' data-num-posts='5' data-width='600' expr:data-href='data:blog.url'/>
</div>
</b:if>

paste tepat dibawah kode <div class='comments' id='comments'>, jika sudah klik Simpan template.. Selesai dan lihat hasilnya
Klik Untuk Memperbesar Gambar

6. Jika cara diatas tidak berhasil, sobat bisa menggunakan cara yang satu ini yaitu sobat bisa bikin dulu ID Aplikasi FB silahkan login Facebook lalu buka situs https://developers.facebook.com/apps maka akan muncul tampilan berikut dan klik Register Now

Klik Untuk Memperbesar Gambar
7. Kemudian klik tombol disamping kanan menjadi angka 1, jika sudah klik Mendaftar

Klik Untuk Memperbesar Gambar
8. Selanjutnya langsung saja klik Selesai

Klik Untuk Memperbesar Gambar
9. Pada tampilan Add a New App pilih platform WWW
Klik Untuk Memperbesar Gambar

10. Kemudian masukkan Nama dan klik Create New Facebook App ID
Klik Untuk Memperbesar Gambar

11. Setelah itu pada Kategori pilih Aplikasi untuk Halaman, jika sudah klik Buat ID Aplikasi
Klik Untuk Memperbesar Gambar

12. Maka akan muncul tampilan berikut silahkan sobat scroll ke bagian bawah halaman

Klik Untuk Memperbesar Gambar
13. Pada kotak Site URL masukkan alamat blog sobat lalu klik Next

Klik Untuk Memperbesar Gambar
14. Kemudian scroll lagi kebawah sedikit dan klik Skip to Developer Dashboard

Klik Untuk Memperbesar Gambar
15. Maka akan muncul tampilan Dashboard Aplikasi FB dan sobat pun sudah mendapatkan ID Aplikasi FB seperti pada gambar dibawah ini

Klik Untuk Memperbesar Gambar
16. Selanjutnya silahkan masuk Edit HTML blog dan cari kode <head>

Klik Untuk Memperbesar Gambar
17. Kemudian copy kode berikut :

<meta property="fb:app_id" content="YOUR_APPLICATION_ID"/>

paste tepat dibawah kode <head> ,ganti tulisan warna merah dengan kode ID Aplikasi FB yang sudah sobat buat tadi

Klik Untuk Memperbesar Gambar
18. Cari kode <div class='comments' id='comments'>, biasanya kode tersebut ada 2 cari yang pertama

Klik Untuk Memperbesar Gambar
19. Setelah itu copy kode berikut :

    <b:if cond='data:post.isFirstPost'> <script>(function(d){ var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;} js = d.createElement(&#39;script&#39;); js.id = id; js.async = true; js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;; d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js); }(document));</script> </b:if> <a expr:href='data:post.url + &quot;#fb-root&quot;'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>
    <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/> <script>(function(d){ var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;} js = d.createElement(&#39;script&#39;); js.id = id; js.async = true; js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;; d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js); }(document));</script> <div style='margin: 20px 0 0 0;'><fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='600'/></div> </b:if>


dan paste tepat dibawah kode <div class='comments' id='comments'>, jika sudah klik Simpan template.. Selesai dan lihat hasilnya
Klik Untuk Memperbesar Gambar


EmoticonEmoticon