Cara Membuat Share On Facebook Button Di Blog Anda

Daftar Isi

Ocre, setelah belajar membuat Fasilitas Print This Page Dan Fasilitas Save Page As PDF, kali ini saya ingin kembali menunjukkan cara pembuatan Facebook share Button(Share On Facebook Button) atau bahasa Indonesia Tombol Share Facebook. Dan untuk tutorial kali ini saya anggap sebagai Tutorial Tertier yang sangat-sangat gak penting klo anda telah memanfaatkan fasilitas share button dari Blogger seperti yang saya gunakan atau share button bawaan template yang juga saya gunakan. Jadi, pilihan yang kembalikan kepada anda.

Dan saya seperti pembuatan Fasilitas Print This Page Dan Fasilitas Save Page As PDF, silahkan:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

<p><data:post.body/></p>

Atau jika kode tersebut tidak anda temukan silahkan cari kode seperti ini

<data:post.body/>

Ada donk pasti? hhe... Klo udah ketemu, silahkan diamkan dulu karena saya akan sedikit menjelaskannya dulu kepada anda. Kode diatas adalah kode isi postingan kita, So klo nantinya anda mau meletakkan Share On Facebook Button ini diatas postingan anda, anda bisa meletakkan Script yang akan saya berikan nanti sebelum atau diatas kode tersebut, dan sebaliknya jika anda ingin menaruhnya dibawah postingan anda, maka silahkan letakkan kode yang nanti saya berikan setelah atau dibawah kode kode tersebut.

Okeh, karena saya anggap anda sudah cukup paham dengan penempatannya, maka Selanjutnya Silahkan Copy Script berikut ketempat yang anda inginkan:

Variant 1:


Berikut Scriptnya:

<script>var fbShare = {
url: '<data:post.url/>',
size: 'small',
google_analytics: 'true'
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>


Variant 2:


Berikut Scriptnya:

<script>var fbShare = {
url: '<data:post.url/>',
size: 'large',
google_analytics: 'true'
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>


Variant 3:

Berikut Scriptnya:

<a title='share' name='fb_share' type='box_count' href='http://www.facebook.com/sharer.php' rel='nofollow'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>


Variant 4:

Berikut Scriptnya:

<a title='share' name='fb_share' type='button_count' href='http://www.facebook.com/sharer.php' rel='nofollow'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>


Jika sudah menentukan pilihan, Silahkan Save Template anda dan lihat hasilnya, sebagai tambahan Button-button diatas sudah termasuk Counternya, jadi jika nanti ada yang men-share postingan anda ke facebook secara otomatis anda bisa melihat Angkanya.

Selamat Mencoba...


21 komentar

Comment Author Avatar
1 Juli 2011 pukul 21.40 Hapus
selamat malam gan.
lansung ke tkp gan.
salam kenal.
Comment Author Avatar
17 Juli 2011 pukul 20.35 Hapus
@ arientz : Silahkan.... salam kenal juga... :)
Comment Author Avatar
Anonim
18 Juli 2011 pukul 00.25 Hapus
Sip..
Comment Author Avatar
18 Juli 2011 pukul 16.17 Hapus
@ Kampung Perawan: :)
Comment Author Avatar
26 Juli 2011 pukul 19.03 Hapus
Thank you... sangat2 membantu
Comment Author Avatar
27 Juli 2011 pukul 19.32 Hapus
thanks for your tuts
Comment Author Avatar
28 Juli 2011 pukul 00.28 Hapus
THanks tutorial nya Gan.. mau aku coba di blog ku semoga berhasil.. :)
Comment Author Avatar
1 Agustus 2011 pukul 06.12 Hapus
saya uda coba, ko' tidak bisa ya.................

padahal skripnya saya simpan di bawah

tapi tdk ada yg muncul di bawah postingan.............
Comment Author Avatar
8 Agustus 2011 pukul 16.02 Hapus
@ Wan Azizan bt Abd Aziz : sama2

@ Google Plus Info : Welcome My friend..

@ pojok malam : Siap... silahkan :)

@ Faisal's Blog : Gak tayang dimanapun gitu Sob maksudnya? berarti ada Script yang ketiban juga... klo pasangnya setelah Kode <div class='post-footer-line post-footer-line-3'> gimana Sob? tayang atau tetep nggak? soalnya beda template kadang emank beda penempatan ...

@ Tugiyanto As Jimmy Show: beda Type yg satu box yg satu button Sob.. :)
Comment Author Avatar
19 September 2011 pukul 17.29 Hapus
Mantap Bradd
Comment Author Avatar
23 September 2011 pukul 18.06 Hapus
@ RizaL vM: makasih... :)
Comment Author Avatar
4 November 2011 pukul 13.37 Hapus
done ! thanks :) lengkap banget button nya :D
Comment Author Avatar
11 November 2011 pukul 17.01 Hapus
@ sukague.com: sama2... :)
Comment Author Avatar
7 Februari 2012 pukul 22.36 Hapus
terima kasih ilmunya....
Comment Author Avatar
20 Februari 2012 pukul 18.53 Hapus
mampir ya kang
Comment Author Avatar
20 Februari 2012 pukul 18.54 Hapus
mampir kang
Comment Author Avatar
13 Mei 2012 pukul 11.41 Hapus
mantab nih button nya, mohon ijin nyoba bos
Comment Author Avatar
22 Mei 2012 pukul 16.35 Hapus
udah coba, tp kalo pake dynamic view tetap ga kluar bos
Comment Author Avatar
3 Juli 2012 pukul 14.06 Hapus
keren gan, cuma srcipt 3 dan 4 kayaknya ketuker gambar previewnya
Comment Author Avatar
9 Juli 2012 pukul 06.22 Hapus
Wah. ininih wajib dipraktekin, secara facebook emang sumber trafik yg menggiurkan. Thanks ya sob
Comment Author Avatar
11 Oktober 2013 pukul 23.54 Hapus
ThanksInfonya gan