Cara Membuat Komentar Facebook di Blog



 Cara Membuat Komentar Facebook di Blog - Pada tahun 2009 diperkenalkan pengembang Facebook sosial plugin terbaik  mereka yang disebut "Kotak Komentar Facebook". Plugin ini dapat tertanam dalam setiap situs web atau blog dan pengunjung dapat menggunakan ID Facebook mereka, Yahoo, AOL atau Hotmail untuk memberikan komentar di situs anda. Plugin ini memang menunjukkan banyak masalah ketika tertanam dalam Blog Blogger di awal perkembangannya tapi sekarang berkat Max teman sesama blogger dari Allblogtools akhirnya plugin ini telah cocok untuk bekerja sempurna dengan host blog Blogger.




LIGHT SCHEME

DARK SCHEME


Anda tertarik? mari sekarang kita belajar bagaimana cara membuat kotak komentar facebook yang sangat berguna bagi blog. Mohon ikuti langkah-langkah sederhana dibawah ini,

1. Mendapatkan ID Aplikasi Facebook

1. Pergi ke Facebook Developers Page
2. Masukkan App Name dengan Nama Aplikasi dan App Namespace dengan judul blog anda (tidak wajib). Kemudian klik lanjutkan.


3. Setelah itu akan tampil seperti gambar dibawah ini kemudian simpan App ID nya di notepad. Sekarang mari kita lanjut ke langkah berikutnya dari tutorial ini.




2. Menambahkan Kotak Komentar Facebook ke Blog

Sekarang adalah saatnya untuk menambahkan kotak komentar di template blog anda. Jadi ikutilah langkah mudah berikut,
CATATAN: Pastikan blogger comments anda sudah terpasang di bawah postingan. Untuk caranya, pergi ke Blogger> Settings> Post and comments> lalu pilih embeded pada kategori komentar di bawah kategori post. Setelah melakukan hal ini ikuti tutorial di bawah ini.


  1. Pergi ke Blogger > Design > Edit HTML
  2. Simpan terlebih dahulu template anda
  3. Centang kotak "Expand Widget Templates
  4. Carilah <html dan setelah itu berikan ruang di depan kode untuk menambahkan kode berikut,
    xmlns:fb='http://www.facebook.com/2008/fbml'  
     
  5. Kemudian cari
    <body>

    Catatan: dalam rancangan template blogger yang baru akan terlihat kode seperti dibawah ini
     

    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
    Paste kode berikut di bawah salah satu kode diatas
     <div id='fb-root'/>
    <script>
        window.fbAsyncInit = function() {
        FB.init({
          appId  : &#39;YOUR_APP_ID&#39;,
          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 YOUR_APP_ID dengan ID aplikasi Facebook anda yang telah anda simpan di notepad. 

     
  6. Setelah itu cari kode </head> dan diatasnya letakkan kode berikut,
    <meta expr:content='data:blog.pageTitle' property='og:title'/>
    <meta expr:content='data:blog.url' property='og:url'/>
    <meta content='Personal Blog - Info MenARIk' property='og:site_name'/>
    <meta content='YOUR_APP_ID ' property='fb:app_id'/>
    <meta content='http://www.facebook.com/ulasanmenarik' property='fb:admins'/>
    <meta content='article' property='og:type'/>
    Perubahan :

    • Ganti Personal Blog - Info MenARIk dengan Judul Blog anda
    • Ganti YOUR_APP_ID dengan ID Aplikasi Facebook  yang anda simpan di notepad
    • Ganti  http://www.facebook.com/ulasanmenarik dengan link profil facebook anda
     
  7. Sekarang carilah kode berikut,
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
    <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div> </b:if>

    • Jika anda ingin menggunakan dark scheme silahkan ganti light dengan dark
    • Untuk mengubah ukuran kotak komentar, ganti angka berikut width='520'
    • Untuk mengubah ukuran footer, ganti angka berikut width:510px
    • Beri selisih 10 pixel antara ukuran kotak dan ukuran footer. Misalnya jika anda mengatur ukuran kotak width = '600 ' maka ukuran footernya width: 590px
     
    PEMECAHAN MALASAH

    Jika Anda menghadapi masalah apapun maka silakan jangan ragu untuk memberi tahu saya. Saya akan merasa senang untuk melayani anda. Saya akan menulis tutorial lebih lanjut tentang topik ini sehingga anda bisa mendapatkan semua update terbaru. Saya berharap plugin ini terbukti berguna untuk sebagian besar dari anda dan memberkati blog anda dengan trafik yang signifikan . Peace! :)

    13 Responses to "Cara Membuat Komentar Facebook di Blog"

    1. mksh gan info'x sangat bermanfaat sekali...
      sukses terus buat blognya. . .

      BalasHapus
    2. terimakasih informasinya... sangat membantu sekali

      BalasHapus
    3. informasi sangat bermanfaat, boleh singgah di tempat saya :)

      BalasHapus
    4. bos ini komentar blog nya bakal hilang tidak.?

      BalasHapus
    5. Saya ga berhasil bikinya lho,, saya ga mudeng pada hal CATATAN dan langkah no 3

      BalasHapus
    6. terima kasih ya kk atas inforasinya, melody sangat terbantu sekali atas artikel kakak , jangan lupa mampir di blog melody ya kk http://memolodys.blogspot.com/2013/08/cara-booting-shutdown-komputer-cepat.html

      BalasHapus
    7. Uis kerenn thanks browwww . .

      kunjungin juga yaww

      Tutorialnya lengkap di sini sob

      http://tutorialimparare.blogspot.com/

      BalasHapus
    8. Terimakasih ulasannya. sangat menarik sekali..

      BalasHapus
    9. Nice post! Can't wait for the next one. Keep stuff like this coming
      Contoh soal psikotes, Cara membuat blog, Tes iq online, dan Obat herbal.

      BalasHapus
    10. Thakyou gan, infonya bermanfaat sekali...

      BalasHapus
    11. Sangat membantu gan infonya buat saya pribadi. terimakasih sebelumnya ya gan sudah share artikel ini.

      BalasHapus
    12. Sdh aku pasang di blog aku dan langsung berhasil, silahkan di cek dan jgn lupa komentarnya ya teman-teman, klik disini > http://fifisurabaya.blogspot.com/2014/12/3-cara-mengembalikan-kesuburan-rambut.html

      BalasHapus

    Berkomentarlah dengan sopan, seperti :
    - Memberi saran
    - Memberi tanggapan

    Yang berguna demi kemajuan blog ini, terima kasih ^^