Membuat Komentar Facebook Di Blogspot

Home » Tips and Trik » Membuat Komentar Facebook Di Blogspot

Membuat Komentar Facebook Di Blogspot

Membuat Komentar Facebook Di Blogspot | Tips dan Trik kali ini adalah membahas mengenai bagaimana memasang komentar di facebook ke blogspot. Caranya memang sedikit rumit, dan saya harus mencoba-coba berbagai scipt dari blogwalking saya. dan akhirnya dapat sempurna dan saya akan bagikan ke teman-teman semua.

MEMBUAT APLIKASI FACEBOOK

1. Masuk/login ke Facebook.com
2. Kunjungi url ini: developers.facdbook.com/setup
3. Isi kotak yang tersedia sbb:

a. App Display Name: isi dengan nama aplikasi anda
b. App Namespace: bisa di kosongi
c. Tanda tik pada "I Agree.."
e. Klik Continue
f. Isi verifikasi kata
e. Klik Submit. Selesai

MENAMBAH ALAMAT BLOG KE APLIKASI FACEBOOK

Alamat blog/situs harus ditambahkan ke aplikasi yang dibuat.Jika tidak maka akan muncul warning di kotak komentar blog seperti "Warning: the url --- is Unreachable".

1. Masuk/login ke aplikasi Anda yang tadi dibuat. Atau kunjungi link ini: https://developers.facebook.com/apps/nomor-app-id-anda/
2. Klik Edit Settings (kanan atas)
3. Pada "Select how your app integrates with Facebook", klik Website (paling atas)
4. Kemudian Masukkan alamat url blog anda. Contoh, http://www.oki-wahyu.blogspot.com/ (jangan lupa diakhiri dengan garis miring).
5. Klik Save Changes.

MEMASUKKAN KODE DAN APLIKASI ID FACEBOOK KE BLOGGER.COM

A. KODE PERTAMA: KODE FBML FACEBOOK

1. Login ke blogger.com -> Template -> Edit HTML -> Lanjutkan -> tanda tik pada Expand Widget Template
2. Cari kode <html
3. Tambahkan kode berikut setelah kode <html
xmlns:fb='http://www.facebook.com/2008/fbml'

B. KODE KEDUA: OPEN GRAPH PROTOCOL TAG

1. Cari kode ini: <b:skin>
2. Taruh kode berikut persis di atasnya kode <b:skin>

<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='http://NAMA BLOG ANDA/' property='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='ID FACEBOOK ANDA' property='fb:admins'/>

<meta content='article' property='og:type'/>

Penting!!
Ganti huruf yang berwarna merah sesuai dengan blog dan applikasi blog anda.

Contoh Scipt Tempat Admin :

<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='http://oki-wahyu.blogspot.com/' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='101235243341058' property='fb:app_id'/>
<meta content='1722195868' property='fb:admins'/>
<meta content='article' property='og:type'/>

C. KODE KETIGA: KODE SDK FACEBOOK

1. Cari kode <body
2. Letakkan kode berikut setelah kode <body

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

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

Contoh Script Tempat Admin :

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '101235243341058', // App ID
channelUrl : 'http://oki-wahyu.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
});

// Additional initialization code here
};

// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>

D. KODE KEEMPAT: KODE KOTAK KOMENTAR FACEBOOK FB

Ini langkah terakhir yang terpenting. Tanpa kode ini, kotak komentar FB tidak akan muncul di blog Anda.

1. Cari kode ini: <div class='post-footer-line post-footer-line-3'> atau (kalau tidak ada) cari kode ini: <p class='post-footer-line post-footer-line-3'>
2. Tambahkan kode berikut di bawahnya

<b:if cond='data:blog.pageType == "item"'>
<div class='fb-comments' data-num-posts='2' data-width='500' expr:data-href='data:post.url'/>
</b:if>

Sumber :
http://www.alkhoirot.net
Facebook developers
Blog tools
Blogger mint

Ini adalah Tips dan Trik yang saya sempurnakan dari hasil blogwalking yang saya lakukan.

Oki Wahyu Blog