Thursday, December 19, 2013

Browse Manual » Wiring » » » » » » » Menampilkan Komentar Facebook Berdampingan Di Blog

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....

No comments:

Post a Comment