Facebook Comment dapat membawa interaktivitas yang lebih baik ke dalam Blog Anda sehingga secara tidak langsung akan dapat meningkatkan trafik dari Blog. Ketika ada pengunjung memberikan komentar pada postingan anda, komentar tersebut akan tertempel juga pada dinding Facebook pengunjung dari Blog anda.
Berikut Tutorial Cara Pasang Comment Facebook di Blog
Step 1 ==> Membuat Aplication ID Blogspot
Untuk membuat FB Aplication ID, anda dapat mengunjungi situs Facebook Developer Pages.
Masukan nama blog kamu dan klick continue. Jika keluar security captcha, isi security captcha kemudian klick tombol continue.
Aplication anda telah jadi. Simpan ID Aplication anda.
Step 2 ==> Memasang Facebook Coment pada Template Blogspot.
Masuk ke Template / Desain> Edit HTML dan checked Expand Widget Templates. Gunakan Ctrl + F pada keyboard anda dan cari code <html kemudian ganti kode tersebut dengan kode berikut
<html xmlns:fb='http://www.facebook.com/2008/fbml'
Cari code <body> kemudian paste code berikut dibawah code <body>
K
<div id='fb-root'/>
<script>
window.fbAsyncInit = function()
{
FB.init({
appId : '331694933507532',
channelUrl : '// trendingzone.blogspot.com channel.html', // Channel File
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('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }());
</script>
Ganti App ID 331694933507532 dengan Id yang anda buat pada step 1, ganti channel Url trendingzone.blogspot.com url blogspot anda.<script>
window.fbAsyncInit = function()
{
FB.init({
appId : '331694933507532',
channelUrl : '// trendingzone.blogspot.com channel.html', // Channel File
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('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }());
</script>
Cari kode </head> kemudian paste kode di berikut dibawah kode </head>
<b:if cond='data:blog.pageType == "item"'>
<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='Anak Kost' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='331694933507532' property='fb:app_id'/>
<meta content='ismail.usman' property='fb:admins'/>
<meta content='article' property='og:type'/>
Kemudian Ganti code yang berwarna dengan data anda berikut:<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='Anak Kost' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='331694933507532' property='fb:app_id'/>
<meta content='ismail.usman' property='fb:admins'/>
<meta content='article' property='og:type'/>
Anak Kost = Ganti dengan Nama atau Judul Blog Anda
331694933507532 = Gantgi dengan App Id anda yang telah di buat sebelumnya
ismail.usman = Gantgi dengan nama account FB anda
Setalah memasang script untuk FB comment pada template, sekarang saatnya memasang FB comment di bawah postingan. Cari code berikut:
<p class='post-footer-line post-footer-line-3'>
or
<div class='post-footer-line post-footer-line-3'>
or
<data:post.body/>
Kemudian paste code berikut dibawah salah satu code diatas:
<b:if cond='data:blog.pageType == "item"'>
<br/>
<p align='left'>
<a href='http://www.anakkost.info/' target='new'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi94_n9QG2_kxZoWtRWmnmjfBxi8n39_eGw_Z2wGzZJTddPPrlxa85nucSOafmfFUZLLBDyDGNwwkMFePqUiXFPfiJ1HC_Y_tTSG1z2c9k5garBZdM1xNiTtc_vRjsda9kFDBqcSiHbZ_U/s1600/comment.gif'/>
</a>
</p>
<div class='fb-comments' data-num-posts='3' data-width='600' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/>
</b:if>
<br/>
<p align='left'>
<a href='http://www.anakkost.info/' target='new'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi94_n9QG2_kxZoWtRWmnmjfBxi8n39_eGw_Z2wGzZJTddPPrlxa85nucSOafmfFUZLLBDyDGNwwkMFePqUiXFPfiJ1HC_Y_tTSG1z2c9k5garBZdM1xNiTtc_vRjsda9kFDBqcSiHbZ_U/s1600/comment.gif'/>
</a>
</p>
<div class='fb-comments' data-num-posts='3' data-width='600' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/>
</b:if>
Anda dapat mengatur jumlah coment yang ditampilkan dengan menganti 3 sesuai yang anda inginkan, dan untuk lebar comment dapat disesuaikan sesuai lebar templates dengan merubah angka 600.
Setelah itu save templates
0 comments:
Post a Comment