Menambah Kotak / Kolom Komentar Facebook Pada Blogspot

B

eberapa tahun terakhir ini akun jejaring sosial facebook sudah sangat mendunia, hal ini terlihat dari statistik pengikut akun ciptaan Mark Elliot Zuckerberg sampai membludak dan tersebar seantero jagat, bahkan Indonesia saja menjadi pemasok follower kedua paling besar di dunia setelah Amerika Serikat. Yahh.., boleh jadi ketenaran inilah yang membuat saya tertarik ingin memposting artikel tentang facebook karena memiliki aksesibilitas yang sangat tinggi antara teman satu dengan yang lainnya. Dan dalam benak saya akan sangat menarik jika kita mencoba untuk mengkombinasikan aplikasi yang dimiliki facebook dengan blogspot, dimana kita tahu keduanya memiliki kesamaan sebagai tempat berbagi atau sharing bagi sesama.

Pada awalnya saya sangat penasaran dengan ide mengkombinasikan aplikasi facebook dengan blogspot. Setelah searching pada mbah google, sampai akhirnya aku terdampar pada satu artikel di kumpulancara.com yang membahas tentang gimana cara memasang kotak facebook ke dalam blogspot. Setelah saya baca dan cermati, akhirnya aku coba satu-persatu langkah-langkah yang diajarkan. Dan... hasilnya seperti yang Anda bisa lihat sendiri kotak komentar facebook terpasang di bawah postingan saya ini, hehe5..

Nahh, sekarang gimana, apakah Anda juga tertarik ingin memasang di blog Anda?? Saya rasa, tidak ada alasan untuk menolaknya, bukan..?? Baiklah, sekarang kita langsung aja belajar bareng, berikut langkah-langkahnya :

[1]. Nonaktifkan Default Komentar

Penonaktifan ini dilakukan supaya dalam blog kita nanti tidak muncul dua kolom komentar. tapi jika memang menghendaki dua kolom komentar tersebut muncul, ya itu sah-sah saja dan gak ada pengaruhnya kok, hehe5..

Jika Anda ingin menonaktifkan, silahkan Anda login blogger terlebih dahulu. Setelah itu pergi ke "Pengaturan" dan kemudian klik "Komentar". Pada menu komentar tersebut silahkan Anda klik "Sembunyikan" lalu geser ke bawah dan klik "Simpan"

[2]. Bikin Aplikasi di facebook (App ID)

Pertama login ke akun facebook Anda, setelah itu Anda silahkan kunjungi pengembang facebook atau bisa klik facebook developers dan muncul halaman seperti di bawah ini :

Masukkan nama aplikasi Anda dan klik "Setuju" kemudian klik "Buat aplikasi baru". Setelah itu Anda akan bertemu dengan halaman berikutnya dan tinggal klik "Connect/Terhubung".

Setelah Anda klik tadi, maka Anda akan dibawa ke halaman terhubung seperti halaman di bawah ini :

Perlu diingat disini bahwa dalam pengisian URL Terhubung diberi tanda garis miring ( / ) pada akhir alamat URL blog Anda, misalkan :www.hariopamungkas.blogspot.com/

Untuk Base Domain Anda isi dengan : blogspot.com 

Setelah itu Anda klik "Simpan Perubahan"

Untuk mengambil kode Application ID (App ID), maka Anda bisa klik "Dasar" untuk meng-copy App ID Anda kemudian Anda paste-kan ke dalam form notepad agar bisa digunakan untuk pengisian tahap selanjutnya.

Catatan : Jika Anda merasa kebingungan dengan langkah [1] dan [2], alangkah baiknya Anda bisa gunakan App ID milik pengembang yang di-share untuk kita yang mau menggunakannya, App ID :  117743971608120

[3]. Meletakkan kode pada Template Anda

Masuk ke "Rancangan" dan "Edit HTML", jangan lupa centang "Expand Template Widget". Sebagai bentuk antisipasi bila terjadi kesalahan penempatan kode, lebih baik Anda download dulu kode HTML Anda dengan klik "Download Template"

Selanjutnya silahkan Anda cari kode </body>. Untuk mempermudah pencarian, Anda bisa tekan CTRL + F untuk mencari kode tersebut. Setelah ketemu, letakkan kode berikut ini di bawah kode </body> tadi

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39;APP-ID Anda&#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>

Silahkan Anda ganti App ID Anda dengan kode App ID yang tadi Anda buat pada langkah ke [1] atau ganti dengan App ID yang saya rekomendasikan tadi.

Kemudian Anda cari kode : </head>, lalu letakkan kode berikut ini di bawah 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='Nama Blog Anda' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='APP-ID Anda' property='fb:app_id'/>
<meta content='Profile-ID-Facebook Anda' property='fb:admins'/>
<meta content='article' property='og:type'/>

Keterangan :

Nama Blog Anda : ganti dengan Nama Blog yang Anda miliki [misalnya : Hario Pamungkas]

App-ID Anda : ganti dengan App-ID yang Anda bikin tadi atau yang saya rekomendasikan [misalnya : 117743971608120]

Profil ID Facebook Anda : ganti dengan profil ID facebook yang Anda miliki. Cara mencari profil ID Anda mudah kok, tinggal klik profil facebook Anda dan lihat di address bar [misal : http://www.facebook.com/profile.php?id=100001528070301 atau http://www.facebook.com/hario.pamungkas3]

Setelah selesai meletakkan kode di atas, saya harap jangan disimpan terlebih dahulu dan lakukan langkah selanjutnya.

[4]. Meletakkan Kotak Komentar Facebook pada Template Anda

Silahkan Anda cari kode berikut ini : <data:post.body/>

Jika Anda menemukan 2 kode yang sama, maka letakkan kode berikut ini di bawah kode <data:post.body/> yang ke dua.

<b:if cond='data:blog.pageType == "item"'><br /> <p align='left'><a href="http://www.hariopamungkas.blogspot.com" target="new"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLAQZ5HnXoznAkuIJbOsN729sUzJZK1gbxi7ZJEYA-mqSSr9AXT0wK9vJr0txoMgfUZDQGIBc2IdvUJ3tfbupDfkYJp1C1N0k_2n7cPCC1zkcs0jUDIGiRT13ROy-pbFcpBAHbJ5DGfVA/s1600/comment.gif" /></a></p><div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> by <a href='http://www.hariopamungkas.blogspot.com' target='_blank' title='Facebook Comment'>Hario Pamungkas</a></b></div></b:if><br />

Keterangan :

Ubah lebar kolom / kotak komentar 450 sesuai dengan lebar kolom postingan Anda

Setelah selesai meletakkan kode di atas, maka langkah terakhir klik "Simpan Template" dan lihat hasilnya..

Saya rasa cukup sekian postingan dari saya, selamat mencoba dan mudah-mudahan bermanfaat..