Home » Desain Blog » Memasang Widget Fanspage Facebook Ke Blog

Memasang Widget Fanspage Facebook Ke Blog

By  Follow @Info4Youmyid Like Info4you on Facebook

Tidak lengkap rasanya jika web atau blog tidak memiliki halaman facebook /fanspage, sebelumnya saya sudah membahas macam-macam plugin twitter. Besar juga pengaruh trafik blog dari lalu lintas facebook, khusus nya fanspage, hal ini juga akan mempermudah pengunjung kita untuk mendapatkan info update postingan dengan memposting link pada fanspage, dan untuk mendapatkan pengunjung tetap, kita juga harus mempromosikan halaman tersebut, banyak cara untuk itu, salah satunya menampilkanya langsung di widget blog.

Tidak hanya fanspage facebook, ada juga facebook plugin lain seperti tombol suka, bagikan, bookmark, kolom komentar facebook dan banyak lagi yang dapat di tampilkan di blog, nanti akan kita bahas di lain waktu dan di postingan lain.

Disini saya menganggap sobat semua sudah membuat fanspage nya, jika belum silahkan buat dulu KESINI . Selanjutnya, mari ikuti langkah-langkah dibawah.

SDK JavaScript Facebook Wajib Dipasang

Agar plugin fanspage fb dapat tampil di web/blog sobat perlu menambahkan code javascript dari facebook ini untuk di pasang di dalam body. Namun, jika pada template yang sobat gunakan sudah terdapat JavaScript facebook, sobat tidak perlu lagi memasang nya. Silahkan sobat masuk ke blogger.com, pada Template -> Edit HTML cari <body> biasanya dibawah body terdapat code seperti dibawah ini, jika tidak ada, silahkan langsung CTRL+F dan cari fb-root jika ketemu dan kode nya sama dengan dibawah ini, atau hampir sama berarti sudah terpasang, atau silahkan di ganti dengan kode dibawah ini jika versi nya lebih rendah (versinya dapat dilihat yang saya beri latar warna kuning).

SDK JavaScript Facebook
  1. <div id="fb-root"></div>  
  2. <script>//<![CDATA[ 
  3. (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/sdk.js#xfbml=1&version=v2.8&appId=345654185818007"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));//]]></script>  

Membuat Widget Fanspage Facebook Untuk Web/Blog

Jika SDK JavaScript nya sudah terpasang, sekarang kita akan membuat berbagai macam tampilan widget facebook yang akan di tampilkan di blog. Contohnya lihat gambar dibawah.

Untuk memasang widget fanspage ini akan kita mulai dari yang paling sederhana, perlu di perhatikan, mungkin tidak semua plugin akan saya load, demi kenyamanan bersama agar halaman tidak berat (loading lama) jadi sebagian saya akan menggunakan gambar untuk tampilanya.

Hanya tombol like dan bagikan

Yang kita buat pertama adalah tag div dengan class fb-like, dan enam atribut HTML. Apa saja? data-href, data-layout, data-action, data-size, data-show-face dan data-share. Class dan atribut-atribut ini dapat berfungsi karena kita sudah memasang SDK JavaScript tadi, sebab itu silahkan sobat periksa apa sudah terpasang apa belum, dan jika sudah ada sejak lama, lebih baik di perbaharui dengan versi terbaru, saat ini JavaScript xfbml versi 2.8. Kita sudah mengetahui class dan atribut yang kita butuhkan, sekarang kita akan menyusun dan memberi nilai pada atribut-atribut tersebut, sehingga akan menjadi seperti ini
  1. <div class="fb-like"  
  2.  data-href="https://www.facebook.com/info4youmyid"  
  3.  data-layout="standard"  
  4.  data-action="like"  
  5.  data-size="small"  
  6.  data-show-faces="false"  
  7.  data-share="true">  
  8. </div>  
Keterangan: Silahkan sobat demo dan bereksperimen sendiri, karena akan berat jika saya load semua di halaman ini.
  • info4youmyid ganti dengan URL facebook sobat
  • standard bisa diganti dengan
    • box_count maka tampilan jumlah like akan berada diatas tombol
    • button_count menampilkan jumlah like didalam button
    • button menghilangkan tampilan jumlah like dan hanya menampilkan tombol
  • like dapat diganti dengan recommend maka tulisan "Suka" pada tombol akan berganti menjadi "Disarankan"
  • small dapat diganti dengan large untuk mengatur ukuran tombol
  • data-layout="false" ganti dengan true jika ingin menampilkan wajah teman yang juga menyukai
  • data-share="true" dapat diganti false jika hanya ingin menampilkan tombol like saja
macam-macam tampilan tombol like facebook untuk web atau blog
Beginilah tampilan-tampilan setelah sedikit dilakukan perubahan

Cara Membuat Widget Halaman Facebook Untuk Blog

Yang sebelumnya hanya menampilkan tombol saja, sekarang kita akan membuat plugin yang menampilkan nama halaman facebook juga. Kode nya tidak jauh berbeda dari sebelumnya, jadi saya akan langsung saja, berikut tampilan paling sederhanya.
Info4You Fanspage
  1. <div class="fb-page"  
  2.  data-href="https://www.facebook.com/info4youmyid"  
  3.  data-width="300"  
  4.  data-small-header="true"  
  5.  data-adapt-container-width="false"  
  6.  data-hide-cover="true"  
  7.  data-show-facepile="false">  
  8. </div>  
Keterangan:
  • info4youmyid ganti dengan URL facebook sobat
  • 300 untuk ukuran lebar, min. 180 dan maximum 500, silahkan sesuaikan dengan lebar yang diinginkan. Namun, jika sobat ingin memasangnya di widget blog, ganti data-adapt-container-width="false" menjadi true, maka plugin yang sobat pasang di widget akan menyesuaikan lebar nya dengan lebar widget blog.
  • data-small-header="true" dapat sobat ganti dengan false jika ingin tampilan header plugin lebih besar.
  • data-hide-cover="true" untuk menyembunyikan cover halaman facebook, ganti ke false jika ingin menampilkanya.
  • data-show-facepile="false" silahkan diganti dengan true jika ingin menampilkan wajah (foto profil) teman yang juga menyukai halaman.
Jika semua saya gonta-ganti value nya, memungkinkan saya untuk membuat tampilan menjadi seperti dibawah ini.
tampilan widget fanspage facebook responsive

Apakah sobat pernah melihat widget fanspage yang juga menampilkan Kronologi atau Pesan Langsung atau Acara? untuk melakukan itu, sebenarnya cukup mudah, yang perlu sobat lakukan hanyalah menambahkan atribut baru yaitu data-tabs dengan value:

  • timeline untuk menampilkan tab kiriman kronologi fanspage sobat.
  • messages untuk menampilkan tab messenger dan memungkinkan pengunjung untuk mengirimkan pesan secara langsung ke fanspage facebook.
  • events menampilkan acara yang sobat buat difanspage kepada pengunjung.

Tampilan Timeline Widget Fanspage tampilan messages dan events widget fanspage

Masih bingung? lihat kode lengkapnya dibawah ini
  1. <div class="fb-page"    
  2.  data-href="https://www.facebook.com/info4youmyid"    
  3.  data-width="300"    
  4.  data-small-header="false"    
  5.  data-adapt-container-width="true"    
  6.  data-hide-cover="false"    
  7.  data-show-facepile="true"  
  8.  data-tabs="timeline">    
  9. </div>    
Mudah bukan? sobat hanya perlu menambahkan data-tabs="timeline" (latar warna kuning) pada kode sebelumnya yang sudah kita bahas, jika ingin menampilkan halaman kronologi facebook nya. Silahkan sobat ganti menjadi messages atau events jika ingin menampilkan tab lain.

Selain itu, sobat juga dapat menampilkan kronologi, pesan, dan events (acara) bersamaan dalam satu widget fanspage, caranya benar-benar sederhana, anda hanya perlu memberi value ketiganya dalam data-tabs yang dipisah dengan koma (,) hingga menjadi seperti ini data-tabs="timeline,messages,events" .
menampilkan timeline messages events pada widget fanspage menampilkan kronologi pesan dan acara pada widget fanspage facebook

Bagaimana? tertarik mencobanya? silahkan bereksperiment sendiri ya, jika ingin membuat tombol-tombol twitter dan juga embed timeline twitter ke blog, silahkan baca artikel saya lainya.
Cara mudah menampilkan tombol follow, message, tweet dan embed timeline twitter ke blog
Cukup sekian untuk artikel kali ini tentang cara memasang widget fanspage facebook untuk blog.


sumber referensi: developers.facebook.com

Info4You Info4You Update Pada:
Jika Artikel Ini Bermanfaat, Maka Luangkan Waktumu 30 Detik Saja Untuk Membagikanya
Baca Tulisan Lainnya di Kategori:

Berlangganan via Email Gratis:

*Setelah submit email, Silahkan periksa email konfirmasi pada pesan utama email. Jika tidak ada, periksa folder spam*

Delivered by FeedBurner

Jadilah Yang Pertama Berkomentar! dan Dapatkan Gelas Antik Dari Tetanggamu!

Post a Comment

*Berkomentarlah jika ada yang ingin ditanyakan
*Bagikan jika memang bermanfaat
*Link aktif tidak akan dipublish
*Kata-kata SARA dan Tidak Senonoh tidak akan dipublish

Contact Form

Name

Email *

Message *

  • Terbaru Dari Tips Blog

  • Tutorial Desain Blog Terbaru

back to top