Cara memasang komentar facebook di blog versi terbaru

Seringkali ketika kita sedang mengunjungi blog, kita ingin berkomentar satu kata ataupun dua kata untuk mengutarakan pikiran kita, namun ketika sedang ingin berkomentar mungkin kita tidak bisa mengutarakannya karena admin yang mempunyai blog itu biasanya hanya menyediakan pengguna akun Google+, disqus, blogger dan wordpress, sedangkan kita sendiri hanya mempunyai akun Facebook. Mau tidak mau kita harus mendaftar terlebih dahulu agar kita bisa berkomentar dan mengutarakan pikiran kita didalam blog tersebut. Rata-rata orang yang ingin melakukan sesuatu mereka biasanya memakai cara yang instant, tujuannya agar lebih cepat, hemat waktu dan tidak repot untuk mendaftar kesana kemari. Biasanya orang yang memakai cara instant, mereka tidak ingin mengutarakan pikirannya di dalam blog yang sedang dikunjungi. Sebagai admin blog (termasuk saya), kejadian seperti itu harus patut kita perhatikan karena jika tidak diperhatikan otomatis pengunjung dari pengguna Facebook tidak ingin berkomentar di blog kita, dan bisa-bisa pengunjung blog kita turun drastis dibandingkan dengan sebelumnya.

Cara memasang komentar facebook di blog versi terbaru

Untuk mengantisipasi kejadian tersebut kita harus menyediakan kolom komentar bagi pengguna Facebook, namun kebanyakan orang yang ingin memasangnya mereka tidak tahu menahu bagaimana caranya. Pada kesempatan ini saya ingin berbagi trik bagaimana kamu (admin blog) bisa memasang kolom komentar facebook di blog, cara ini adalah cara terbaru yang baru saya lakukan. Baru-baru ini facebook sedang mengadakan renovasi design widget untuk dipasang oleh para webmaster, jadi ada beberapa tampilan dan script yang berbeda dari sebelumnya, cara ini baru saya pakai dan alhasilnya memang lebih enak dipandang, tidak berat daripada sebelumnya dan juga kita bisa menghapus dan membaned pengguna facebook jika ada yang menggunakan kata-kata kasar.

Apa yang membedakan versi terbaru dengan versi sebelumnya?
- Kamu bisa menghapus komentar yang tidak seharusnya ditampilkan
- Kamu bisa mereview komentar. Maksudnya, kamu bisa memoderasi komentar "apakah ingin ditampilkan atau tidak".
- Tampilannya lebih dinamis dan stylish.
- Tidak lemot daripada sebelumnya
- Jika pengunjung menggunakan HP komentar ini akan menyesuaikan ukuran pada layar HP pengunjung. (Responsive).
- Kata-kata yang terdapat dalam komentar facebook masuk ke search engine

Berikut ini tampilan review yang akan saya tampilkan atau saya hapus.

Cara memasang komentar facebook di blog versi terbaru


Cara memasang komentar facebook di blog versi terbaru
1. Masuk ke facebook
2. Buatlah app facebook (Wajib)

Cara membuat aplikasi Facebook terbaru dan cepat

3. Masuk ke app facebook yang sudah dibuat tadi.
4. Copy app ID mue ke dalam notepad (Id ini nantinya akan kita gunakan)

Aplikasi Facebook - Cara memasang komentar facebook di blog versi terbaru

5. Masuk ke template -> edit HTML
6. Masukan meta tag ini, meta tag ini saya dapatkan dari blog arlinadesign
<!-- [ Social Media meta tag ] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='Deskripsi blog kamu' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='ID app kamu' property='fb:app_id'/>
<meta content='ID facebook kamu' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
Catatan
Editlah bagian yang saya tebalkan di atas

7. Setelah itu carilah kode </body>, lalu masukan kode ini diatasnya
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39;ID app Kamu&#39;,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : &#39;ID app kamu&#39;,
      xfbml      : true,
      version    : &#39;v2.3&#39;
    });
  };
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = &quot;//connect.facebook.net/en_US/sdk.js&quot;;
     fjs.parentNode.insertBefore(js, fjs);
   }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
Catatan
Editlah bagian yang saya tebalkan di atas

8. Lalu cari kode </head> dan masukan kode javascript komentar V2.3 ini diatasnya
&lt;script&gt;(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.3&amp;appId=ID app kamu&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;
9. Setelah semua script terpasang saatnya kita membuat komentar facebook di blog, caranya carilah kode <data:post.body/> (Biasanya lebih dari satu, pilih saja yang terakhir, jika masih tidak bisa cobalah satu per satu).
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<div class='fb-comments' data-colorscheme='light' data-mobile='auto-detected' data-numposts='5' data-order-by='reverse_time' data-width='100%' expr:href='data:post.url'/>
</b:if>
Catatan
- Light : kamu bisa mengganti warna background komentar facebook mu menjadi cerah/gelap jika ingin menggantinya menjadi gelap gantilah kata ini menjadi "Dark"
Auto-detected : Kode ini berfungsi untuk menyesuaikan layar HP pengunjung.
- 5 : Nomer ini berfungsi untuk membatasi komentar, jika sudah melebih 5 komentar maka secara otomatis akan di hidden dan diberi seperti "Read More".
- reverse_time : Kode ini berfungsi untuk mengurutkan komentar, misalkan memilih "reverse_time" maka komentar yang paling atas adalah komentar yang terbaru, kamu bisa memilih juga "time" dan "social". time, komentar yang paling lama akan berada di atas. social, komentar paling bermanfaat, banyak yang like, dan banyak yang di reply maka komentar itu akan ditempatkan paling atas.
- 100% : Sebenarnya kode ini untuk mengatur lebar komentar namun karena blog ini memakai template responsive jadi saya atur menjadi 100% agar komentar facebooknya menjadi responsive seperti template blog ini.
- data:post.url : Kalau yang satu ini kamu tidak diwajibkan untuk mengedit, karena fungsi yang satu ini adalah menyesuaikan judul komentar facebook dengan artikel blog, jadi saat kamu berkomentar di facebook dan komentar itu kamu bagikan ke teman-teman kamu maka ketika di share judulnya akan sesuai dengan judul artikel blog.

10. Simpan dan lihat hasilnya.

Mudah bukan? oke saya akan jelaskan mengapa meta tag ini berguna pada komentar facebook. Meta tag di atas bukan meta tag untuk search engine yang biasa dikenal oleh para webmaster, meta tag tersebut untuk mengidentifikasikan blog kita kedalam sosial media Facebook jadi untuk mempermudah mengidentifikasikan blog kita gunakan meta tag di atas.

Lalu apa gunanya untuk kedua script di atas? pada no.7 sebenarnya sih tidak diperlukan namun untuk berjaga-jaga agar website kita terindikasi facebook gunakanlah script di atas, script di atas versi terbarunya V2.3. Untuk script no. 8 gunana untuk memanggil script plugin facebok jadi agar komentar facebook kita bisa dipasang di blog gunakanlah script itu.

Selamat mencoba ^_^ jika ada yang masih bingung dengan tutorial di bawah ini silahkan tanyakan kepada saya dengan cara berkomentar di blog ini.

Subscribe to receive free email updates: