membuat komentar facebook dan blohg berdampingan

Pagi yang cerah ini Admin ingin menjawab permintaan dari sahabat mengenai bagaimana menampilakan komentar di Facebook pada halama blog Admin contohnya seperti gambar di bawah ini.
ok langsung aja Admin buat tahapannya ;


Tahap Pertama ; Persiapan
1. Sobat masuk ke halamn blog sobat dengan menclik Login
2. berikutnya clik edit HTML

Tahap Kedua ; Input kode
1. setelah sobat masuk ke halaman html sobat cari ]]></b:skin> untuk lebih mudahnnya dengan menekan tombol CTRL + F
2. setelah dapat copykan kode di bawah ini tepat diatas ]]></b:skin>

.comments-page { background-color: #f2f2f2;}
    #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;} 

3. kalau sudah selesai, lanjutkan dengan mencari </head>
4. kalau sudah copy code di bawah ini diatas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='1078282812365' property='fb:admins'/>
    <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>

keterangan ;
warna Merah adalah ID FB sobat  107828212365 kalau belum tau baca caranya melihat ID facebook

5.  kemudian cari kode <div class='comments' id='comments'>6.  copykan kode di bawah ini tepat di bawah <div class='comments' id='comments'>
     kalau di blog Admin ada 2, terserah sobat mau copy di keduanya seperti yang Admin lakukan.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </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='2' width='400'/>
    </b:if>
    </div>

7.  Nah selesai dech ... (tapi perview dulu sob)

Tahap Ketiga ; Selesai
1. Simpan

Nah mungkin ini bisa bermanfaat bagi sobat, dan ini sudah Admin praktekan seperti yang sobat lihat di halaman Admin ini.