Pada kesempatan kali ini saya akan memberikan beberapa tutorial tentang bagaimana cara mudah memasang kotak komentar facebook dan blog berdampingan. tidak semua orang awam mempunyai akun blog tapi tidak dengan facebook, bahkan kalangan anak-anak, remaja, dan orang tuapun mempunyai akun facebook. nah, ini memberikan kesempatan bagi orang yang tidak mempunyai akun blogger dapat juga berkomentar diblog kita. bila sobat sekalian tertarik untuk memasang kotak komentar facebook dan blog berdampingan silahkan simak artikel ini.
Memasang kolom komentar facebook di blog ternyata sangat membantu. Bukan cuma untuk pengunjung blog, tapi juga bagi pemilik blog itu sendiri. Tapi ada masalah lain ketika kolom tersebut dipasang berurutan (bawah atas) dengan kolom komentar bawaan blogger. Memakan ruang yang mengakibatkan halaman blog berambah panjang.
Ada trik sederhana agar kolom komentar facebook tampil di blog, tapi tidak memakan banyak tempat, karena diletakkan berdampingan dengan kolom komentar bawaan blogger.
Untuk memasang kolom komentar facebook dan blogger berdampingan, yang harus dipersiapkan yaitu, ID aplikasi facebook. Bagi yang belum mempunyai ID aplikasi bisa mendapatkannya dengan mengikuti cara yang saya tulis DISINI (klik langsung untuk melihat).
Sekarang kita langsung pada cara memasangnya :
1-Login ke akun blogger
2-Pilih blog yang ingin dipasang komentar facebook
3-Klik Template dan lanjutkan..
4-Edit HTML dan jangan lupa untuk centang Expand Widget Templates.
5-Cari kode ]]></b:skin>
(tekan F3 untuk mempermudah pencarian kode HTML nya)
6-Letakkan kode berikut ini diatas kode ]]></b:skin>
.
masukkan kode ini dibawah kode <head>, kalau saya sendiri meletakkannya dibagian paling bawah meta. Berikut kode yang harus dipasang.
8-Cari kode </head>
, lalu letakkan kode berikut ini diatasnya
10-Letakkan kode berikut ini dibawah dua kode <div class='comments' id='comments'>. (Pasang dibawah kode <div class='comments' id='comments'> yang pertama dan kedua)
11. Setelah itu simpan template.
Memasang kolom komentar facebook di blog ternyata sangat membantu. Bukan cuma untuk pengunjung blog, tapi juga bagi pemilik blog itu sendiri. Tapi ada masalah lain ketika kolom tersebut dipasang berurutan (bawah atas) dengan kolom komentar bawaan blogger. Memakan ruang yang mengakibatkan halaman blog berambah panjang.
Ada trik sederhana agar kolom komentar facebook tampil di blog, tapi tidak memakan banyak tempat, karena diletakkan berdampingan dengan kolom komentar bawaan blogger.
Untuk memasang kolom komentar facebook dan blogger berdampingan, yang harus dipersiapkan yaitu, ID aplikasi facebook. Bagi yang belum mempunyai ID aplikasi bisa mendapatkannya dengan mengikuti cara yang saya tulis DISINI (klik langsung untuk melihat).
Sekarang kita langsung pada cara memasangnya :
1-Login ke akun blogger
2-Pilih blog yang ingin dipasang komentar facebook
3-Klik Template dan lanjutkan..
4-Edit HTML dan jangan lupa untuk centang Expand Widget Templates.
5-Cari kode ]]></b:skin>
(tekan F3 untuk mempermudah pencarian kode HTML nya)
6-Letakkan kode berikut ini diatas kode ]]></b:skin>
.
.comments-page { background-color: #f2f2f2;}7-Lalu cari kode <head>
#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;}
masukkan kode ini dibawah kode <head>, kalau saya sendiri meletakkannya dibagian paling bawah meta. Berikut kode yang harus dipasang.
<meta property="fb:admins" content="ID Facebook"/>Ganti yang berwarna biru dengan ID facebook dan App ID facebook sobat sekalian.
<meta property="fb:app_id" content="App ID"/>
8-Cari kode </head>
, lalu letakkan kode berikut ini diatasnya
<script src='https://connect.facebook.net/en_US/all.js#xfbml=1'/>9-Lanjutkan dengan mencari kode <div class='comments' id='comments'>. Biasanya didalam template akan terdapat dua kode <div class='comments' id='comments'>.
<script src='http://code.jquery.com/jquery-latest.js'/>
<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>
10-Letakkan kode berikut ini dibawah dua kode <div class='comments' id='comments'>. (Pasang dibawah kode <div class='comments' id='comments'> yang pertama dan kedua)
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>Angka 2 menunjukkan jumlah komentar yang tampil, sedangkan angka 400 menunjukkan ukuran lebar kolom komentar facebook. Ganti atau sesuaikan dengan keinginan sobat.
<img class='comments-tab-icon' src='https://s-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='https://lh5.googleusercontent.com/--vu5gE3yh1E/UA333Ytm5hI/AAAAAAAAAnM/nbi9p0of21o/h120/favicon.ico'/> <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='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
11. Setelah itu simpan template.
Anda baru saja membaca artikel yang berkategori Tutorial Blog
dengan judul Cara Mudah Memasang Komentar Facebook Dan Blogger Berdampingan. Anda bisa bookmark halaman ini dengan URL http://zulbook.blogspot.com/2013/05/cara-mudah-memasang-komentar-facebook.html. Terima kasih!
Ditulis oleh:
Unknown - Wednesday 22 May 2013
Belum ada komentar untuk "Cara Mudah Memasang Komentar Facebook Dan Blogger Berdampingan"
Post a Comment