February 22, 2014 wahyutiez

Cara Pasang Kotak Komentar Facebook di Blog Blogspot

kotak komentar facebook di blog
Cara memasang kolom atau Kotak Komentar Facebook (Facebook Comment Box) di Blog Blogspot sangat mudah. Kodenya sudah disediakan Facebook.

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 gunakan kode-kode di bawah ini yang digunakan CONTOHBLOG --namun hanya muncul di halaman posting ini saja, sekadar buat contoh dan bukti sukses :)

Cara Mudah & Cepat Pasang Kotak Komentar Facebook di Blog Blogspot

1. Dashboard --> Template -->Edit HTML
2. Cari (CRTL+F) kode <body> atau yang semisalnya. Soalnya ada juga template yang kode body-nya ity kaya gini <body exp.... bla bla.... > .
3. Copy + Paste kode berikut ini di bawah kode <body> tadi.

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

4.  Copy kode berikut ini dan simpan (Paste) tepat di bawah kode <div class='post-footer-line post-footer-line-3'> atau di bawah kode  <div class='comments' id='comments'>. Jika ada dua kode begitu di template blog Anda, simpan di bawah kode yang kedua.

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

Catatan:
  • Angka 600 di atas adalah lebar kotak komentar Facebook. Sesuaikan dengan lebar text area blog Anda.
  • Bisa juga kode tersebut diletakkan di bawah kode yang digunakan untuk Related Posts (<div class='related posts'> ... dst.. sampai kode penutup </div>)
JIKA hanya ingin menampilkan kotak komentar Facebook di halaman tertentu, seperti yang GBL punya yang hanya muncul di posting ini, maka gunakan kode berikut ini (ada tambahan yang warna merah).

      <div class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.url == "http://greenbaysludge.blogspot.com/2014/02/cara-pasang-kotak-komentar-facebook-di.html"'>
<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>
</b:if>

Ganti http://greenbaysludge.blogspot.com/2014/02/cara-pasang-kotak-komentar-facebook-di.html
dengan permalink atau url posting/page yang akan memunculkan kotak komentar Facebook

6. Save Template!


CARA KEDUA

Jika cara pasang kotak komentar Facebook di atas gagal alias 'gak muncul, maka coba cara "lebih rumit" berikut ini:

LANGKAH PERTAMA
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://contohblognih.blogspot.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 KEDUA
1. Template > Edit HTML
2. Copy & Paste kode berikut ini di bawah kode <head>. 
Ubah YOUR_APPLICATION_ID dengan "kepunyaan" Anda yang sudah didapat di langkah pertama.

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

3. Temukan kode <div class='post-footer-line post-footer-line-2'> dan Copas kode berikut ini di bawahnya:

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

4. Temukan kode <div class='post-footer-line post-footer-line-3'> dan Copas kode berikut ini di bawahnya:

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

* Sesuaikan lebar kotak width='600' dengan lebar main area blog Anda atau biarkan begitu, biasanya lebar singla page blog memang segituan.

5. Save Template! Beres.....!

Kotak Komentar Facebok Ini, Bagus Tidak Buat SEO Blog?

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!

Good Luck and Happy Blogging....!

Ayo, gabung dengan Forum Blogger Indonesia untuk saling berbagi, tuker link, dan saling mempromosikan blog!
Tags

Post a Comment

0 Comments