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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC14x7IrsCCRlgeMVFzVW60CpYMTJ8eimpOp7oDouFa6Jy2kznt9MlJHtD9JnwVoOTvO4_rNqLhUPaidiBDz3X_tx3_5912iQ3HLh_FNwXRgjOGZTo5ne3eN2-nd-TJtMt9f-AUTY7mVMB/s0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4flxMuleYKSTNeEP1N9sDLpmJavHsQHLFoeE55fzQWFFPogOeKgAiWuQdiJkXhYFgyVHrfLiCJaivCK9oZKE61FawilKHlMby3Gh8keTh6TCelVa7r0U3WZXJ4GB289BH49uxLeOarCog/s0/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....