Menu
» » Tutorial Cara Membuat Facebook Like Button

Baiklah pada malam hari yang dingin ini hehe saya akan share tentang bagaimana Cara membuat dan memasang Facebook Like Button pada blog. kita dapat mengkreasikannya sesuai keinginan kita, bisa dipasang pada sidebar blog, atau di dalam postingan blog (baik di atas maupun dibawah) atau kita dapat memasangnya dalam Widget Share Melayang di blog.
Ada beberapa model yang dapat kita gunakan, dan untuk lebih jelasnya silahkan lihat disini https://developers.facebook.com/ . ada banyak macam widget yang disediakan oleh facebook untuk blog kita.
Untuk lebih mempermudah, kalian bisa mengedit kode dibawah ini :
1. Contoh model button Pertama, Seperti dibawah disamping. Model seperti ini umumnya dipasang di dalam postingan blog bisa di atas atau dibawah. untuk mendapatkannya Pertama Masuk kesini Selanjutnya pilih "Bangun Aplikasi Untuk Web" > Core Concepts > Social Plugins > Like Button > Edit sesuai Y diinginkan > Get Code. Untuk cara memasangnya kalian bisa mengggunakan kode dibawah ini (Javascript SDK), letakkan kode tepat setelah kode <body> (seperti biasa masuk ke edit HTML, jangan lupa centang expand template widget) :
<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 = "//connect.facebook.net/id_ID/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Setelah itu Save. untuk langkah selanjutnya letakkan kode dibawah ini sesuai dengan yang diinginkan, bisa di atas postingan atau dibawah postingan
<div class="fb-like" data-href="https://www.facebook.com/pages/AF-Sahabat-Artikel/305351356172504?ref=tn_tnmn" data-send="false" data-width="450" data-show-faces="true"></div>
Ubah kode yang berwarna merah dengan alamat Fanpage Group Blog masing2.

2. Untuk Contoh Model yang kedua model Like button (Box-Count), contohnya seperti gambar disamping ini. untuk model ini kita bisa menggunakannya pada Widget Share Melayang di blog (utk tutorialnya bisa dilihat disini) atau di dalam postingan.  Untuk mendapatkannya sama seperti cara yang diatas, bedanya hanya pada pengeditan, pada layout style menggunakan Box_Count. Untuk memasangnya sama dengan cara yang pertama, jika sudah memasang kode (JavaScript SDK), lewati saja langsung ke proses selanjutnya. silahkan Copas kode dibawah ini:
<div class="fb-like" data-href="https://www.facebook.com/pages/AF-Sahabat-Artikel/305351356172504?ref=tn_tnmn" data-send="false" data-layout="box_count" data-width="45" data-show-faces="true"></div>
Ubah kode warna merah dengan alamat Fanpage Group Blog masing2.

3. Untuk contoh model yang ketiga yaitu model Like Box. model ini sudah amat sering kita temukan dan rata-rata sahabat blogger menggunakannya. dan model ini banyak yang dapat kita kreasikan, dalam Like Box banyak pilihan, memasang show stream saja, atau show stream + pengikut, atau hanya pengikut saja. Contohnya seperti gambar disamping ini. Penjelasan singkatnya, Show Stream atau bisa dibilang status terbaru yang dimunculkan sedangkan  Pengikut > orang yang menge-like/menyukai blog kita. Untuk model ini kita dapat memsangnya pada sidebar blog (kanan, kiri, atas, bawah), atau bisa juga di bawah postingan blog. Dapat kita pasang juga dalam kode CSS blog, tujuannya agar tidak perlu repot-repot lagi untuk memasang kode ini karna sudah otomatis akan muncul disetiap postingan, syaratnya kode Like box ini harus di pharse terlebih dahulu. Dan untuk tutorial cara memasang di dalam postingan secara otomatis tunggu pada postingan berikutnya yahh, agar tidak terlalu rumit, hehehehe , be patient . 
Ok balik lagi ke tutorialnya hehehe iklan sedikit . . . terimakasih juga masih bersedia membaca tutorial ini (mav yah klo terlalu banyak kata-katanya). 

# Untuk Model Like Box (Show Stream dengan Pengikut), kalian dapat mengedit dan copas kode dibawah ini :
<div class="fb-like-box" data-href="https://www.facebook.com/pages/AF-Sahabat-Artikel/305351356172504?ref=tn_tnmn" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
Untuk kode yang berwarna merah silahkan rubah dengan alamat FanPage Group Blog masing2. dan untuk kode yang berwarna hijau silahkan atur lebar widgetnya sesuai dengan yang diinginkan.

# Untuk Model Like Box (Pengikut saja), kalian bisa copas kodenya dibawah ini:
<div class="fb-like-box" data-href="https://www.facebook.com/pages/AF-Sahabat-Artikel/305351356172504?ref=tn_tnmn" data-width="292" data-show-faces="true" data-stream="false" data-header="true"></div>
Untuk kode yang berwarna merah silahkan rubah dengan alamat FanPage Group Blog masing2. dan untuk kode yang berwarna hijau silahkan atur lebar widgetnya sesuai dengan yang diinginkan.

Dan itulah beberapa model Facebook Like Button yang sering digunakan para sahabat blogger. Baiklah selesai sudah postingan saya kali ini tentang Cara Membuat Facebook Like Button
4.5
Diposkan oleh
Label:
di 11:57 PM

52 komentar:

  1. Cara Membuat FacebookFebruary 15, 2012 at 5:38 PM

    wah bagus banget nih infonya gan, kebetulan blog saya blom ada like button nya

    ReplyDelete
  2. abiFebruary 15, 2012 at 8:45 PM

    selamat mencoba sobat , , smoga bermanfaat, mksih atas kunjungan'a

    ReplyDelete
  3. Noviardi SaputraFebruary 16, 2012 at 1:20 AM

    thks ya bozzz

    infonya TOP BGT

    oya tolong add link blog q sh....
    http://noviardisaputra.blogspot.com/

    ReplyDelete
  4. MartapuraCyberFebruary 16, 2012 at 9:12 AM

    Trik yang mantap sob, we dah coba ni

    ReplyDelete
  5. abiFebruary 16, 2012 at 10:21 PM

    Noviardi_Ok sama2 Sobat,, mksud'a mau link exchange sob ?
    MartapuraCyber_Ok siipp sobat

    Thanks sobat udah mampir di blog sederhana ini . .
    salam kenal !!

    ReplyDelete
  6. ubalin WebBlogMarch 10, 2012 at 7:49 PM

    Infonya simple dan mudah dimengerti, langkah-langkahnya sangat jelas, sehingga saya gak usah muter-muter mbah google untuk medapatkan informasi ini. thanks ya...

    ReplyDelete
  7. Berita KomunitasMarch 12, 2012 at 2:41 PM

    keren bos.. detil dan jelas tutorialnya

    ReplyDelete
  8. Mr. GMarch 18, 2012 at 4:28 PM

    gan, aku kan pakae perancang templet dari blogger. bisa di edit gk HTML nya?

    ReplyDelete
  9. abiMarch 20, 2012 at 11:35 AM

    @Ahmad Budiarto:bisa ko sobat, biasanya klo diprancang template ada edit css'a tuh...

    ReplyDelete
  10. http://free-download-music-video.blogspot.com/March 29, 2012 at 12:33 AM

    Membantu banget thanks...

    ReplyDelete
  11. berbagi apa sajaApril 7, 2012 at 2:14 PM

    tutorial ini sangat komplit tapi sayang di template saya tidak ada kode body-nya sehingga tidak meletakkan kode javascript SDK di atas.
    apakah ada solusinya?

    ReplyDelete
  12. berbagi apa sajaApril 7, 2012 at 2:18 PM

    apa itu Fanpage group blog?, saya tidak tahu

    ReplyDelete
  13. Miko Satria PratamaApril 16, 2012 at 11:31 AM

    thanks infonya, kunjung balik ya...

    ReplyDelete
  14. arie5758April 25, 2012 at 10:24 AM

    Saya sudah memasang tombol like di bawah artikel, tapi sepertinya kok gak bener ya? Jumlah like tiap artikel sama. Apa ada yang salah

    ReplyDelete
  15. Kumpulan Cerita DWSApril 28, 2012 at 5:12 PM

    keren infonya gan.......follow back gan....thanks

    ReplyDelete
  16. MustofaMay 15, 2012 at 10:41 AM

    thanks for posting a good article about blogging

    ReplyDelete
  17. MustofaMay 15, 2012 at 10:43 AM

    thanks for posting a good article about blogging

    ReplyDelete
  18. AdminJune 11, 2012 at 11:02 PM

    nyari kode < body> ny disebelah mana ?

    ReplyDelete
  19. pink.monsJuly 3, 2012 at 6:20 PM

    @Kang Yoes: ketik aja ctrl + F nnti ad kotak di pojok kanan atas. trus ketik aja kode --> < body>

    ReplyDelete
  20. RahmanJuly 8, 2012 at 11:18 AM

    Terima kasih,.. Artikel yang bagus,.. membuat ingin belajar lebih banyak lagi tentang blogger,..

    ReplyDelete
  21. Catatan DarmantoJuly 10, 2012 at 3:55 PM

    MANTAP GAN,AR5TIKELNYA BERHASIL SAYA TERAPKAN.MAKSIH YA...

    ReplyDelete
  22. peralatan badmintonJuly 13, 2012 at 8:44 AM

    trimksh bnyk sharing nya bro, semoga tmbah bermanfaat.,.
    salam www.peralatanbadminton.com

    ReplyDelete
  23. game kerenSeptember 7, 2012 at 10:56 PM

    saya coba dulu sob ,, thanks

    ReplyDelete
  24. Wahid Priyono,S.Pd.October 1, 2012 at 7:38 AM

    thanks sobat. Mampir ke blog aku juga yuk?
    http://wahid-biyobe.blogspot.com/
    :)

    ReplyDelete
  25. Mang uemOctober 2, 2012 at 4:33 PM

    Thanks sudah berbagi ilmunya, sukses selalu...

    ReplyDelete
  26. UnknownOctober 3, 2012 at 10:56 PM

    makasih bang infonya, kunjungi blog ane ya

    ReplyDelete
  27. Blogspot TutorialNovember 24, 2012 at 8:46 PM

    tombol like facebooknya sudah saya pasang diblog saya :D

    hehhehe... thanks gan :D

    ReplyDelete
  28. UnknownJanuary 8, 2013 at 11:14 AM

    berhasil sob..tkhs sob ilmunya.. :D

    ReplyDelete
  29. Download Gratis AreaJanuary 18, 2013 at 8:33 PM

    beruntung dah bisa tersesat di sini :D dapat ilmu2 yang menarik :) terimah kasih gan

    ReplyDelete
  30. NFS ReloadJanuary 28, 2013 at 12:58 AM

    Mohon maaf gan. ijin coba ya

    ReplyDelete
  31. NFS ReloadJanuary 28, 2013 at 12:59 AM

    Maaf doble post.
    boleh kasih tahu tutorialnya, biar fanspage fasebook kita byk yg like
    inbok kesini ya om cs@nfsreload.com

    ReplyDelete
  32. abiJanuary 28, 2013 at 7:04 AM

    @NFS Reload Sebenernya gampang gan, cara pertama pasang LikeBox fanpage facebook dengan cara floating atau melayang di blog sperti di blog ini, apalagi jika memiliki trafik tinggi makin cepat dapat like'a bahkan bisa ratusan tiap harinya

    Kedua, saat membuat fanpage undang sluruh kontak teman Y ada pada teman fb kita utk menyukai halaman kita

    Ketiga pasang recommended post fb disamping blog agar lbh banyak Y like

    dan terakhir, jika sudah membuat fanpage, jangan lupa posting setiap artikel Y diterbitkan di blog, gunanya apa ? agar para likers fanpage kita dapat membaca dan sekaligus membagikan/menyebarkannya lagi kpd teman2'a

    jika ke-4 cara diatas dipraktekkan pasti akan cepat kita mendapatkan likers utk fanpage kita, , jgn merasa gagal dulu sblum mencobanya, saat awal memang blm terasa tapi jika sudah mnyebar luas akan terasa hasilnya

    Semoga bermanfaat dan trima kasih telah mampir di blog sederhana ini . . .

    ReplyDelete
  33. deptoFebruary 1, 2013 at 1:27 PM

    di blogger aq kok gk nmpil ya maz

    ReplyDelete
  34. UnknownFebruary 17, 2013 at 3:12 AM

    nice tutorial gan..
    mampir ya gan ke blog ane
    http://4biyaksa.blogspot.com

    ReplyDelete
  35. SUKSES UNTUK KITAFebruary 22, 2013 at 12:47 AM

    oke ntar akan aq praktekin disini gan,,, http://indoboclub.blogspot.com
    ( BO GRATIS $$$ DARI FACEBOOK 2013 )
    and disini
    http://sukses181.blogspot.com
    ( kumpulan BO )
    thanx gan tutorialnya

    ReplyDelete
  36. Bank Mandiri Bank Terbaik di IndonesiaFebruary 26, 2013 at 6:07 PM

    di MyWapBlog bisa ga Om...

    ReplyDelete
  37. abiFebruary 28, 2013 at 8:17 PM

    @depto bisa ko mas, malah lebih dominan di blogger pmasangannya, sblm pasang kode script perhatikan juga kode javascript Y dipasang di dalam template agar pmasangan brhasil

    ReplyDelete
  38. abiFebruary 28, 2013 at 8:29 PM

    @Bank Mandiri Bank Terbaik di Indonesiakurangtau blm pernah coba gan, , tester ajj dulu

    ReplyDelete
  39. AndyMarch 22, 2013 at 2:01 PM

    Makasih , infonya sangat membantu ,

    ReplyDelete
  40. kk psMarch 24, 2013 at 9:31 PM

    terimakasih banyak sobat,artikel nya sangat bermanfaat

    ReplyDelete
  41. sookapuraMarch 24, 2013 at 9:54 PM

    bos ga jalan tuh

    ReplyDelete
  42. abiMarch 24, 2013 at 11:34 PM

    @sookapura Ga jalan gimana ? apa sudah benar pmasangannya ?

    ReplyDelete
  43. NandaMarch 30, 2013 at 9:36 AM

    cek tombol like punya ku geh http://nandabaguss.blogspot.com
    tombolnya ga bisa dilike lagi,,,,
    tolong bantu ya,,,,

    ReplyDelete
  44. UnknownMarch 31, 2013 at 3:50 AM

    keren gan, ditunggu kunjungan baliknya :D
    blog baru.. mohon dukunganya

    http://x-evolutions.blogspot.com

    ReplyDelete
  45. AnonymousApril 2, 2013 at 11:30 AM

    thanks gan :)

    http://www.errorcrew.com/

    ReplyDelete
  46. dakwahpost.comApril 2, 2013 at 3:09 PM

    thanks ilmunya

    http://kumpulankonsultasi.blogspot.com/2013/03/mana-yang-afdhal-untuk-wanita.html

    ReplyDelete
  47. obat kuat viagraApril 3, 2013 at 5:13 PM

    makasih atas infonya mas:D

    ReplyDelete
  48. MuslimedicaApril 13, 2013 at 5:11 PM

    dahsyat nih tutorial, nuhun pak

    ReplyDelete
  49. AnonymousApril 19, 2013 at 10:21 AM

    http://massjoko.blogspot.com/

    ReplyDelete
  50. AnthonieApril 25, 2013 at 1:27 AM

    Iya saya juga pake cara no 3 untuk like button facebook... makasih sob udah berbagi... salam kenal :)

    ReplyDelete
  51. Regi AdemoelyaMay 25, 2013 at 2:41 PM

    Menarik, terimakasih sobat..

    ReplyDelete
  52. WaldiJune 14, 2013 at 11:40 PM

    klu cr memasang pd tampilan blogger terbaru bgmn bos...? Tq ats jwbnya...

    ReplyDelete

Terima Kasih atas kunjungan dan komentarnya pada Blog ini. Thanks atas setiap Komentar, Masukkan, Saran, dan Kritik Y dapat membangun blog ini agar lebih baik lagi kedepannya. Berkomentarlah sesuai dengan Isi Bahasan Artikel. Mohon dengan Sangat Kepada Sobat-sobat untuk tidak berkomentar Y berbau unsur:
- Sara
- Pornografi
- No Spam !!! [Komentar menyertakan link aktif akan otomatis terdelete]
Terima Kasih atas Kunjungannya Sobat,,
Salam Sukses dari AF Sahabat Artikel

Subscribe to: Post Comments (Atom)
 
Top