Fasilitas Facebook Like Box tentunya sangat membantu blogger untuk berinteraksi sekaligus membangun jaringan viral dengan pembacanya. Facebook Like Box akan menampilkan foto-foto teman si pembaca yang sudah lebih dulu me-like blog kita, sehingga diharapkan muncul ketertarikan secara emosional antara pembaca dengan blog kita.
Facebook Like Box dapat dengan mudah di integrasikan ke dalam website dengan pilihan menggunakan JavaScript atau IFRAME. Namun pengaturan standar dari facebook hanya memberikan opsi untuk merubah warna border, tinggi dan lebar box.
Sehingga kita akan sulit merubah facebook like box untuk disesuaikan dengan desain website kita. Misalnya kita ingin merubah warna background atau menghilangkan logo facebook dibawah like box.
Berikut ini ada cara mudah merubah tampilan like box dengan sedikit merubah pengaturan CSS nya.
Copy code dibawah ini dan paste kan ke bagian mana kamu ingin meletakkan facebook like box di template websitemu.
<style type="text/css">
.facebookOuter {
background-color:#F4F4F4;
width:250px;
padding:10px 0 10px 10px;
height:250px;
border:1px solid #CCCCCC;
}
.facebookInner {
height:250px;
overflow:hidden;
}
</style>
<div class="facebookOuter">
<div class="facebookInner">
<div class="fb-like-box"
data-width="245"
data-height="290"
data-href="http://www.facebook.com/websitemu"
data-border-color="#F4F4F4"
data-show-faces="true"
data-stream="false"
data-header="false"></div>
</div>
</div>
<div id="fb-root"></div>
<script type="text/javascript">//
<![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/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }
(document, 'script', 'facebook-jssdk'));
// ]]></script>
Ganti kode yang berwarna merah sesuai dengan keinginan sobat. Ganti kode yang berwarna hijau dengan link Facebook Page sobat. Untuk kode yang berwarna ungu untuk mengubah warna Facebook Like Box sesuai keinginan sobat. Selamat mencoba :) |
0 komentar:
Posting Komentar