Membuat Kotak Komentar Facebook Diblog

Artikel ini menulis tentang membuat kotak komentar facebook dengan mengatur lebar dari kotak komentar facebook agar sesuai dengan lebar postingan dan templatenya, berikut adalah solusinya:

1. Login dulu ke facebook

2. Masuk ke Facebook Developer Page

3. Masukan data anda
  • Masukan Nama Aplikasi
  • URL situs /blog anda
4. Nah copy no ID blog/aplikasi anda



5. Sekarang LoginLah ke Account Blogger sobat
Silahkan Menuju Layout ( Rancangan )> Edit HTML dan check Expand Widget Templates. Cari code berikut (Ctrl+F):

<body>

Lalu masukan kode ini dibawahnya :



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

Ganti App Id dengan ID Aplikasi/Blog teman

Lalu cari kode :

</head>

Masukan ini dibawahnya :



<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='URL Blog' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='APP ID' property='fb:app_id'/>
<meta content='Profile ID Facebook' property='fb:admins'/>
<meta content='article' property='og:type'/>


  • Ganti URL Blog dengan URL/alamat blog teman
  • APP ID ganti dengan ID Aplikasi/Blog Teman
  • Profile ID Facebook ganti dengan ID Profil teman (untuk mengetahuinya masuk facebook > profile > lihat di addres bar contoh . . .id=. ID Profile )
Yang terakhir cari kode :

<data:post.body/>

Masukan ini dibawahnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'><br/> <p align='left'><a href='http://iciw-iciw.blogspot.com/2011/03/cara-membuat-kotak-komentar-facebook-di.html' target='new'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9bGQ_Rh-dSlx28jNvYFUWDlFMzk6zI4WaqHNkMeP3v2n2e6SedcVItLUeiCFtFEGZAc3cTjAdBdw0JFZ7Ay3n59YxM1XewJjZB4SgHzpj9SqChR9hhgDF8RoRu8yDMypb7EN2Z65hQ3eo/s1600/Facebook+Developer+1.jpg'/></a></p><div><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='500'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> Mau <a href='http://iciw-iciw.blogspot.com/2011/03/cara-membuat-kotak-komentar-facebook-di.html' target='_blank' title='Facebook Comment'>Facebook Comment Seperti Ini</a></b></div></b:if><br/>

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9bGQ_Rh-dSlx28jNvYFUWDlFMzk6zI4WaqHNkMeP3v2n2e6SedcVItLUeiCFtFEGZAc3cTjAdBdw0JFZ7Ay3n59YxM1XewJjZB4SgHzpj9SqChR9hhgDF8RoRu8yDMypb7EN2Z65hQ3eo/s1600/Facebook+Developer+1.jpg adalah lokasi gambar yang tampil dikotak komentar, ganti link gambar jika ingin menggantinya.
  • 500 adalah lebar kotak komentar facebook ubah jika ingin menyesuaikannya.
Simpan dan selesai lihatlah hasilnya.

Buat yang sudah baca
* Tingalkan komentar dan follow blog sederhana ini ya!!!!!

Share:

0 comments:

Post a Comment

Powered by Blogger.

Online

files

Mengenai Saya

Social Icons

twitterfacebookgoogle pluslinkedinrss feedemail