Pasang Tombol Facebook Like di Setiap Artikel Blog

[TUTORIAL] Pasang Tombol Facebook Like di Setiap Artikel Blog

Filed under blogging, blogging-tutorial, tutorial 53 comments

Facebook, situs layanan jejaring sosial paling ngetop, baru-baru ini merilis fitur baru yaitu Faebook Like. Kalau sebelumnya tobol “Like” hanya terlihat pada situs Facebook saja (misalnya di bawah status update seorang pengguna Facebook), dengan fitur ini seorang pengguna Facebook bisa menunjukkan rasa suka/like langsung di situs di luar Facebook. Tapi tentunya hanya pada situs/blog yang memasang tombol ini.
Nah, bila anda ingin juga memasang tombol “Like” di artikel blog, berikut ini cara pemasangannya.

* Sebenarnya, di situs Facebook sudah tersedia tool untuk mendapatkan kode yang bisa dipasang di website/blog (silahkan lihat di sini). Tapi sayangnya, pada pilihan URL to Like di tool itu, kita hanya bisa menentukan URL statis, tidak bisa membaca secara otomatis URL setiap artikel/halaman blog (URL dinamis). Untuk itu perlu sedikit modifikasi dari kode yang bisa di dapat di Facebook itu.
Silahkan pilih kode yang sesuai dengan platform blog yang dipakai.

*

1. Pasang di template Blogspot/Blogger

Silahkan login, masuk ke Layout, lalu klik Edit Template, centang pilihan Expand Widget Templates. Cari kode <data:post.body/> di template anda, lalu di atas/di bawahnya pasang kode ini:

<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>

*

2. Pasang di template WordPress.ORG (self hosted)

Silahkan login, masuk ke Appearance, lalu klik Editor (Themes editor). Silahkan buka template Single Post (single.php) atau Page Template (page.php). Carilah kode <?php the_content(); ?>, lalu di atas/di bawahnya tambahkan kode ini:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;action=like&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;font=arial&amp;colorscheme=light" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:450px; height:25px;"></iframe>

*

3. Pasang di Sidebar/Widget/Webpage (javascript)

<script type="text/javascript">
document.write('<iframe src="http://www.facebook.com/plugins/like.php?href=' + escape(location.href) + '&amp;action=like&amp;layout=standard&amp;show_faces=true&amp;width=100%&amp;font=arial&amp;colorscheme=light" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; height:25px;"></iframe>');
</script>

*

Catatan:

• Kita bisa memilih setting tampilan tulisan pada tombol, yaitu “Like” (Suka) atau “Recommend” (Rekomendasikan). Silahkan ganti kode like pada bagian action=like menjadi action=recommend pada pilihan kode di atas (kode berwarna biru).
• Kalau mau silahkan ganti-ganti setting pada kode yang berwarna hijau, utuk pilihannya silahkan lihat di situs Facebook.

*

Berikut ini demo pemasangan pada halaman statis:
 

*

Kalo suka artikel ini, boleh juga direkomendasikan atau di-”like”
Itu tadi adalah pemasangan kode tombol “Like”. Kalau untuk tombol Share Facebook silahkan lihat di sini.