Cara Membuat Komentar Blogger dan Facebook Berdampingan

Sosial Media Blogs - Facebook sebagai sebuah media yang sangat familiar di kalangan masyarakat merupakan media promosi yang sangat menarik untuk digunakan. Mengingat penggunaannya yang mudah dan segudang fitur yang ada di dalamnya. Dengan demikian, dengan kita menggunakan Kolom Komentar Facebook sebagai media komentar blog, tulisan kita akan semakin terpromosikan, tentunya melalui Facebook. Jadi media promosi kita semakin masif karena ketika ada pembaca yang budiman berkomentar melalui komentar facebook, maka komentar tersebut juga akan terpublikasikan ke media Facebook.

Baiklah, tanpa harus berpanjang lebar lagi silahkan simak tutorial singkat yang saya ambil dari blog sebelah dengan seksama:
-ganteng-

1. 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;}

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();
}
</script>

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 merah. Namun jika Anda belum merubah ID Anda maka yang tertera adalah berupa angka. Sudah bisa? Jika sudah maka mari kita lanjutkan...
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.

<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='7' width='600'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Perhatikan angka yang berwarna hijau dan biru di atas, angka 7 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 600 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='600'/>
</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.

Jika semua langkah-langkah membuat komentar blog dan facebook berdampingan ini Anda ikuti dengan benar, maka seharusnya Kalian berhasil melakukannya. Karena langkah diatas sudah saya lakukan dan berhasil seperti yang Kalian lihat milik saya. Namun jika Anda memiliki struktur template yang berbeda, Anda dapat meletakkan kode pada poin nomor 9 dibawah kode <div class='comments' id='comments'> yang kedua saja.

Demikian yang dapat saya sampaikan, semoga bermanfaat...

Ditulis Oleh : Unknown

Jazakumullahu khairan katsiiraa. Terimakasih atas kunjungan Pembaca yang budiman karena telah membaca artikel Cara Membuat Komentar Blogger dan Facebook Berdampingan. Tak Lengkap Rasanya Jika Kunjungan Anda di Blog ini Tanpa Meninggalkan Komentar, untuk Itu Silahkan Berikan Kritik dan saran Pada Kotak Komentar di bawah. Anda boleh menyebarluaskan atau mengcopy artikel Cara Membuat Komentar Blogger dan Facebook Berdampingan ini jika memang bermanfaat bagi anda, namun jangan lupa untuk mencantumkan link sumbernya. Terima Kasih, Salam Blogger! :)

SURATLETTER

Silahkan masukkan E-mail Anda untuk mendapatkan pembaharuan artikel terbaru dari Kami.