Cara Memasang Facebook Comment Dibawah Postingan


Hampir semua yang kenal media sosial dan internet dewasa ini mempunyai akun Facebook. Dengan Facebook mereka bisa berbagi tulisan, foto bahkan video. Facebook juga sangat bermanfaat bagi seorang blogger yang ingin mengenalkan postingan barunya atau sekedar menambah pengunjung untuk blog nya.

Sama seperti pengguna Facebook yang sangat senang bila ada yang memberikan komentar atas apa yang di bagikannya. Pemilik blog juga senang jika artikel yang telah dibagikannya bermanfaat bagi orang lain apalagi jika diberikan komentar positif.

Karena alasan itulah tutorial kali ini saya buat agar pengguna Facebook mudah memberikan komentar tanpa harus login ke Google terlebih dahulu dengan cara menambah Facebook comment di bawah postingan Blogger.

Cara Memasang Facebook Comment Dibawah Postingan:
  1. Buka Facebook Developer Account dan daftar developer

  2. Setetelah pendaftaran selesai. Pada menu Add New App klik WWW

    FB developer

  3. Klik Skip and Create New App ID

  4. Tulis nama blog Anda sebagai Nama Tampilan. Isi Email Anda dan pilih Kategori lalu klik Buat ID Aplikasi

    FB developer 6

  5. Setelah dibuat maka Anda akan mendapatkan ID Aplikasi seperti terlihat pada gambar dibawah ini

    FB developer

  6. Buka dashboard blogger => Template => Edit HTML
  7. Tempatkan kode di bawah ini tepat di bawah kode <Head>
    <meta expr:content='data:blog.pageTitle' property='og:title'/>
    <meta expr:content='data:blog.url' property='og:url'/>
    <meta content='article' property='og:type'/>
    <meta content='Facebooks App ID' property='fb:app_id'/>
    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <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>
  8. Ganti Facebooks App ID dengan ID Aplikasi yang telah Anda dapatkan sebelumnya
  9. Cari kode <html lalu ganti dengan kode di bawah ini 
    <html xmlns:fb='http://www.facebook.com/2008/fbml'
  10. Letakkan kode di bawah ini tepat diatas kode ]]></b:skin>  
    /*--- Tabbed Facebook Comments By MastFun4u ----*/.comments-page { background-color: #f3f3f3; width:440px;} #blogger-comments-page { padding: 0px 5px; display: none;} .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f5f5f5;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;} .comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d2d2d2;}
  11. Cari kode di bawah ini
    <div class='comments' id='comments'>
  12. Letakkan kode di bawah ini tepat setelah kode di atas
    <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://2.bp.blogspot.com/-rae4j6NaLkY/T1JrjUEIkkI/AAAAAAAAGBc/PzwMIo1g1Is/s400/fbcomment.png'/><fb:comments-count expr:href='data:post.url'/> Facebook Comments </div>>
    <div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/>
    <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='440'/>
    </b:if></div>
  13. Simpan Template
Semoga bermanfaat :)



Pencinta teknologi, yang hobi memotret dan berselancar di internet. Mencari dan mempelajari hal yang baru adalah suatu yang sangat disukainya dalam mengisi waktu.

Share this

---

Previous
Next Post »

Terimakasih buat rekan-rekan yang telah meluangkan waktu untuk memberi komentar.
Tapi maaf, saya moderasi terlebih dahulu, untuk menghindari spam