Cara Membuat "Facebook Send Button" di Blogger [Blogspot]

Okeh, setelah 1 atau 2 minggu lalu, saya sempat mengajak anda untuk mengintegrasikan blog anda dengan Facebook Inside, kali ini saya ingin mengajak anda untuk membuat sebuah tools baru bernama "Facebook Send Button". Apa itu "Facebook Send Button"? Facebook Send Button merupakan tools yang sengaja dibuat oleh Facebook untuk diintegrasikan dengan blog kita, dimana jika seseorang menyukai postingan kita, orang tersebut dapat membagikan postingan tersebut secara langsung jika ia sedang dalam keadaan LogIn di akun Facebooknya. Dan yang menarik dari Tools baru ini adalah, Send Button bersifat agak pribadi, Eum saya kurang tau sekarang Facebook itu modelnya kaya apa karena saya udah lama banget gak pernah berurusan sama Akun Facebook, tapi klo di Google+ bisa saya katakan fitur Send Button ini hampir sama kaya klo kita pengen share sebuah post hanya dicircle atau bahkan hanya kepada seseorang yang kita inginkan dimana orang lain tidak dapat melihatnya. Gimana? Cukup menarik bukan? dan jika tertarik anda dapat mengikuti panduan yang akan saya jelaskan dibawah ini:

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. Jika anda ingin meletakkan Facebook Send Button ini dibagian atas postingan, atau persis dibawah judul postingan, silahkan cari Kode berikut ini:

<div class='post-header-line-1'/>

Atau klo gak ketemu cari Kode berikut ini:

<div class='post-header-line-1'>

5. Klo udah silahkan Copy Script dibawah ini dan letakkan setelah atau dibawah kode tersebut

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='arial'/>

6. Save Template anda dan lihat hasilnya, jika berhasil anda akan melihat penampakan seperti berikut ini:


7. Nha itu klo anda mau naronya dibagian atas postingan, klo mau naronya dibagian bawah, silahkan cari kode berikut ini:

<data:post.body/>

atau kode berikut, jika kode diatas tidak dapat anda temukan:

<div class='post-footer'>

8. Letakkan Script dibawah ini, tepat dibawah atau setelah kode tersebut:

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='arial'/>

9. Save template anda dan lihat hasilnya.

Nah itu kan cuma Facebook Send Button doank ya? karena menurut saya agak kurang lengkap klo Facebook Send Button gak didampingi sama Facebook Like Button, jadi saya juga akan ngasih Script untuk masang kedua tools itu berdampingan, tapi sebelum saya kasih Scriptnya, sedikit mengingatkan bahwa dulu saya pernah bikin postingan untuk masang Facebook Like Buttonnya doank, jadi klo anda lebih suka memasang kedua Tools ini secara terpisah lha nggeh monggo :) dan untuk yang mau masang Tools itu secara berdampingan, ganti Script awal tadi, yaitu:

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='arial'/>

Dengan Script berikut ini:

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light' action='like' layout='standard' expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>

Klo udah Save template anda dan lihat hasilnya. Untuk yang belum yakin anda bisa melihat demonya pada link dibawah ini

DEMO Facebook Send Button

Ps: Silahkan buka sebuah postingan dan perhatikan bagian atas postingan tersebut, tepat dibawah judul postingan, seperti itulah hasil akhir yang akan anda lihat.

Dan sebagai tambahan ada 2 versi dari Facebook Send Button ini yang dapat anda gunakan yaitu, versi light dan versi dark, so klo menurut anda yang versi light agak kurang cocok dengan background blog anda, mungkin anda bisa menggantinya dengan yang dark.

Caranya, tinggal ganti isi variabel yang tadinya kaya gini:

colorscheme='light'

menjadi kaya gini:

colorscheme='dark'

Terus dimana letak perbedaannya? silahkan perhatikan 2 gambar dibawah ini:

Gambar diatas adalah versi light, sedangkan gambar yang dibawah adalah versi dark

Udah tau donk sekarang dimana letak perbedaannya hhe... Nah ada 1 lagi yang bisa anda rubah yaitu penampakan buttonnya, mau yang standart aja atau mau yang pake Count, klo yang standart sih kaya yang diatas, klo mau yang pake Count anda bisa merubah isi variabel layout dari berikut:

layout='standard'

menjadi berikut:

layout='button_count'

Okeh, itu dia panduan sederhana yang bisa saya berikan, jika anda ingin membuat Facebook Send Button di blog anda. Dan untuk anda yang mau nyoba, monggo langsung di praktekin... :)

Good Luck All :)