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
- <div id="fb-root"></div>
- <script>//<![CDATA[
- (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- <div class="fb-like"
- data-href="https://www.facebook.com/info4youmyid"
- data-layout="standard"
- data-action="like"
- data-size="small"
- data-show-faces="false"
- data-share="true">
- </div>
- 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
 |
| 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
- <div class="fb-page"
- data-href="https://www.facebook.com/info4youmyid"
- data-width="300"
- data-small-header="true"
- data-adapt-container-width="false"
- data-hide-cover="true"
- data-show-facepile="false">
- </div>
- 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.
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.
Masih bingung? lihat kode lengkapnya dibawah ini
- <div class="fb-page"
- data-href="https://www.facebook.com/info4youmyid"
- data-width="300"
- data-small-header="false"
- data-adapt-container-width="true"
- data-hide-cover="false"
- data-show-facepile="true"
- data-tabs="timeline">
- </div>
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" .
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 blogCukup sekian untuk artikel kali ini tentang cara memasang widget fanspage facebook untuk blog.
sumber referensi: developers.facebook.com
Apa itu Custom Domain? dan apa gunanya? Custom domain adalah kita mengganti subdomain ke domain yang kita beli, contohnya kita akan mengganti info4you.blogspot.com menjadi info44ryou.blogspot.com ( .com / .net / co.id / .id / dan banyak lainya) ini dinamakan custom domain. Sebenarnya hal ini Opsional karena yang saya tau banyak juga blogger yang menggunakan blogspot.com yang memiliki trafik besar dan menduduki page 1 dari pencarian google, karena semua tergantung pada isi artikel yang akan sobat buat. Custom domain hanya jika sobat ingin blognya terlihat lebih profesional dengan menghilangkan subdomain blogspot tersebut. Untuk meng-custom domain, sobat harus membeli domain dari penyedia domain, banyak penyedia domain sekarang ini, sobat dapat mencarinya di google pencarian dengan kata kunci Beli Domain, sobat akan menemukan banyak sekali situs yang menjual domain, silahkan sobat lihat nama situs tersebut, dan ada baiknya survey terlebih dahulu apakah layanan mereka memuaskan atau tidak, karena banyak juga yang membahas tentang layanan penyedia domain apakah mereka memuaskan atau tidak.
