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.

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.
[code type="CSS"]/* --- 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%;}[/code]
Selanjutnya kita menuju penginstallan kode html widget dan script facebook comments, lakukan ini secara perlahan (step by step).
[ads-post]
Cari kumpulan kode widget form komentar blogger, atau cari kode di bawah ini;
[code type="HTML"]<b:includable id='comments' var='post'>...</b:includable>[/code]
Atau jika folder kode terbuka maka kode diatas akan terlihat seperti ini;
[code type="JS"]<b:includable id='comments' var='post'>
...other code...
...other code...
</b:includable>[/code]
Kemudian, tepat dibawahnya tambahkan kode facebook app id dan script facebook comments berikut ini (pasang secara beruntun);
[code type="HTML"]<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>[/code]
Perhatikan nomer seri plugin komentar facebook 218168578325095 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;
[code type="HTML"]<b:includable id='iframe_comments' var='post'>....</b:includable>[/code]
Kemudian diatas kode tersebut tambahkan kode berikut ini;
[code type="HTML"]<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>[/code]
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;
[code type="HTML"]<b:includable id='comments' var='post'>...</b:includable>[/code]
Terakhir cari kode di bawah ini untuk menyelesaikan penginstallan form komentar facebook di template blogger, berikut kode nya;
[code type="CSS"]<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>[/code]
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;

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.