April 9, 2013

Menampilkan Komentar Facebook Berdampingan Di Blog

Selamat pagi sob...

Gimana kabarnya hari ini ??? Semoga baik-baik saja yah...



Ok, langsung aja sob, kali ini saya mau share bagaimana cara menampilkan komentar facebook berdampingan dengan komentar blogger. Saya pikir, cara ini cukup menarik karena selain menggunakan akun google, wordpress, live journal, dan lain sebagainya yang biasa digunakan untuk memberikan komentar di artikel sebuah blog, maka dengan menerapkan cara ini, pengunjung yang tidak memiliki akun-akun tersebut pun bisa memberikan komentarnya dengan menggunakan akun facebook mereka.

Begini caranya sob :

1. Login ke blogger.


2. Pilih Template - Edit HTML dan centang "Expand Template Widget".


3. Letakkan kode dibawah ini dibawah kode <div class='comments' id='comments'> .

<div class='commblogfb-tab' id='fb-comments' onclick='javascript:
commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
 <img class='commblogfb-tab-icon' src='http://1.bp.blogspot.com/-pfdCr67N0vY/URV01_6rbJI/AAAAAAAACVg/n_vDeB55BIE/s000/facebook.png'/> <fb:comments-count expr:href='data:post.url'/>
Facebook&#39;s Comments  </div>  <div class='commblogfb-tab inactive-select-tab'
id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);'
title='Add Comments via Blogger'> <img class='commblogfb-tab-icon'
src='http://4.bp.blogspot.com/-DG0bPhhycRU/URV03kQ819I/AAAAAAAACV0/PPkxhtfMJZI/s000/rss.png'/>
<data:post.numComments/> Blogger&#39;s Comments  </div><div class='clear'/>
 </div>  <div class='commblogfb-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='2' width='500px'/>
    </b:if>     </div>     <div class='comments commblogfb-page' id='blogger-comments-page'>     <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID FACEBOOK ANDA' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(&quot;.commblogfb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
    $(selectTab).removeClass(&quot;inactive-select-tab&quot;);
    $(&quot;.commblogfb-page&quot;).hide();
    $(selectTab + &quot;-page&quot;).show();
    }
 </script><style type='text/css'>.commblogfb-page, .commblogfb-tab
{color:#3F3937;float:left;padding:5px;margin-right:5px;margin-left:5px;
cursor:pointer;font-weight:bold;background-color:#f2f2f2;border-radius:5px 5px 0
0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;position:relative;z-index:10;
box-shadow:0 -1px 2px #666;-moz-box-shadow:0 -1px 2px #666;-webkit-box-shadow:0 -1px 2px #666;
background-image:linear-gradient(#fff,#f2f2f2);background-image:-moz-linear-gradient(#fff,#f2f2f2);
background-image:-webkit-linear-gradient(#fff,#f2f2f2)}.commblogfb-page {background:
rgba(255,255,255,.4);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}
.commblogfb-tab {background-color:#6196DB;background-image:linear-gradient(#6196DB,#9FBFE9);
background-image:-moz-linear-gradient(#6196DB,#9FBFE9);background-image:-webkit-linear-gradient
(#6196DB,#9FBFE9)}.commblogfb-tab-icon {height:14px;width:auto;margin:0 3px}.commblogfb-tab:hover
{background-color:#9FBFE9;background-image:linear-gradient(#9FBFE9,#9FBFE9);background-image:-moz-linear-gradient(#9FBFE9,#9FBFE9);background-image:-webkit-linear-gradient(#9FBFE9,#9FBFE9)}.inactive-select-tab {background:rgba(background-color:#e2e2e2;background-image:linear-gradient(#f4f4f4,#DDD);background-image:-moz-linear-gradient(#f4f4f4,#DDD);background-image:-webkit-linear-gradient(#f4f4f4,#DDD)}.inactive-select-tab,
.commblogfb-tab:hover {background-color:#3b5998;background-image:linear-gradient(#6b89d8,#3b5998);
background-image:-moz-linear-gradient(#6b89d8,#3b5998);background-image:-webkit-linear-gradient
(#6b89d8,#3b5998)}</style> 

4. Pratinjau, dan apabila tidak ada masalah maka Simpan Template.

5. Enjoy.


*Keterangan : Ganti ID FACEBOOK ANDA dengan id facebook milik anda sendiri (http://facebook.com/INI ID ANDA)

Gimana sob??? Berhasil tidak mempraktekkan cara diatas???

Semoga bermanfaat yah dan jangan lupa tinggalkan komentar di kotak komentar dibawah....

30 comments

  1. wah keren ni, terimakasih banyak sudah berbagi

    ReplyDelete
  2. keren gan. makasih infonya. ditunggu kunjungan baliknya gan

    ReplyDelete
  3. pengaruh ke loading gimana njeh?

    ReplyDelete
    Replies
    1. relatif gan, coba cek berat blognya sebelum dan sesudah menggunakannya...

      Delete
  4. wah berhasil mbak, sangat superbbb :D hehhe :-bd kunjungi blog ku mbak www.habiball.blogspot.com :D

    ReplyDelete
  5. Simple, Singkat, Padat....Terpercaya...(he he he)
    kalau yang lain harus letakkan dbawah ini, dan dbawah itu..
    trmkzih....
    Kalau sempat kunjungi blog saya ya..kalau ga sempat gpp ga usah dikunjungi...mampir aja sudah ke www.46english.blogspot.com
    (sm aja dg maksa aku ini?)
    Hehe he he he....!!!!!!!!!!

    ReplyDelete
    Replies
    1. :D :D :D ok :-bd gan blogwalking emang bagian dari rutinitas dalam ngeblog...

      Delete
    2. Oiya...trus kalau mau lihat ada komen lewat pesbuk gmn ya cara mengetahuinya?Trmkasih lagi...!!!!jgn bosen2 ya?

      Delete
    3. klik di tab "facebook's comments" gan...

      Delete
    4. Maksud saya gini...misalkan kita punya 9.346 posting..(wow banyak skali postingnya...Ngarang lo...punyanya sndiri cuma 13 posting)
      he hee he..
      ya anggaplah sgitu..bagaimana kita mengetahui kalau ada komen di masing-masing posting...?apakah semua komen jadi satu spt komen di blogger?
      Mohon bimbingannya...!!!trmkasih..smoga dapat pahala...
      Amiiiin..!!!!!!!!!!!!!!!!!!

      Delete
    5. :'( maaf ya kalo jawaban nya kurang memuaskan karena saya juga belum pernah menggunakan model komentar seperti ini di blog saya, tapi melihat kita memasukkan ID facebook, kemungkinan akan ketahuan kalau kita login di facebook,tp cara yg paling pasti cek setiap postingan satu per satu, masalahnya kalau postingannya banyak, ga kehitungan deh... **p

      Delete
  6. makasih infonya, langsung di coba yah :)

    ReplyDelete
  7. pleased oke gan thanks...komentar balik y
    http://fajar-pkp.blogspot.com/

    ReplyDelete
  8. Nice Tips . Membantu blogger baru seperti saya hehehe
    http://3pledoubleyou.blogspot.com/

    ReplyDelete
  9. Banyak orang nulis artikel tutorial tapi diblog nya sendiri ngga dipasang apa yang di tulis.....

    Ada contoh demo nya ga gan yang dah agan pasang ????
    masih work ga neh ???

    ReplyDelete
  10. kunjungan balik ya ke krizkypermadibdl.blogspot.com

    ReplyDelete
  11. wiihhhhh hebat banget nih, ijin praktek ya .hhe

    ReplyDelete
  12. berhasil nih,,, tapi kok agak berat ya...
    mampir ya ke ulwannn.blogspot.com

    ReplyDelete