Tutorial Membuat Kotak Komentar Facebook dan Blog Berdampingan

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....!