Cara Memasang Form Komentar Facebook Di Template Blogger

Cara Memasang Form Komentar Facebook Di Template Blogger - Beberapa waktu lalu saya baru saja mempublikasikan tutorial memasang plugin komentar disqus di template blogger, dan pada kesempatan ini saya kembali dengan tutorial yang masih membahas form komentar (widget komentar) yaitu "cara memasang form komentar facebook di template blogger".
Secara teknis langkah-langkah yang saya gunakan dalam menginstall / memasang widget form komentar facebook di template blogger masih sama dengan tuturial yang sebelumnya (memasang komentar disqus), jika kamu sudah mengikutinya maka tutorial memasang form komentar facebook di template blogger ini akan terasa mudah untuk diaplikasikan.

Cara Memasang Komentar Facebook Di Template Blogger

Langsung saja ke proses penginstallan form komentar facebook, langkah pertama yang harus dilakukan adalah memasang css facebook comments diatas kode kode ]]></b:skin> atau diatas kode </style> agar tampilan form komentar facebook responsive dan memiliki lebar yang penuh (sesuai dengan lebar post body), berikut css nya.

/* --- Facebook Comments --- */
#container-commentfb .fb-comments,#container-commentfb .fb_iframe_widget,#container-commentfb .fb_iframe_widget span,#container-commentfb .fb_iframe_widget iframe{width:100%;display:block!important;min-width:100%;}

Selanjutnya kita menuju penginstallan kode html widget dan script facebook comments, lakukan ini secara perlahan (step by step).
undefined
Cari kumpulan kode widget form komentar blogger, atau cari kode di bawah ini;

<b:includable id='comments' var='post'>...</b:includable>

Atau jika folder kode terbuka maka kode diatas akan terlihat seperti ini;

<b:includable id='comments' var='post'>
...other code...
...other code...
</b:includable>

Kemudian, tepat dibawahnya tambahkan kode facebook app id dan script facebook comments berikut ini (pasang secara beruntun);

<b:includable id='displayed-facebookid' var='post'>
<div id='facebook-comment-appid' style='display:none'>218168578325095</div>
</b:includable>
<b:includable id='facebook-comment' var='post'>
<b:if cond='data:post.allowNewComments'>
 <div id='fb-root'/>
 <div class='facebook-comment comment-box' id='facebook_cm'>
 <div class='hide' style='line-height: 0;visibility: hidden;'>
 <script>
 var APPID = $('#facebook-comment-appid').text();
 if (APPID == '' || APPID == null) {
 APPID = '218168578325095';
 }
 window.fbAsyncInit = function(){
 FB.init({appId:APPID,status:true,cookie:true,xfbml:true});};
 (function(){var e = document.createElement('script');
 e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
 e.async = true;
 document.getElementById('fb-root').appendChild(e);
 }());
 </script>
 </div>
 <script async='async' src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
 <div id='container-commentfb'>
 <div class='fb-comments' data-colorscheme='light' data-num-posts='10' data-width='100%' expr:data-href='data:post.url'/>
 </div>
 </div>
</b:if>
</b:includable>

Perhatikan nomer seri plugin komentar facebook 218162542628545 pada kode diatas, itu adalah kode facebook app id saya, setelah widget komentar facebook berhasil di install sepenuhnya silahkan ganti kode facebook app-id saya dengan kode facebook app-id anda sendiri.

Langkah selanjutnya cari juga kode dibawah ini;

<b:includable id='iframe_comments' var='post'>....</b:includable>

Kemudian diatas kode tersebut tambahkan kode berikut ini;

<b:includable id='fn_comment_picker' var='post'>
<div class='comments'>
 <b:if cond='data:post.allowComments'>
  <b:include data='post' name='displayed-facebookid'/>
  <b:if cond='data:top.commentLabel != &quot;facebook&quot;'>
   <b:include data='post' name='comment_picker'/>
  </b:if>
  <b:if cond='data:top.commentLabel == &quot;facebook&quot;'>
   <b:include data='post' name='facebook-comment'/>
  </b:if>
 </b:if>
  </div>
</b:includable>

Catatan: Jika semua kode yang dimaksud tidak ada atau tidak ditemukan didalam template blog anda, silahkan pasang secara beruntun semua kode dan script facebook comments yang saya berikan tepat berada dibawah kode;

<b:includable id='comments' var='post'>...</b:includable>

Terakhir cari kode di bawah ini untuk menyelesaikan penginstallan form komentar facebook di template blogger, berikut kode nya;

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>

Perhatikan kode comment_picker silahkan ganti 'comment_picker' dengan 'fn_comment_picker' kemudian save template, pada tahap ini widget form komentar facebook sudah selesai di install namun status-nya masih dalam keadaan siaga atau stanby. Untuk menampilkan widget komentar facebook silahkan pergi ke Tata Letak Blogger > Widget Post/Blog klik Edit, pada kolom tampilkan komentar ganti teks "komentar" menjadi "facebook" (tanpa tanda petik), lihat contoh gambar dibawah ini;

Blogger: Cara Menampilkan Form Komentar Facebook

Penting: Jika sebelumnya kamu sudah mengaplikasikan tutorial memasang komentar disqus dari situs ini maka harap di hapus terlebih dahulu agar pemasangan widget komentar facebook ini berjalan dengan mulus dan jangan lupa follow by email situs ini untuk mendapatkan pemberitahuan konten terbaru dari blog ini.

Kelebihan: Teknik pemasangan plugin komentar facebook pada tutorial ini valid html5 dan memungkinkan anda mengganti form komentar dengan cepat (facebook atau blogger), jika ingin kembali ke komentar blogger kamu hanya perlu mengaktifkan-nya melalui tata letak (ganti "facebook" menjadi "blogger" atau "komentar" dan tanpa tanda petik), Selain itu script facebook comments pada tutorial ini juga memungkinkan browser untuk memuat halaman situs secara dinamis (lebih cepat) karena menggunakan teknik pemuatan script asyncr.

sumber : blogkene