Home » » Cara Buat Kotak Komentar Facebook di Blogger :

Cara Buat Kotak Komentar Facebook di Blogger :

Cara Buat kotak komentar Facebook di Blogger :
Untuk memasang fasilitas Komentar Facebook di blog ini, saya menyarankan kepada para sobat blogger semuanya, untuk membackup/mendownload dulu templatenya, hal itu dilakukan untuk menjaga terjadinya error kode/hal-hal yang tidak kita inginkan, sehingga bila ada masalah, kita bisa kembalikan lagi.


Sebelum kita membuat kotak komentar Facebooknya, kita buat dulu Facebook Apps, yang nanti kita akan mendapat App ID, yang mana App ID itu yang kita perlukan untuk membuat facbook koemntarnya.

1. Cara Buat ID Aplikasi Facebook untuk Blogger :
1. Kita mulai dengan masuk ke Akun Facebook.com kita.
2. Setelah masuk, Kunjungi url ini: https://developers.facebook.com/apps
3. Isi kotak yang tersedia, lihat gambar dibawah ini :
Isikan App Display Name sesuai ke ingginan, kosongkan saja App Namespacenya,  lalu klik Continue.
4. Etelah Klik Continue/Lanjutkan. maka akan muncul window verifikasi kata dan isikan kata yang telah diberikan. lalu klik Continue/lanjutkan.

5. Setelah itu, akan muncul window baru berupa App ID, Lihat gambar dibawah ini:
"App ID/API Key" adalah nomor aplikasi id facebook Anda. Catat dan simpan nomor App id tersebut di notepad. ini akan diperlukan nantinya.
6. Alamat blog sobat harus ditambahkan ke aplikasi yang dibuat. Tanpa itu, akan muncul warning di kotak komentar blog seperti "Warning: the url --- is Unreachable". 
Berikut cara menambah alamat blog:
  • Klik Edit Settings (kanan atas) pada aplikasi anda. lihat gambar dibawah ini :
  • Pada "Select how your app integrates with Facebook" Masukkan alamat url blog anda. Contoh, http://saktobek.blogspot.com/ (jangan lupa diakhiri dengan garis miring).
  • Klik Save Changes

    Lihat gambar dibawah ini :
Nah, sejauh ini kita sudah selesai membuat ID Aplikasi Facebook untuk blog kita. langkah selanjutnya adalah kita membuat dan memasang kotak koemntar facebook di blog kita.

2. Cara Pasang kotak komentar Facebook di Blogger :
1. Login ke blogger,
2. Masuk ke Template -> Edit HTML -> Centang "Expand Template widget"
3. Cari kode seperti dibawah ini, [biasanya berada sebelum <head>]
<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'>
masukkan kode seperti ini, lihat kode diatas, ada kode yang saya warnai, itu adalah kode yang ditambahkan.
xmlns:fb='http://www.facebook.com/2008/fbml'
4. Lalu cari kode </head>, lalu letakkan kode 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='NAMA BLOG ANDA' property='og:site_name'/>
<meta content='App ID' property='fb:app_id'/>
<meta content='ID Profil Anda' property='fb:admins'/>
<meta content='article' property='og:type'/>
KETERANGAN: Lihat tulisan yang berwana.
a. Ganti tulisan NAMA BLOG ANDA sesuai nama blog/situs anda.
b. Ganti tulisan APP ID ANDA dengan nomor aplikasi id Anda yang telah anda buat tadi.
c. Ganti ID PROFIL FB dg yang sesuai.

5. Cari kode </head> seperti no 3 tadi dan letakkan kode berikut ini tepat dibawah kode </head>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'App ID Anda',
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>
Ganti App ID Anda diatas dengan App ID tadi.

6. Lalu cari kode berikut, <data:post.body/> lalu letakkan kode berikut tepat dibawah kode tersebut :
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='fb-comments' data-num-posts='2' data-width='450' expr:data-href='data:post.url'/>
</b:if>
450 bisa diganti dengan panjang kotak komentarnya yang sesuai keinginan anda.

7. Setelah langkah diatas sudah selesai, silahkan Klik pratinjau, jika tidak ada error kode, Klik Save Tempaltes/Simpan Template.

Sumber :http://abdu-green.blogspot.com/

3 komentar:

  1. bagus gan,,cuman malas pake facebook komen

    ReplyDelete
  2. Produk dijamin asli
    TILLA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI http://tilla-shop.blogspot.com/
    BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

    Dijual

    Ready Stock !
    BlackBerry 9380 Orlando - Black
    Rp.900.000,-

    Ready Stock !
    BlackBerry Curve 8520 Gemini
    Rp.500.000,-

    Ready Stock !
    BlackBerry Bold 9780 Onyx 2
    Rp.800.000,-

    Ready Stock !
    Blackberry Curve 9320
    Rp.700.000,-

    Ready Stock !
    Samsung Galaxy Tab 2 (7.0)
    Rp. 1.000.000

    Ready Stock !
    Samsung Galaxy Nexus I9250 - Titanium Si
    Rp.1.500.000,-

    Ready Stock !
    Samsung Galaxy Note N7000 - Pink
    Rp.1.700.000

    Ready Stock !
    Samsung Galaxy Y S5360 GSM - Pure White
    Rp.500.000,-

    Ready Stock !
    Nokia Lumia 800 - Matt Black
    Rp.1.700.000,-

    Ready Stock !
    Nokia Lumia-710-white
    Rp. 900.000,-

    Ready Stock !
    Nokia C2-06 Touch & Type - Dual GSM
    Rp.450.000,-

    Ready Stock !
    Nokia Lumia 710 - Black
    Rp. 900.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari XL) - Black
    Rp.1.200.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari Telkomsel)
    Rp.1.200.000,-

    Ready Stock !
    Apple iPod Touch 4 Gen 8GB
    Rp.700.000

    Ready Stock !
    APPLE iPod Nano 8GB - Pink
    Rp.500.000,-

    Ready Stock !
    Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
    Rp 1.300.000

    Ready Stock !
    Acer Aspire S3-951-2364G34iss
    Rp. 1.200.000,-

    Ready Stock !
    Acer Aspire 5951G Core i7 2630 Win 7
    Rp. 2.500.000,-

    Ready Stock !
    Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
    Rp. 2.500.000,-

    Ready Stock !
    Nikon D7000 kit 18-105mm
    Rp.1.700.000

    Ready Stock !
    Nikon D90 Kit 18-105mm Vr
    Rp 1.300.000

    Ready Stock !
    Nikon Coolpix L 120 Red
    Rp. 900.000

    Ready Stock !
    Nikon Coolpix P 500 Black
    Rp 1.000.000

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...
GET UPDATE VIA EMAIL
Berlangganan artikel via email!
reader