Cara Menampilkan Komentar FB di Blog

Perkembangan Dunia Maya [baca : Internet] sekarang ini sangat banyak sekali mengalami perubahan baik itu pada Blogspot, FaceBook maupun yang lainnya, :z; dan Artikel saya di Blog yang lain tentang Jawab Komentator Blog dari FB Gaya Punya dan Lebih jauh jawab Komentator Blog dari FB sudah ketinggalan alias tidak relevan lagi :r;

Sekarang saya akan berbagi dengan kawan Cara Menampilkan Komentar FaceBook di Blog :y;

Caranya

1. Membuat Aplikasi untuk Komentar di FaceBook

Masuk dulu ke FaceBook kawan
Pilih https://developers.facebook.com/setup
Pilih Create New App kalau kawan belum pernah buat App
Kalau kawan sudah pernah buat App maka akan langsung muncul Form, kawan tinggal memasukkan datanya saja sebagai contoh BLOG CREATION – Lanjutkan
Berikutnya akan muncul verifikasi teks yang harus kawan masukkan – Kirim
Kalau tidak ada kesalahan berarti kawan sudah berhasil membuat Aplikasi
Copy ID App kawan dan simpan [Notepad]

2. Memasukkan Alamat Blog kawan ke dalam Aplikasi

· Masukkan alamat Email kawan

· Pada Select how your App integrates with Facebook pilih saja Website with Facebook Login dengan jalan meng-Klik tanda checklist disampingnya

· Pada Site URL masukkan alamat Blog kawan contoh http://blog-renovasi.blogspot.com/

· Simpan Perubahan

3. Cara Memasang Kode Developer FB di Blog

Masuk Account Blogger dengan ID kawan
Pada Dasbor Pilih Template – Edit HTML
Cari <html... simpan disini> kalau pada Template saya letaknya baris ke tiga dari atas atau simpan diatas <head> sebelum tanda penutup
Sisipkan script ini xmlns:fb='http://www.facebook.com/2008/fbml' sebelum tanda penutup [simpan disini] hasilnya kurang lebih seperti ini

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'> <head>

Selanjutnya kawan scroll kebawah [masih pada Template letaknya paling atas] sampai pada <b:skin><![CDATA[/*
Simpan Script berikut tepat diatasnya

<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='BLOG NAME' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='YOUR APP ID ' property='fb:app_id'/>
<meta content='YOUR ID FB PROFILE' property='fb:admins'/>
<meta content='article' property='og:type'/>

Ganti semua teks yang berwarna merah dengan Nama Blog Kawan dan ID App yang disimpan pada Notepad tadi, sedangkan untuk Your ID FB Profile bisa didapat dengan Klik kanan pada Photo Profile FB kawan atau pada browse [jendela pencarian] ketik : https://graph.facebook.com/ Nama FB kawan maka akan muncul kode sebagai berikut:

{
"id": "10000063xxxxxxx",
"name": "Putu Blogbego",
"first_name": "Putu",
"last_name": "Blogbego",
"link": "http://www.facebook.com/Nama FB kawan",
"username": "Nama FB kawan",
"gender": "male",
"locale": "id_ID"
}

Ambil yang saya beri warna biru saja

Selanjutnya Cari tag </head>
Kalau sudah ketemu Copas script berikut tepat diatasnya

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR ID FB PROFIL' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

Ganti teks yang saya beri warna biru [YOUR ID FB PROFIL] dengan ID yang didapat tadi :x

Selanjutnya cari tag <body>
Copas kode berikut dibawahnya

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
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);
}());
<fb:comments/>
</script>

Ganti teks yang berwarna merah dengan App ID kawan yang disimpan pada Notepad tadi, Sampai disini simpan dulu Template kawan, karena seandainya ada kesalahan biar cepat bisa diperbaiki :z;

Sekarang mari mulai lagi berpusing-ria, beri tanda centang disamping Expand Template Widget
Cari kode <div class='comments' id='comments'> pada Template saya ada 2[dua] dan saya pakai yang pertama
Copas kode berikut tepat dibawahnya

<b:if cond='data:blog.pageType == "item"'><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=xxxxxxxxxxxx&xfbml=1"></script><fb:comments expr:href='data:post.url' numposts='5' width='550'/></b:if>

Ganti '550' sesuai dengan lebar Template kawan

Simpan kembali Template kawan dan sampai disini berarti sudah selesai, selanjutnya silahkan kawan lihat hasilnya :y;

Berbagi Artikel :

Cara Menampilkan Komentar FB di Blog
Rate this posting:

{[["☆","★"]]}

Kalau pada Artikel Cara Menampilkan Komentar FB di Blog
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---