BLOG URANG SUNDA: Tampilkan Kotak Komentar Facebook di Dalam Tab Pada Blog

Cara menampilkan kotak komentar facebook di dalam tab pada blogger itulah yang akan saya bahas pada malam hari ini (Sabtu, 10 Maret 2012). Setelah saya posting pada artikel sebelumnya adalah cara membuat kotak komentar facebook di blog. Nah jika sobat sudah menggunakan tutorial sebelumnya sebaiknya sobat hapus dulu kotak komentar facebook pada blog yang sebelumnya, dengan cara mengunjungi postingan sebelumnya yaitu memasang kotak komentar facebook pada blog dan mencari kode di Edit HTML kemudian hapus, kenapa kita harus melihat postingan sebelumnya karena menjaga agar sobat tidak salah hapus kode dan mencocokan kode sebelum sobat hapus, karena dengan menggunakan tutorial cara menampilkan kotak komentar facebook di dalam tab pada bloger ini di mulai dari awal lagi dan mencegah kode ganda itu maksud yang lebih jelasnya. Mudah-mudahan sobat bisa mengikuti apa yang saya bicarakan, nah bagi sobat yang belum menggunakan tutorial sebelumnya yaitu cara membuat kotak komentar facebook pada blog sobat langsungsaja ke tutorial ini dan hiraukan perkataan saya tadi.

Sobat pasti lihatkan gambar di atas? nah nanti tampilan kotak komentar facebook di dalam tab blog seperti itu, yang saya kasih panah dan nomor 1 berwarna merah itu tab kotak komentar facebook dan yang saya kasih panah dan nomor 2 berwarna biru itu adalah tab kotak komentar blogger-nya.

Oke langsung saja kita ke pembahasannya dan cara pemasangannya, sebelumnya saya perkenalkan postingan yang mengait dengan facebook ini:

Mungkin sobat berniat untuk melihatnya. Dan berikan jempol sobat untuk blog saya di bawah ini.

Kotak Komentar Facebook di Dalam Tab?

Ikuti langkah demi langkah berikut ini jika benar maka berhasil pula pemasangannya. Sobat harus punya ID Facebook Aplikasi terlebih dahulu jika belum mempunyainya sobat bisa melihat cara mendapatkannya di postingan sebelumnya cara membuat kotak komentar facebook pada blogger untuk melihat bagaimana mendapatkan ID Aplikasi Facebook.

Setelah sobat mendapatkan ID app facebook-nya sobat masuk ke akun blogger sobat
Dari Dasbor klik Rancangan dan klik Edit HTML
Backup template
Centang kotak kecil 'Expand Template Widget'
Cari kode <head> dan tepat di bawah kode itu sobat simpan kode di bawah ini.

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='Blog LOGO Image Link' property='og:image'/>
<meta content='FACEBOOK APP ID' property='fb:app_id'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<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>

Lihat kode yang saya blok warna kuning ganti Blog LOGO Image Link dengan URL gambar atau logo blog sobat, ukuran logo blog sobat harus kecil antara 30px ke 30px jika ingin hasil gambar yang sempurna, jika tidak ingin menggunakannya hapus semua kode yang saya blok kuning.

Berikutnya lihat kode FACEBOOK APP ID masukan App ID facebook sobat yang telah tadi sobat dapatkan.

Sekarang cari kode <html dan ganti dengan kode berikut

<html xmlns:fb='http://www.facebook.com/2008/fbml' Catatan: beri spasi setelah kode tersebut.

Cari lagi kode ]]></b:skin> dan di atasnya paste kode CSS di bawah ini.

/*--- Tabbed Facebook Comments Blog Urang Sunda ----*/
.comments-page { background-color: #f2f2f2; width:450px;}
#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;}

- untuk mengubah background cukup sobat ganti kode ini #f2f2f2
- untuk mengganti lebar sobat ganti kode berikut 450px

Dan masih harus anda cari kode berikut.

<div class='comments' id='comments'>

Masukan kode di bawah ini tepat setelah kode di atas

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01-MG3QcrgxIHk4MlwdIfp7SNBKq346tdWQeSa_G693A3eryc0uJZaWk9HBDFKjlyxOEhx9Zge2rbxtZa_HGtlPgwnuBD0gHU9X92ta5VjXLEz4AX3sOYgFodj17y3CAdhLVzLRszk90/s400/fbcomment.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 colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='450'/> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments Post by
<b><a href='http://theant-budiana.blogspot.com/2012/03/tampilkan-kotak-komentar-facebook-di.html' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blog Urang Sunda</a></b>
</div>
</b:if>
</div>

Kemudian klik pertinjau jika kode di tolak sobat hapus kode berikut <div class='clear'/> </div> pada kode di atas

Ganti tulisan Comments sesuai dengan keinginan sobat

Dan ganti kode Width='450' dan Width='440' sesuai dengan lebar yang tadi sobat tentukan pada kode CSS di atas dan ingat antara kode Width='450' dan Width='440' harus dikurang 10 atas 450 maka yang bawahnya bawah 440

Simpan dan selesai sudah

Lihat blog sobat untuk melihat tampilan kotak komentar seperti pada blog saya di bawah ini dan jangan lupa tinggalkan koementar sobat.

Bagaimana Menghilangkan Atau Menghapus Komentar Spam Pada Kotak Komentar Facebook?

Nah untuk yangsatu ini sobat tentu bisa menghapus komentar yang di anggap spam pada kotak komentar facebook dengan cara Login ke akun facebook dan kunjungi halaman berikut.

Facebook/tools/Comments berikut URL-nya
http://developers.facebook.com/tools/comments

Sobat bisa memoderasi semua komentar sekaligus tanpa mengunjungi setiap posting di blog sobat dan moderating komentar individual untuk semua kiriman.

Mudah-mudahan sobat menikmati postingan ini jika anda merasa jenuh dengan postingan ini sobat bisa lihat postingan saya yang satu ini Cara membuat kumpulan label pada blog menjadi indah dan sambil dengerlagu agar online sobat lebih berwarna disini dengerin lagu online gratis Terimakasih atas kunjungannya. Cantumkan sumber laman jika sobat ingin mencantumkan Postingan ini di Blog sobat trimakasih.

Theant Budiana

About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya

Kindly Bookmark this Post using your favorite Bookmarking service:

warning

Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.

2 comments:

zewDsignet™ on April 21, 2012 at 11:40 AM said...: bang bisa di perjelas yang BLOG LOGO IMAGE LINK ..
itu maksudnya gmna saya kurang paham
Unknown on April 21, 2012 at 3:22 PM said...: @lunatic'Art : ohh yang itu, maf sob kalo postingan kurang jelas... maksud dari 'blog logo image link' itu link dari gambar logo blog sobat, jadi logo blog yang sobat buat upload ke hosting gratis, setelah itu ambil link dari gambar logo tersebut dengan klik kanan pada gambar logo blog sobat yang telah di upload 'salin url gambar'. jika sobat gak punya gambar logo blog sobat, sobat bisa menghapusnya semua kode yang saya blok kuning. gimana sobat bisa mengikutinya? trimakasih mau menanyakannya.