Membuat Tombol Facebook di Setiap Post

Niat Ngeblog - Masih dengan Facebook, kali ini kita akan menambahkan tombol yang akan terhubung ke Facebook yang akan kita letakkan di setiap post pada blog kita. Tombol ini terdiri dari tombol send yang berfungi untuk menampilkan link post ke wall Facebook dan tombol like yang berfungsi untuk memberitahukan pengunjung suka artikel yang di baca.

Tombol send

Untuk menambahkannya, maka beikut langkahnya : 

01. Masuklah pada account blog kamu dan pilih lah menu Design.

02. Pilih Edit HTML dan aktifkan kotak Expand Widget Templates.

03. Tekan Ctrl+F untuk menemukan <data:post.body/>

04. Letakkan kode berikut tepat di atas atau bawah kode <data:post.body/> (Tergantung kamu ingin meletakkan tombol ini di atas post atau di bawah post).

<!-- Facebook Send script Start -->
<b:if cond="data:post.isFirstPost">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</b:if>
<!-- Facebook Send script End -->
<!-- Facebook Send button Start -->
<div style='float:left;padding:5px 5px 5px 0;'>
<fb:send expr:href='data:post.url' font='' colorscheme='light'></fb:send>
</div>
<!-- Facebook Send button End -->

05. Save Template dan lihat hasilnya.

Tombol Like

Langkahnya sama seperti membuat tombol send, cuma pada langkah ke empat tambahkan kode berikut :

<!-- Facebook Like Send script Start -->
<b:if cond="data:post.isFirstPost">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</b:if>
<!-- Facebook Like Send script End -->
<!-- Facebook Like Send button Start -->
<div style='float:left;padding:5px 5px 5px 0;'>
<fb:like expr:href='data:post.url' font='' layout='standard' send='true' show_faces='false' width='450' colorscheme='light'></fb:like>
</div>
<!-- Facebook Like Send button End -->

Rekomendasi

Baca juga artikel tentang kolaborasi Jejaring Sosial dengan Blog dalam artikel :

“Menambahkan Share Jejaring Sosial Kedalam Blogger”.

“Cara Membuat Box Like Facebook Pada Blogger”.

“Membuat Widget Status Twitter Pada Blogger”.

“Membuat Update Posting Otomatis ke Facebook dan Twitter”.

“Membuat Klik Google+ Pada Blogger”.

Selamat mencoba