Cara Membuat Komentar Facebook dan Blog bersebelahan

Membuat kotak komentar di blog dengan varian lebih banyak bisa membuat blog kita lebih menarik. Pada kali ini, saya akan membahas tentang cara membuat Komentar Facebook dan Blog bersebelahan. Wah, kalau begitu, blog bisa menjadi lebih menarik… tentu saja.

• pertama, masuk ke dashboard –> Template –> Edit Template.
• Centang Expand Template Widget jika perlu. Cari kode <div class='comments' id='comments'>
• Jika anda menemukan 2 kode <div class='comments' id='comments'> , letakkan script dibawah ini di bawah kode kedua.

<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://picturestack.com/782/578/wAVakauttaCJP.png'/>
    <fb:comments-count expr:href='data:post.url'/> Komentar Facebook
    </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://picturestack.com/782/260/56xakauttaZrS.png'/> <data:post.numComments/> Komentar Blogger
    </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='10' width='520px'/>
    </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>

• Untuk tulisan berwarna hijau, dapat anda isi dengan ID Facebook/FB Fanpage milik anda. ID biasanya berupa angka.
• Untuk kode berwarna merah, itu menunjukkan jumlah komentar yang di tampilkan. Sedangkan yang kuning, adalah lebar kotak komentar yang dapat anda sesuaikan.
• Save dan lihat hasilnya.

Terimakasih sudah berkunjung. Salam pengetahuan yang menginspirasi.