Wednesday, May 15, 2013

Cara Membuat Komentar Facebook di Blog

Cara membuat komentar facebook di blog. Kotak Komentar facebook bersebelahan dengan komentar blogger, dibawah posting blogspot. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

cara membuat komentar facebook di blog


Membuat aplikasi facebook untuk dihubungkan ke blog

  1. Pertama masuk ke facebook dan Kunjungi https://developers.facebook.com/apps
  2. Klik register now dan isi dengan nomor telepon kalian, ini diperlukan untuk menerima kode konfirmasi dari facebook untuk membuat aplikasi.
  3. cara membuat kotak komentar facebook
  4. Selanjutnya masukan kode konfirmasi dari facebook di hanphone kamu. Ada 6 kode yang akan dikirm oleh facebook.
  5. cara membuat komentar facebook di blog
  6. Setelah memasukan kode konfirmasi, maka akan ke terbuka Tell us About You, Langsung Klik lanjutkan saja. Langkah terakhir klik Done.
  7. cara membuat facebook comment
  8. Setelah selesai melakukan registrasi. Dari halaman yang sama klik Buat Aplikasi.
  9. cara membuat komentar facebook di blog
  10. Masukan nama blog kamu, dan lanjutkan pembuatan aplikasi.
  11. cara membuat komentar facebook di blog
  12. Setelah selesai. Catat Aplikasi ID facebook kamu. Yang diberi tanda kotak itu Aplikasi ID facebook.
  13. membuat kotak komentar facebook di blog
  14. Pada bagian Sanbox Mode, pilih Aktif.  Selesai.
Aplikasi ID facebook diperlukan untuk menghubungkan facebook ke blogspot. Sekarang kita buat kotak komentar facebook dibawah posting blog. Ikuti langkah-langkah dibawah ini.

 Membuat Kotak Komentar facebook di Blog

  1. Login ke blogger.com dan dari halaman dasboard pilij pengaturan template.
  2. Klik edit HTML dan cari kode ]]></b:skin> lalu letakan kode berikut diatas ]]></b:skin>
  3. .comments-page { background-color: #ffffff;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px;
    cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}
  4. Selanjutnya cari kode <head> dan letakan kode berikut dibawah <head>
  5. <meta property="fb:admins" content="fandra.juani"/>
    <meta property="fb:app_id" content="242989185843688"/>
  6. Ganti fandra.juani dengan Profil FB Kamu. Caranya buka fb kamu dan klik profil dan lihat bagian address URL ambil yang bagian nama saja.
  7. Ganti 242989185843688 dengan Aplikasi ID yang kamu buat tadi.
  8. Setelah itu cari kode </head> lalu letakkan kode berikut ini diatasnya.
  9. <script src='https://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) {
    $(".comments-tab").addClass("inactive-select-tab");
    $(selectTab).removeClass("inactive-select-tab");
    $(".comments-page").hide();
    $(selectTab + "-page").show();
    }
    </script>
  10. Berikutnya cari kode <div class='comments' id='comments'> dan pasang kode berikut ini dibawahnya. Ada 2 kode yang sama dengan <div class='comments' id='comments'> pasang kedua-duanya.
  11. <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Komentar dari Facebook'>
    <img class='comments-tab-icon' src='https://s-static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Facebook
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Komentar dari Blogger'>
    <img class='comments-tab-icon' src='https://lh5.googleusercontent.com/--vu5gE3yh1E/UA333Ytm5hI/AAAAAAAAAnM/nbi9p0of21o/h120/favicon.ico'/> <data:post.numComments/> Blogger
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='10' width='auto' height='400'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>
  12. Keterangan: num_posts='10'jumlah komentar dan tinggi komentar height='400'/> ganti dengan yang kalian inginkan. Selesai.
Sekarang kotak komentar sudah ada di blog kamu. Jika ada pesan warning http/alamat-blog-kamu.blogspot.com unreachable. Itu tandanya blog belum terhubung dengan facebook dengan baik. Cara menghilangkannya, Ikuti langkah dibawah ini.
menghilangkan warning unreachable

Menghilangkan Tulisan warning http/alamat-blog-kamu.blogspot unreachable.

  1. Edit HTML dan cari kode <html dan tambahkan kode ini disamping <html
  2. xmlns:fb='http://ogp.me/ns/fb#'
  3. Contoh:
  4. <html xmlns:fb='http://ogp.me/ns/fb#' expr:dir='data:blog…………..2005/gml/expr' >
  5. Save Template, Selesai.
Tulisan warning unreachable tidak muncul lagi di kotak komentar facebook. Biasanya untuk entri baru yang dipublikasikan, tulisan tersebut akan kembali muncul, untuk menghilangkannya, klik tulisan warning unreachable itu dan masuk dengan akun facebook kamu, selanjutnya reload halaman artikel yang baru di publikasikan tadi. Maka tulisan warning unreachable akan hilang.

Sekarang coba lihat di bagian laman blog kamu. Jika lambang blogger dan facebook tab terlihat juga di laman bawah header. untuk menghilangkannya.
  1. Tambahkan kode <b:if cond='data:blog.pageType == "item"'> di atas kode <div class='comments' id='comments'>
  2. Dan tambahkan kode </b:if> diatas <div class='comments-page' id='fb-comments-page'>
  3. Masing2 ada 2 kode yang sama, masukan kedua2nya.
Satu kekurangan dari komentar facebook ini. Tidak adanya notification jika ada yang berkomentar. Maka untuk melihat komentar facebook yang masuk ke blog kita. Kita harus melihatnya secara manual, dengan cara membuka salah satu artikel dan mengklik pada bagian Moderat View, lalu klik pada pengaturan Moderate application comments, maka akan terbuka halaman baru dari facebook, dan akan terlihat pesan2 yang masuk ke blog kita.
cara membuat komentar facebook diblog

Selesai sudah cara membuat facebook di blog, yang letaknya bersebelahan dengan kotak komentar blog. Jika kamu melalukan cara diatas dengan teliti, Insyaallah bisa. Silahkan baca juga cara  membuat tombol share di blog yang terletak dibawah posting blog. dan juga cara membuat facebook box like di blog. Semoga Bermanfaat.
Share:

0 comments:

Post a Comment

BTemplates.com

Powered by Blogger.