Facebook like box adalah salah satu cara untuk membuat Fan Page banyak mendapat like melalui suatu blog atau pun website. Dengan meletakkan widget tersebut di tempat yang banyak dilihat oleh kebanyakan pengunjung suatu blog, maka fane page tersebut kemungkinan besar akan banyak mendapat like dari beberapa pengunjung blog tersebut.
Untuk mendapatkan widget tersebut, kita dapat membuatnya di https://developers.facebook.com/docs/plugins/like-box-for-pages, tetapi hasil tersebut belum bisa responsive 100%. Untuk itu silahkan ikuti langkah-langkah berikut ini.
Pengumuman 7 Juni 2017
Sekarang Facebook merilis plugin baru. Plugin official ini sudah cukup responsive untuk sebuah blog. Untuk selengkapnya silahkan baca di sini.
Sekarang Facebook merilis plugin baru. Plugin official ini sudah cukup responsive untuk sebuah blog. Untuk selengkapnya silahkan baca di sini.
Mendapatkan Facebook Like Box
Langkah 1 : Kunjungi https://developers.facebook.com/docs/plugins/like-box-for-pagesLangkah 2 : Isi Facebook Page URL dengan URL fan page
Contoh : https://www.facebook.com/BPIlmu
Langkah 3 : Isi
width dengan 100%. Untuk Height kosongkan saja. Untuk yang lain sepertiShow Face, Show header, sesuaikan dengan keinginan anda sendiri.
Langkah 4 : Lalu dapatkan kode dengan klik "Get Code".
Setelah itu kita akan melihat kode JavaScript SDK yang diberikan. Silahkan letakkan JavaScript SDK di bawah tag
<body><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/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Untuk meletakkan kode tersebut cukup satu saja agar script berjalan dengan baik
Setelah itu letakkan kode untuk menampilkan Like Box sesuka anda dengan widget HTML/JavaScript atau melalui Edit HTML. Kurang lebih kodenya seperti ini :
<div class="fb-like-box" data-href="https://www.facebook.com/BPIlmu" data-width="100%" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="true"></div>Setelah itu kita hanya tinggal menambahkan kode CSS agar like box menjadi responsive
CSS Like Box Responsive
Letakkan kode CSS berikut di atas]]</b:skin> atau </style>/*fb-like-box responsive*/
.fb-like-box{width: 100% !important;}
.fb-like-box iframe[style]{width: 100% !important;}
.fb-like-box span{width: 100% !important;}
.fb-like-box iframe span[style]{width: 100% !important;}Setelah itu lihat like box yang telah dibuat dan resize browser anda untuk melihat like box responsive. Sekian tutorial dari saya. Jangan lupa bantu like Fan Page blog ini https://www.facebook.com/BPIlmu/
Yang suka artikel ini mohon komentarnya, sob! Semoga bermanfaat, Sob! ;)