Cara Pasang Kotak Komentar Facebook di Blog Blogspot
Cara Pasang Kotak Komentar Facebook di Blog Blogspot
Cara memasang kolom
atau Kotak Komentar Facebook (Facebook Comment Box) di Blog Blogspot
sangat mudah. Kodenya sudah disediakan Facebook.
Ini cara paling mudah menampilkan kolom komentar yang bisa dishare langsung ke Facebook oleh Anda atau pengunjung.
Anda bisa "ambil" kode kotak komentar FB itu di sini: Facebook Developer.
Jika gagal, Anda bisa gunakan kode-kode di bawah ini yang digunakan CONTOHBLOG --namun hanya muncul di halaman posting ini saja, sekadar buat contoh dan bukti sukses :)
Ini cara paling mudah menampilkan kolom komentar yang bisa dishare langsung ke Facebook oleh Anda atau pengunjung.
Anda bisa "ambil" kode kotak komentar FB itu di sini: Facebook Developer.
Jika gagal, Anda bisa gunakan kode-kode di bawah ini yang digunakan CONTOHBLOG --namun hanya muncul di halaman posting ini saja, sekadar buat contoh dan bukti sukses :)
CARA PERTAMA
Langkah-langkahnya Sbb :
1. Dashboard --> Template -->Edit HTML
2. Cari (CRTL+F) kode <body> atau
yang semisalnya. Soalnya ada juga template yang kode body-nya ity kaya gini
<body exp.... bla bla.... > .
3. Copy + Paste kode berikut ini di bawah kode
<body> tadi.
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
4. Copy kode berikut ini dan simpan (Paste) tepat di bawah kode <div class='post-footer-line post-footer-line-3'> atau di bawah kode <div class='comments' id='comments'>. Jika ada dua kode begitu di template blog Anda, simpan di bawah kode yang kedua.
<b:if cond='data:blog.pageType ==
"item"'>
<div style='margin-top:20px'>
<div class='fb-comments' data-num-posts='5' data-width='600' expr:data-href='data:blog.url'/>
</div>
</b:if>
<div style='margin-top:20px'>
<div class='fb-comments' data-num-posts='5' data-width='600' expr:data-href='data:blog.url'/>
</div>
</b:if>
Catatan:
Angka 600 di atas adalah lebar kotak
komentar Facebook. Sesuaikan dengan lebar text area blog Anda.
Bisa juga kode tersebut diletakkan di bawah kode
yang digunakan untuk Related Posts (<div class='related posts'> ...
dst.. sampai kode penutup </div>)
JIKA hanya ingin menampilkan kotak komentar
Facebook di halaman tertentu, seperti yang CB punya yang hanya muncul di
posting ini, maka gunakan kode berikut ini (ada tambahan yang warna merah).
<div class='post-footer-line
post-footer-line-3'>
<b:if
cond='data:blog.url ==
"http://contohblognih.blogspot.com/2014/02/cara-pasang-kotak-komentar-facebook-di.html"'>
<b:if cond='data:blog.pageType ==
"item"'>
<div style='margin-top:20px'>
<div class='fb-comments' data-num-posts='5'
data-width='600' expr:data-href='data:blog.url'/>
</div>
</b:if>
</b:if>
Ganti http://contohblognih.blogspot.com/2014/02/cara-pasang-kotak-komentar-facebook-di.html
dengan permalink atau url posting/page yang akan
memunculkan kotak komentar Facebook
6. Save Template!
CARA KEDUA
Jika cara pasang kotak komentar Facebook di atas
gagal alias 'gak muncul, maka coba cara "lebih rumit" berikut ini:
A.LANGKAH PERTAMA
A.LANGKAH PERTAMA
1. Login ke akun Facebook Anda
2. Buat dulu ID Aplikasinya di Facebook App.
3. Klik “Create New App”.
4. Ikuti langkah berikutnya dan masukkan alamat blog di “App Domain”.
5. Masukkan juga alamat blog di bagian “Select how your app integrates with Facebook”, klik “Website”, masukkan "full url" seperti http://contohblognih.blogspot.com
6. Klik “Save Changes”.
Catatan:
2. Buat dulu ID Aplikasinya di Facebook App.
3. Klik “Create New App”.
4. Ikuti langkah berikutnya dan masukkan alamat blog di “App Domain”.
5. Masukkan juga alamat blog di bagian “Select how your app integrates with Facebook”, klik “Website”, masukkan "full url" seperti http://contohblognih.blogspot.com
6. Klik “Save Changes”.
Catatan:
Simpan ID Aplikasi Facebook Anda yang berupa angka
--yang muncul setelah tahap "Create New App".
Untuk moderasi komentar yang masuk nantinya,
buka saja FB Tools Comments.
B.LANGKH KEDUA
1.
Template > Edit HTML
2.
Copy & Paste kode berikut ini di bawah kode <head>.
Ubah YOUR_APPLICATION_ID dengan
"kepunyaan" Anda yang sudah didapat di langkah pertama.
<meta property="fb:app_id"
content="YOUR_APPLICATION_ID"/>
3. Temukan kode <div class='post-footer-line post-footer-line-2'> dan Copas kode berikut ini di bawahnya:
3. Temukan kode <div class='post-footer-line post-footer-line-2'> dan Copas kode berikut ini di bawahnya:
<b:if cond='data:post.isFirstPost'>
<script>(function(d){ var js, id = 'facebook-jssdk'; if
(d.getElementById(id)) {return;} js =
d.createElement('script'); js.id = id; js.async = true; js.src
= "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script> </b:if> <a expr:href='data:post.url +
"#fb-root"'><fb:comments-count
expr:href='data:post.canonicalUrl'/> comments</a>
4. Temukan kode <div class='post-footer-line post-footer-line-3'> dan Copas kode berikut ini di bawahnya:
<b:if cond='data:blog.pageType ==
"item"'> <div id='fb-root'/>
<script>(function(d){ var js, id = 'facebook-jssdk'; if
(d.getElementById(id)) {return;} js =
d.createElement('script'); js.id = id; js.async = true; js.src
= "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script> <div style='margin: 20px 0 0
0;'><fb:comments colorscheme='light' expr:href='data:post.canonicalUrl'
expr:title='data:post.title' expr:xid='data:post.id' width='600'/></div>
</b:if>
* Sesuaikan lebar kotak width='600' dengan
lebar main area blog Anda atau biarkan begitu, biasanya lebar singla page blog
memang segituan.
5. Save Template! Beres.....!
5. Save Template! Beres.....!
By : Rohim
Bro tlng buatkan q fb hantuu entarr q persen deh plz
BalasHapusKl bisa hubungi nomer q aja 083863851693
BalasHapus