Saturday, January 14, 2017

Cara Pasang Kotak Komentar Facebook di Blog Blogspot Terbaru

Cara Pasang Kotak Komentar Facebook di Blog Blogspot Terbaru


CARA membuat, menampilkan, atau memasang Kotak Komentar Facebook (Facebook Comment Box) di BlogBlogspot sangat mudah. Kodenya sudah disediakanFacebook.

Ini cara paling mudah menampilkan kolom komentar yang bisa dishare langsung ke Facebook oleh Anda atau pengunjung.

Anda bisa "ambil" kode kotak komentar FB itu di sini:Facebook Developer.

Jika gagal, Anda bisa memasang Kotak Komentar Facebook di bawah posting blog dengan menggunakan kode-kode lainnya yang CB share juga di bawah kode facebook comments box for blogger pertama.

Kotak Komentar Facebok Ini, Bagus Tidak Buat SEO Blog?

kotak komentar facebook di blogSebelumnya, kita ulas dikit, Kotak Komentar Facebook di Blog bisa bagus buat SEO, jika banyak --bahkan kebanyakan-- pengunjung Anda komentar di sana dan di-share ke akun Facebooknya.

Tapi, jika hanya sedikit, bahkan tidak ada sama sekali yang komentar di kotak komentar Facebook itu, maka sebaiknya LEPAS saja, karena hanya memperlambat loading blog Anda dan ini artinya justru mengurangi SEO Blog --Google suka banget blog yang Fast Loading!

CB sendiri "terpaksa" memasangnya sekadar untuk contoh, namun hanya di halaman posting ini dimunculkannya. Di posting lain tidak ada karena menggunakan Tag Kondisional.

Cara Pasang Kotak Komentar Facebook di Blog Blogspot

Siap pasang komentar facebook di blog Anda? Mari kita mulai!

1. Pasang Meta Facebook. Simpan di bawah kode <head>

<meta content=12345678 property=fb:admins/>
<meta content=12345678910 property=fb:app_id/>

Ganti angka-angkanya dengan FB Admin ID dan FB App ID Anda. Baca: Cara Mendapatkan FB Admin ID dan FB App ID.

2. Copas kode berikut ini di bawah kode <body>

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

3. Copas kode berikut ini di bawah kode <div class=comments id=comments>

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

3. Save! 

Beres...! Kini Kotak Komentar Facebook sudah muncul di blog Anda, di bawah posting atau di bawah related post dan di atas kotak komentar blogger.

Gampang kan cara memasang kotak komentar di Facebook?

CARA KEDUA
Jika cara di atas gagal, maka lakukan cara berikut ini.

1. Lakukan langkah pertama seperti di atas (Pasang Meta Facebook).
2. Pasang KODE JS. Simpan kode berikut inidi atas kode </head>

<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){
 var url = location.protocol+//+location.host+location.pathname;
  var containercm_width = $(#container-commentfb).width();
    $(#container-commentfb).html(<div class="fb-comments" +
    data-href="+url+" +
    width=" + containercm_width + " data-num-posts="10"></div>);
    FB.XFBML.parse( );
  });
//]]>
</script>

3. Pasang KODE JS/HTML.
Simpan kode berikut ini di bawah <data:post.body/> (yang kedua atau ketiga) atau di bawah kode <div id=related post> ... </div> atau di dalam kode  <div class=post-footer-line post-footer-line-3> </div>

<b:if cond=data:blog.pageType == &quot;item&quot;>
<div id=fb-root/>
<script src=http://connect.facebook.net/en_US/all.js#xfbml=1/>
<div id=container-commentfb style=width: 100%;><fb:comments expr_href=data:post.url num_posts=10 width=650/></div>
</b:if>

4. Save Template!

MASIH ADA CARA LAIN !
Jika dua cara menampilkan Kotak Komentar Facebook di atas gagal, lakukan cara lain berikut ini:

LANGKAH 1
1. Login ke akun Facebook Anda
2. Buat dulu ID Aplikasinya di Facebook App.
3. Klik “Create New App”.
4. Ikuti langkah berikutnya dan masukkan alamat blog di “App Domain”.
5. Masukkan juga alamat blog di bagian “Select how your app integrates with Facebook”, klik “Website”, masukkan "full url" seperti http://www.contohblog.com
6. Klik “Save Changes”.

Catatan: Simpan ID Aplikasi Facebook Anda yang berupa angka --yang muncul setelah tahap "Create New App". Untuk moderasi komentar yang masuk nantinya, buka saja FB Tools Comments. 

LANGKAH 2
1. Template > Edit HTML
2. Copy & Paste kode berikut ini di bawah kode <head>

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

3. Ubah YOUR_APPLICATION_ID dengan "kepunyaan" Anda yang sudah didapat di langkah pertama.

4. Copas kode berikut ini di bawah kode <div class=comments id=comments>

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

2. Save Template! Beres.....!

Cara Memasang Tab Komentar Facebook & Blogger

Yang dimaksud tab komentar FB dan Blogger adalah seperti gambar berikut ini. CB sudah coba dan berhasil. Ini buktinya:
Tab Komentar Facebook & Blogger

Gambar di atas menunjukkan dua tab komentar: Facebook dan Blogger. Pengunjung bisa pilih, mau gunakan akun yang mana untuk komentar.

CARA MEMASANG
Cara membuat tab komen fb dan blogger mudah banget.

1. Template > Edit HTML
2. Copas kode berikut ini 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>


Available link for download