Medal Madangan

Cara Membuat Kotak Komentar Facebook di Blog

Dedi E Kusmayadi Soerialaga 0
Setelah Sebelumnya saya mengajak anda membuat Tombol like Facebook pada postingan serta TweetBox Di Bawah Postingan Anda, Kini saya akan mengajak anda membuat Kotak Komentar Facebook Di Blog Anda.

Bentuknya seperti Gambar Diatas, Tertarik Membuatnya?

Silahkan Simak Tutorial Berikut:

Langkah 1.
  1. Pertama login ke akun blogger anda.
  2. Kemudian buka facebook anda, login terlebih dahulu, lalu masuk ke aplikasi facebook developers
  3. Kemudian buat nama aplikasi terlebih dahulu, Isikan nama Aplikasi Dengan Kotak Komentar atau lainnya setelah itu, klik tombol " Buat Aplikasi baru (create new aplication)"
Setelah itu anda akan masuk kedalam menu pengaturan aplikasi , masuk ke menu Website ,lalu masukkan url blog anda Misalnya, http://4softcomputer.blogspot.com, berikan tanda / diakhir Url, lihat gambar :Jika Sudah, Save Dan Ambil Applications ID'nya(Kode Aplikasi)

Jika Sudah, masuk Ke Akun Blogger Anda Masing-masing >> rancangan(Design) >> Edit HTML >> Centang Expand Template Widget

Jika Sudah, Cari Kode Berikut:

<body>


Setelah Ketemu, Masukkan Kode Dibawah ini tepat Dibawah Kode Tersebut

<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>

Kemudian, Cari Kode <b:skin><![CDATA[/* dan Copy Kode Dibawah ini Dan taruh tepat diatasnya:

<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 blogger andaproperty='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'/>

Jika Sudah, Cari Kode <data:post.body/> dan copy Script dibawah ini tepat Dibawah kode tersebut:

<b:if cond='data:blog.pageType == &quot;item&quot;'><br/> 
<p align='left'><a href='url-blogger-anda' target='new'>
<img border='0'/></a></p><div><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='450'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'>
</div></b:if><br/>

Kemudian save Template Anda dan lihat hasilnya 
Tags

Post a Comment

إرسال تعليق

أحدث أقدم