468x60 Ads

Cara Menampilkan Komentar FB di Blog

Unknown | 17:00 | , ,

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 == &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='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) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).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 == &quot;item&quot;'><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=xxxxxxxxxxxx&amp;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; 

0 Kommentare:

Kommentar veröffentlichen