Memasang Kolom Komentar dan Tombol LIKE nya Facebook di blog

Facebook merupakan salah satu jejaring sosial yang umum diminati oleh masyarakat Indonesia dan dunia. Selain Facebook juga ada Twitter, Friendster, MySpace, dan lain sebagainya. Dalam menyikapi persaingan user dalam pemakaian jasanya, Facebook juga selalu memberikan yang feature-feature baru untuk aplikasinya, salah satu nya adalah combo comment yang disertai dengan tombol like bagi para blogger dan web.
Seperti yang terlihat pada bawah postingan ini. Atau juga bisa dilihat seperti pada gambar berikut ini:


Dengan adanya link post ke facebook dari blog kita, tentu saja akan meningkatkan rate kunjungan di blog kita. Secara tidak langsung Facebook juga telah meng-iklankan blog kita.

Bagaimana cara membuat nya? Pertama kali yang harus dilakukan adalah login blogger anda dan facebook nya juga. Kemudian buka lah halaman Facebook Developers untuk membuat aplikasi kolom komentar.

Ikuti langkah-langkah pembuatannya, step by step. Sampai akhirnya selesai, jika anda ingin mensetting ulang, anda bisa membuka halaman facebook developers lagi, dan lakukan setingan ulang terhadap aplikasi anda.



Masukkan URL blog anda dengan meng-klik menu "WEB-SITE" dan isilah URL blog anda dengan diakhiri dengan tanda "/" seperti yang terlihat pada gambar dibawah ini:



Jika telah selesai catatlah APP ID aplikasi yang telah selesai dibuat tadi.


Jika telah selesai catatlah APP ID aplikasi yang telah selesai dibuat tadi. Kemudian save lah setingan aplikasi yang baru dibuat tadi.

Masuk ke dalam blogger anda, menu "edit HTML". Centang tanda "Expand Template Widged" kemudian darilah tulisan <body>, jika tak mau susah tekan "ctrl+f" dan tulisakan kata pencariannya.

Tulislah kode berikut tepat di bawah kode <body> tersebut.
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39;189991267702607&#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>
Jika telah selesai, cari kode </head> dan pastekan kode berikut diatas kode </head> tadi.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>

<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>

<meta content='http://asadi-febriyan.blogspot.com/' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>

<meta content='189991267702607' property='fb:app_id'/>
<meta content='1666540991' property='fb:admins'/>
<meta content='article' property='og:type'/>

NB :
http://asadi-febriyan.blogspot.com/ ganti dengan URL anda
189991267702607 ganti APP id anda (ID aplikasi yang baru dibuat sebelumnya)
1666540991 ganti dengan ID profil facebook anda

Untuk melihat ID profile facebook anda adalah dengan membuka halaman profile facebook anda dan lihat angka yang berada di ujungnya, seperti yang terlihat pada gambar di bawah ini:


Jika telah selesai, carilah kode <data:post.body/> dan pastekan kode berikut dibawahnya. Jika pada pencarian, anda menemukan lebih dari satu (2 atau 3) pilihlah pada kode <data:post.body/> yang kedua. Terserah.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding-left:10px;padding-top:10px;padding-right:10px;padding-bottom:10px;width:100%;'>
<fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='600'/>
</div>
</b:if>

NB:
Tulisan warna merah digantikan sesuai dengan ukuran post (sesuai dengan keinginan)

Untuk hasilnya bisa dilihat pada gambar yang pertama diatas. Setiap orang yang menyukai atau mengkomentari postingan blog anda, maka akan muncul di halaman profile facebook nya jika mencentang opsi dibagian bawahnya.

Berikut preview hasil yang muncul di halaman facebook sesaat setelah mengkomentari postingan yang telah disisipkan script diatas.


dan berikut ini preview jika menekan tombol like:


Selamat berkreatifitas. Salam codet.

2 comments: