Tutorial Membuat Kotak Komentar Facebook dan Blog Berdampingan

Diposkan oleh Indra Wirawan on 1.31.2013


Get free daily email updates!

Follow us!

Membuat Kotak Komentar Facebook dan Blog Berdampingan-Tutorial ini saya share kepada Anda setelah saya aplikasikan tutorial ini di beberapa blog saya yang lain. Menurut saya penting saya share karena ini berguna. Ya, walaupun sudah banyak blogger lain telah membuat postingan sejenis dengan ini.

Membuat kotak komentar Facebook (FB) dan blog berdampingan adalah tutorial yang mudah. Saya mau bercerita sedikit tentang pentingnya kotak komentar facebook hadir di blog Anda. Semoga dengan cerita atau penjelasan saya dapat membuat Anda berpikir lagi untuk menambahkannya juga dalam blog Anda. Hehehe.

Kotak komentar facebook dalam blog adalah sebenarnya opsi dari sekian banyak opsi yang Anda dapat pilih dalam hal memperbaiki penampilan blog Anda atau bisa meningkatkan kunjungan blog Anda. Kalau saya pikir, dan sesuai dengan pengalaman pribadi, kotak komentar facebook yang terpasang pada sebuah blog dapat meningkatkan antusiasme, umpan balik pengunjung Anda terhadap topik yang Anda bahas pada blog Anda.

Kotak komentar ini akan terasa banyak sekali manfaatnya jika blog Anda termasuk blog yang berisi tentang materi konsultasi, tutorial, dan yang sejenisnya karena bukan tidak mungkin pengunjung blog Anda kurang mengerti atau ingin mengajukan pertanyaan terkait materi yang Anda posting di blog Anda. Berkomentar di kotak komentar facebook kelihatannya sangat mudah dan persentase umpan baliknya yang dilakukan oleh pengunjung blog Anda lebih tinggi daripada Anda sekedar memasang kotak komentar blog di blog Anda. Ini juga tidak lepas karena faktor, hampir semua orang yang on line (di Indonesia) juga membuka account facebook.

Terlebih lagi, saya kira share atau penyebaran materi yang Anda sampaikan dalam blog Anda semakin cepat, mudah dan luas tersebar dikarenakan selain menyediakan kotak komentar facebook, di sini juga tersedia fasilitas untuk "meng-like" komentar-komentar terpilih. Anda tahu sendirikan, kalau pengunjung blog Anda me-like artikel atau komentar tertentu dalam blog Anda maka secara tidak langsung link-link postingan Anda akan terposting dalam account facebook pengunjung blog. Anda mungkin bisa bayangkan berapa potensi pengunjung baru untuk blog Anda dengan memperhitungkan banyaknya yang berkomentar, memberikan like, dan kunjungan secara tidak langsung dari teman atau kenalan pengunjung blog Anda.

Okey, tanpa berteleh-teleh lagi. Berikut Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan :

1. Seperti biasa, Login ke account blogger Anda

2. Klik Rancangan lalu klik Edit HTML

3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan

4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget

5. Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian)

6. Kalau sudah dapat maka masukkan kode berikut ini di atas kode ]]></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;}

Catatan : 
Anda dapat mengubah warna tampilan kotak komentar Anda dengan mengutak-atik kode HTML di atas. Anda dapat mengubah warna backround sesuai dengan kehendak Anda.

7. Kemudian Anda cari kode </head>

8. Jika sudah dapat, masukkan kode berikut ini tepat 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 FB Anda disini' 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();
    }
Perhatikan tulisan yang berwarna merah di atas, ganti dengan ID facebook Anda, misalkan https://www.facebook.com/nama Anda, maka ID Anda berada pada tulisan yang berwana biru. 
9. Kemudian cari kode  <div class='comments' id='comments'>

Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode
<div class='comments' id='comments'> yang pertama dan kedua (tidak apa-apa, sejauh ini belum ada efek yang merugikan).

<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='500'/>
    </b:if>
    </div>

<span style='font-size: 85%'>Widget Comment <a href='http://bloggermahir.blogspot.com/2013/01/kotak-komentar-facebook-dan-blog-berdampingan.html' rel='follow' target='_blank'>FB-Blog </a></span>
    <div class='comments comments-page' id='blogger-comments-page'>



Perhatikan angka yang berwarna merah dan kuning diatas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Anda agar kelihatan rapi. Dan perhatikan pula kode yang berwarna merah, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu kode tersebut.

contoh :

<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='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div class='comments comments-page' id='blogger-comments-page'>
( hapus salah satu)


10. Kemudian klik save, dan lihat hasilnya.

Semoga berhasil dan Bermanfaat....!

Posted by : Mahir Blogger

Artikel Tutorial Membuat Kotak Komentar Facebook dan Blog Berdampingan diposting oleh Mahir Blogger pada 1.31.2013. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar. Jika diperlukan, Artikel ini bisa disebarluaskan melalui blog Anda, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terima kasih.
Comments
41 Comments
Widget Comment FB-Blog
Wibi Alwi Surya Kuncoro mengatakan... Reply Comment

Gan saya udah otak-atik scripnya tapi gak ada perubahan sama sekali, http://goresanpenatinta.blogspot.com tolong pencerahanya kirim ke email saya aja ya gan wibialwisuryakuncoro@yahoo.co.id
terima kasih gan

angun setpya mengatakan... Reply Comment

ini yang aku cari makasih kk :). .

Pedagang Ikan mengatakan... Reply Comment

makasih banyak.. informasi yang sangat berguna untukku

Belajar Ngeblog mengatakan... Reply Comment

informasi menarik.. akan kucoba sob..

Vista Nirmala mengatakan... Reply Comment

salam kenal ya mas..

Vista Nirmala mengatakan... Reply Comment

@angun setpya: bahagianya mendapatkan yang dicari ya..

Gubug Celeb mengatakan... Reply Comment

asukses mas makasih :)

prashopzz mengatakan... Reply Comment

thanks infonya gan....

Ifan_Kkage mengatakan... Reply Comment

gan, kode yang terakhir itu gak ada di blogku
<div class='comments' id='comments.....
gimana?
thanks

Artsoulinc mengatakan... Reply Comment

makasih infonya sob

Indra Wirawan mengatakan... Reply Comment

@Gubug Celeb: Okey, thanks

Indra Wirawan mengatakan... Reply Comment

@prashopzz: Sama-sama gan. Berbagi itu indah

Indra Wirawan mengatakan... Reply Comment

@Artsoulinc: Okey, sama-sama

Indra Wirawan mengatakan... Reply Comment

@Ifan_Kkage: Maksud tutorial saya di atas, itu pun kalau ada. Klo tdk ada, langsung saja cek, dengan klik pratinjau untuk melihat apakah tutorial ini berhasil Anda lakukan ...

pulsa murah jakarta mengatakan... Reply Comment

begitu ya sob caranya , ,terimakasih banget sudah berbagi pengetahuan bto . thanks

terjemahan lirik barat mengatakan... Reply Comment

tidak berhasil mas... template tidak bisa di parse

DB a.k.a Dilacious mengatakan... Reply Comment

gak bisa mas, error

Teh daun sirsak qorya mengatakan... Reply Comment

udah dicoba koq lum bisa yach...mohon pencerahannya dong :)

Indra Wirawan mengatakan... Reply Comment

@Teh daun sirsak qorya: di bagian mana tidak bisanya ? biasanya saya juga temukan ada template yang agak susah memang di costumize, atau kalau ada sudah buat fans page facebook juga itu berpengaruh....

Calvin Tarrapa mengatakan... Reply Comment

GUE BISA... HOREEEEEE....http://calvintarrapa.blogspot.com/2013/04/membuat-font-teracak-acak-di-photoshop.html
COBA AJA LIHAT DI TKP

How to increase alexa page rank use Alexa boostup mengatakan... Reply Comment

Sudah saya coba dan berhasil.. terimakasih gan

Herlina mengatakan... Reply Comment

terimakasih informasinya saya akan coba pasang

Heru Arya mengatakan... Reply Comment

Keren gan Artikelnya, mampir juga ya diblog gue ya http://heruarya.blogspot.com

agen pulsa nasional mengatakan... Reply Comment

patut dicoba nih, biar keren sama kaya blog agan... mampir krumah baruku gan

Eva Asnidah Purba mengatakan... Reply Comment

Terima kasih bop .. mantap.. langsung diaplikasikan di 3 blog
cara indonesia bangkit http://ib.ayobai.org
Indonesia Baru Afdol http://den.ayobai.org
Relawan Indonesia Berubah http://karib.ayobai.org

cuma untuk blog relawan agakk pengaruh dengan share fb nya yg ikut hilang.

terima kasih bop.. semoga sukses selalu

indexofgames mengatakan... Reply Comment

thx gan

Nabil Kautsar mengatakan... Reply Comment

kunjung balik ya.. keren nih tipsnya :D

http://nabil02.blogspot.com

F. G. Ramadhan mengatakan... Reply Comment

Berhasil Om, mantap..

F. G. Ramadhan mengatakan... Reply Comment

@F. G. Ramadhan:
Oya bos, pas saya cek, ternyata widgetnya cuma nongol di artikel yang belom ada comment, tapi kalo buat artikel yg sudah ada comment, formatnya gak berubah,, Gmana Tuh?

Jaka Djak mengatakan... Reply Comment

nyoba dulu!

Trizzna mengatakan... Reply Comment
Komentar ini telah dihapus oleh penulis.
Harri Pranata mengatakan... Reply Comment

Kode /script nya kurang bos... yang di atas /head...

Mas Yogi mengatakan... Reply Comment

kurang scyript nya gan,.

tambah kan di akhir <*script>

zenal muttaqin mengatakan... Reply Comment

cb liat blog saya http://www.mazta.net/2012/12/font-khas-indonesia-karya-anak-bangsa.html
komen fb bsa tp komen blog jd gbisa
gmn y?
blz k email sya,, zenal689@yahoo.co.id
mksi sblumnya , , ,

Aiko Akash mengatakan... Reply Comment

waduh, iklan apaan tuh diatas.
obat kista

joisetrick.us mengatakan... Reply Comment

Keren gan, sangat membantu. Thanks yah !

Renzi Papa mengatakan... Reply Comment

mantao gan
http://ezishare.blogspot.com

Exo Prayitno mengatakan... Reply Comment

@Wibi Alwi Surya Kuncoro: Itu ada kesalahan di bagian scriptnya,,, setau saya harus ditutup menggunakan kode script juga

kunbal di http://indoxxx-3gp.blogspot.com

Diakuin Editor mengatakan... Reply Comment

thx gan :)

diakuin.blogspot.com

Himawan Ardie mengatakan... Reply Comment

akhirnya jadi juga..mksih gan

Madridistta Yusuf mengatakan... Reply Comment

Mantap bung...
sudah saya coba... Sukses...
hanya setelah ada yang komentar melalui kolom komentar blog, kolom komentar facebooknya hilang...
mohon arahannya...
bisa dilihat pd blog saya... http://asaladainfo.blogspot.com
Terimakasih

Poskan Komentar

Terimah kasih atas Kunjungan Anda di Mahir Blogger. Silahkan Anda berkomentar, bertanya, memberikan saran, tanggapan, testimoni, atau bisa saja sekedar blogwalking. Silahkan pilih, Anda mau berkomentar dengan menggunakan Account Google, Live Journal, Wordpress, Type Pad, AIM, Open Id, Name/Url Anda bahkan bagi pengguna Anonim. Mohon berkomentar yang baik-baik, demi kemajuan blog ini. Komentar atau tanggpan yang terlambat saya respon mohon dimaafkan karena kekurangan waktu saya untuk selalu on line, banyak juga pekerjaan di dunia off line. Hehehe...

Related Posts Plugin for WordPress, Blogger...