Membuat Tombol Like (Facebook) di Blogger

Ini merupakan salah satu cara penyebaran sebuah blog ke Facebook. Sebenernya sich ga' beda jauh dengan share ke Facebook. Intinya sama² mengirimkan link halaman yang disukai seseorang ke akun Facebook pembaca blog tersebut. Dengan adanya tombol like ini, pengunjung dan pemilik blog sama² diuntungkan. Pengunjung dapat menyimpan halaman sebuah blog yang (mungkin) dianggap penting, dan pemilik blog diuntungkan dengan (secara ga' sengaja) promosi gratis di Facebook.

Oke kita menuju ke langkah²nya :
  1. Login dulu ke akun Blogger kamu
  2. Masuk ke halaman "Rancangan" - "Edit HTML"
  3. Centang "Expand Template Widget"
  4. Masuk ke http://developers.facebook.com/docs/reference/plugins/like/ untuk mendapatkan kodenya
  5. Sebelumnya setting dulu bentuk dan wujud tombol like yang kamu inginkan di bagian "Step 1 - Get Like Button Code"
  6. Setelah selesai, klik tombol "Get Code"
  7. Copy kode tersebut, saranku gunakan kode pada "IFRAME"
  8. Kembali ke halaman "Edit HTML" di Blogger kamu
  9. Cari kode
    <data:post.body/></b:if></p>
    Biar cepet nemuinnya, pencet "Ctrl+F" trus masukkin kode di atas pada kolom pencarian
  10. Contoh hasilnya seperti ini
    <data:post.body/></b:if></p>
    <iframe src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fpunyamasbagus.blogspot.com&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:450px; height:80px;' allowTransparency='true'></iframe>
  11. Klik tombol "Simpan Template"
Sedikit tambahan, kalo kamu pake template seperti punyaku, tambahkan kode berwarna biru hingga menjadi seperti di bawah ini :
<data:post.body/></b:if></p>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fpunyamasbagus.blogspot.com&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:450px; height:80px;' allowTransparency='true'></iframe>
</b:if>
Kode berwarna merah adalah kode tombol like. Penambahan kode di atas betujuan agar tombol like hanya muncul setelah link / tombol "Readmore" di klik. Karna berdasarkan pengalaman, kalo ga' pake kode di atas, tombol like muncul sebelom link / tombol "Readmore" di klik. Tepatnya muncul di bawah link / tombol "Readmore". Contohnya seperti pada gambar di bawah ini.
Setelah ditambah kode berwarna biru di atas, tombol like hanya keluar setelah link / tombol "Readmore" di klik. O iya satu lagi, jika terjadi error pada saat menyimpan script di halaman "Edit HTML" biasanya disebabkan oleh tanda petiknya. Ubah tanda petik dua ( " ) pada kode yang di dapat dari halaman Facebook Developers menjadi petik satu ( ' ). Nah sekarang giliran kamu yang nyobain. Jangan lupa klik tombol like di bawah ini ya. Hehe..

4 komentar:

  1. tq infonya..tadi udah dicoba tapi lupa mengcopy codenya...gimana y?? please
    http://daffainfos.blogspot.com/

    BalasHapus
  2. makasih infornya bro. tapi saya maish belum berhasi. ketika saya copy script di aas dan coba saya past di blogspot, ga ada yang muncul.

    BalasHapus
  3. @lowongan kerja di bali : ternyata ada sedikit perubahan tampilan pada saat klik tombol get code.. postingan sudah saya update, perubahan dimulai pada point ke-7.. silakan dicoba kembali :D

    BalasHapus