Cara Menampilkan Komentar FB di Blog

Unknown - Selasa, 26 Juni 2012 - 07:00 wita

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; 


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---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

16 Komentar pada : “Cara Menampilkan Komentar FB di Blog”

  1. thanks sudah berbagi ilmunya, sangat membantu. sukses selalu...

    BalasHapus
    Balasan
    1. Trims kembali, mudah-mudahan dapat membantu dan sukses selalu :z;

      Hapus
  2. makasih mas infonya sangat berharga, add mas blog saya sepi banget gak ad teman maklum baru belajar :s

    BalasHapus
    Balasan
    1. Trims kawan kunjungannya, Add sudah pasti :z;

      Hapus
  3. kok saya udah coba ga bisa ya mas??? tolong donk pencerahannya :(

    BalasHapus
    Balasan
    1. Kegagalan adalah Kesuksesan yang tertunda :z;
      Coba diulangi lagi kawan, tahap demi tahap dan perhatikan yang perlu dirubah / diganti lanjut simpan dulu baru ketahap berikutnya :q;

      Hapus
  4. Info yang sangat bermanfaat. Mantap!

    BalasHapus
    Balasan
    1. Trims kawan sudah mampir dan komentar :z;

      Hapus
  5. masbro keren blognya kunjungi balik ya ngadubanteng.blogspot.kom

    BalasHapus
  6. Terimakasih atas infonya pak, sukses selalu dan bermanfaat sekali.

    BalasHapus
  7. Makasih sob tutorialnya, sangat membantu.

    BalasHapus
  8. makasih akang atas informasinya. good job..

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM ATAU PAKAI NAMA ANONIM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation di Email Kawan





BANNER [300x250]
© 2013 - BLOGBEGO CREATION | Powered by Blogger
Design Template by : Blogger Edan