Sehubungan dengan pertanyaan temen blogger di form comment di artikel Facebook Comments Box untuk Blogger - Blogspot saya sengaja bikinkan tutorial untuk Comment Box Facebook Baru untuk Blogger. Permasalah yang sekarang muncul jika menggunakan Comment Facebook untuk Blogger - blogspot adalah munculnya warning (peringatan) dari script comment facebook tentang keterkaitan permanen link yang kadang tidak sesuai, sehingga pada comment facebook muncul peringatan.

Facebook Comment Box Blogspot
Permasalah ini disebabkan juga oleh perubahan pada script Facebook Comment yang telah diperbaharui oleh Pihak Facebook sendiri. Untuk pemasangan script dan  pembuatan Comment Box Facebook Baru untuk Blogger sekarang lebih simple dan mudah, dan juga tidak terlalu berart dalam urusan loading comment. Ini akan berpengaruh juga pada loading halaman blogspot yang anda miliki. Oke kita mulai saja Tutorialnya.


Bagi temen-temen yang udah pernah mesang Facebook Comments Box untuk Blogger - Blogspot Pake cara lama hanya tinggal mengganti script sebagian saja. Jika untuk para pengguna baru anda langsung saja buat sebuah aplikasi di facebook developer menggunakan account facebook anda.

https://developers.facebook.com/apps

Selanjutnya Create New App . Isi Nama Aplikasi >> Centang bagian agreement ( App NameSpace ngga usah di isi) >> Next / Lanjut >> Masukkan Kode Captcha

Comment Box Facebook Baru untuk Blogger - Blogspot

Masukan Code Captcha

Selanjutnya Edit Bagian Aplikasi yang telah terbuat .

Setting Aplikasi Facebook

Setting 1. App Domain ( dengan domain blog anda misal donaalfian.blogspot.com atau namadomain.com ), 2. Pilih Kategori (Misal News, Health dll), 3. Site URL ( Isi dengan alamat lengkap blog anda contoh http://donaalfian.blogspot.com ), 4. Simpan / Save Aplikasi. (*Catat ! App ID anda dan ID Profile Facebook anda untuk step selanjutnya " gunakan menu Use Graph API Explorer untuk melihat ID Profile Facebook anda")

Setelah selesai baru kita letakkan skrip di Template Blog Kita. Bagi yang udah pernah setting Facebook Comment Box (tutorial lama) hanya tinggal mengganti sebagian Skrip saja. yang baru pasang lanjutkan proses pemasangan Skrip di template blogspot anda. Sebelum menambahkan skrip simpan dahulu template anda supaya kalo ada kesalahan dalam pemasangan bisa di restore kembali.

Masuk di Halaman Edit Template Blogger (Blogger Dashboard) : Design >> Edit HTML  dan centang [] Expand Widget Templates.

Edit Template Blogger

Step 1. Tambahkan kode ini setelah kode <html
xmlns:fb='http://www.facebook.com/2008/fbml'
sehingga kodenya menjadi seperti ini
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..
2009/gml/expr' >

Step 2 : Cari kode </head>
paste kode berikut sebelum </head>
<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='NamaBlogAnda' property='og:site_name'/>
<meta content='IdAppAnda' property='fb:app_id'/>
<meta content='ProfileIdAnda' property='fb:admins'/>
<meta content='article' property='og:type'/>
Jangan lupa mengganti tulisan:
- Nama Blog Anda : isi dengan nama blog anda (http://bloganda.blogspot.com) atau http://domainanda.com
- idAppAnda : isi dengan kode Aplikasi Anda.
- Profile Id : isi dengan profil facebook anda

* Untuk mengetahui id profile kita dibagian App Developer bisa pilih menu Use Graph API Explorer nanti kita bisa ngeliat Profile ID Facebook Kita.

Step 3 : Cari kode <body>
kemudian pastekan kode di bawah ini setelah kode <body>
<div id='fb-root'></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/id_ID/all.js#xfbml=1&appId=IdAppAnda';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Step 4
: cari kode <data:post.body>

- pastekan kode berikut setelah <data:post.body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' data-num-posts='2' data-width='500' expr:data-href='data:post.url'/>
</b:if>
atau paste sesuai dengan keinginan anda, Lalu Simpan Template Blogger anda. SELESAI ! ;).

Untuk temen temen yang udah pernah menggunakan tutorial Facebook Comments Box untuk Blogger - Blogspot (tutorial lama) hanya mengganti skrip Step 4 (tutorial lama) dengan Step3 (tutorial baru) dan Step 6 (tutorial lama) dengan Step 4 (tutorial baru). Hasil dan contoh bisa dilihat Comment Box Facebook Baru untuk Blogger - Blogspot di Dona Alfian Blog dan dijamin peringatan dari facebook akan hilang :D. Selamat mencoba jika ada kesulitan silahkan bertanya. dan tunggu selalu tutorial-tutorial dari Dona Alfian Blog selanjutnya.

Rating by User : 4.2


Berikan KLIK »» Apabila Informasi atau Ulasan

Comment Box Facebook Baru untuk Blogger - Blogspot

Bermanfaat untuk anda, Terimakasih.

Related Post for Comment Box Facebook Baru untuk Blogger - Blogspot :



13 comments

  1. Budi Santosa  

    15 Desember 2011 19.39

    untuk wordpress apa bisa gan

  2. Dona Alfian  

    16 Desember 2011 04.58

    @Budi Santosa: bisa sob. cuman untuk step 4 kalo pake wordpress di ganti jadi

    <div class='fb-comments' data-num-posts='2' data-width='500' data-href='<?php the_permalink(); ?>'/>

    Step Yang lainnya sama caranya.

    MOga Ngebantu

  3. denidoank  

    19 Desember 2011 01.22

    sebelum nya trims saya juga mau donk boz ni blog nya walau masih baru tapi yakin bisa deh....www.obathandphone.blogspot.com
    trims GOOD LUCK ALL

  4. denidoank  

    19 Desember 2011 01.24

    oia ni email facebook and yahoo gan trims...denol_tralala@yahoo.co.id den_tralala@yahoo.co.id
    tirms GOOD LUCK ALL

  5. akang robi  

    14 Januari 2012 22.38

    saya dah coba..tapi gagal mulu. ada
    peringatan scriptnya salah. dan step
    ke 4 ga ktemu2 kodenya. via browser
    hp.. ampe mumet! huftt..

  6. Dona Alfian  

    15 Januari 2012 12.34

    @denidoank : Dicoba ajah dole den.. pelan pelan ajah pasti bisa..

    @akang robi: kalo bisa pakai computer biasa sob biar cepet geraknya dan perlu di coba doloe soalnya kalo belomm dicoba kadang perlu beberapakali untuk memastikannya bisa... tetep semangat sob.. pasti kamu bisa :D

  7. sukmagie  

    19 Januari 2012 18.14

    Kok punyaq error yaa?
    apa perlu di parse?

  8. Rudy Hartono  

    7 Februari 2012 22.10

    terima kasih atas informasinya yang mudah padat dan mudah untuk dimengerti, salam kenal and visit me back (blogger bondowoso)

  9. Mr. San San  

    17 Februari 2012 07.07

    saya sudah coba.. tapi ada peringatan "warning url posting tidak ditemukan".. gimana gan cara betulinya.??

    email pliss sanieride@gmail.com

  10. HANDOCHORD  

    12 Maret 2012 00.26

    saya tidak menemukan apakah ada kode lain selain itu?

  11. HANDOCHORD  

    12 Maret 2012 00.27

    <data:postbody.....

  12. syamsul Arifin  

    31 Maret 2012 21.14

    saya udah coba tapi gagal terus ya? gak bisa di save perubahannya error terus.Kenapa ya??

    Ini blog saya http://syamarif.blogspot.com, mohon dikunjungi yaaa..!!! dan mohon diberi masukan karena saya masih pemula dan masih sedikit bingung dengan kode2 HTML.

    Thanks

  13. Faisal Tifan Fardiaz  

    19 Juli 2012 11.20

    kode ini ga ada
    jadi gmana caranya yg step 4 ga bisa?

Posting Lebih Baru Posting Lama Dona Alfian Blog

Rekomendasi Info



Minuman Berenergi Aman Tidak Berbahaya