Cara Membuat Facebook comment atau Komentar facebook pada blog ~ SOFtwareTEKnologi Go 2 Blog Tutorial

Cara Membuat Facebook comment atau Komentar facebook pada halaman web atau blog, banyak sekali sekarang orang yang membuat sebuah form komentar facebook pada halaman web atau blog yang mereka miliki sehingga pengunjung blog tersebut dapat berkomentar melalui akun facebook mereka.
Tentunya selain bermanfaat juga dapat mempercantik halaman web atau blog yang kita miliki. Anda berminat melakukannya? lakukan langkah-langkah berikut ini:

1. Login ke account blogger Anda
2. Klik rancangan lalu klik Edit HTML
3. Selalu Download template anda terlebih dulu untuk berjaga-jaga jika terjadi kesalahan, sebagai sebuah backup anda
4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
5. Lalu anda dapat mencari script berikut (Sorot & Copy Script ini) ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian, akan mucul disebelah kiri bawah browser anda), dan paste ke kolom isian Find

6. Sorot script dibawah ini dan copas, lalu letakkan script tersebut diatas script ]]></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;}

7. Kemudian anda cari kode </head> , setelah itu anda sorot script dibawah ini, lalu copas dan letakkan 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='ID FACEBOOK ANDA' 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>

Id Facebook anda, bila anda memiliki sebuah akun facebook tentu anda telah memiliki URL facebook anda.
Contoh lihat gambar berikut:

Untuk lebih mudahnya buka facebook anda, lihat pada profil anda kemudian lihat URL pada browser anda maka copas URL tersebut. Pada contoh gambar saya ambil id FB Softekgoblogtutorialblogspot (Ini adalah ID facebook saya )

<meta content='ID FACEBOOK ANDA' property='fb:admins'/>

8. Kemudian cari kode <div class='comments' id='comments'> kemudian anda sorot dan copas script berikut dibawah ini. Lalu letakkan script tersebut tepat dibawah <div class='comments' id='comments'>

Perhatian Script <div class='comments' id='comments'> pada template terdapat dua bagian.

Untuk lebih mudahnya CTRL + F , kemudian copas <div class='comments' id='comments'> pada kolom isian. Tekan tombol Next dan Next maka anda akan menemukan dua <div class='comments' id='comments'> ( lihat gambar berikut )

Id Comment Pertama

Id Comment Kedua

letakkan script dibawah pada <div class='comments' id='comments'> ( Yang kedua ). Jangan letakkan <div class='comments' id='comments'> yang pertama.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 == "item"'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='50' width='500'/>
    </b:if>
    </div>

Perhatikan angka yang berwarna orange, num_post='50' adalah nilai jumlah komentator pada FB comment, width='500' adalah lebar kolom komen yang anda inginkan. ( Sebaiknya lebar kolom komen disesuaikan dengan lebar halaman anda)

Untuk mengetahui lebar halaman anda ( Dengan asumsi anda masih pada edit html ) lakukan CTRL+F masukan script #main-wrapper pada kolom isian. Akan tertera lebar halaman anda ( width:'500px' ), seperti halaman ini memiliki lebar 510px.

Oke sampai disini semoga anda berhasil mengimplementasikan widget ini pada blog anda. Semoga tulisan saya ini bermanfaat untuk anda semua...Terima kasih sudah berkunjung ke Blog kami..

Posted in: WidgetBlog