Cara Pasang Widget Facebook Like Box Melayang di Blog

Wendy Cyber – Sangat menarik apabila blog/web yang kita kelola di pasang sebuah widget. Katakanlah seperti widget Facebook ini. Dengan adanya widget ini, selain bisa menjaring pemirsa setia blog kita, juga bisa mempercantik tampilan blog. Pernah dengar widget Facebook Like Box? Itu lho widget yang berbentuk kotak dan ada tombol like/suka serta foto para liker. Kita kali ini akan membahas topik tentang hal ini.

Sebelum anda memasang widget Facebook Like Box ini di blog kesayangan anda, terlebih dahulu anda harus punya Halaman Suka atau yang biasa disebut sebagai Fans Page Facebook. Apabila belum punya, silahkan buat terlebih dahulu atau baca selengkapnya tentang Cara Membuat Fans Page / Halaman Suka Facebook.

Berikut adalah contoh Widget Facebook Like Box di Blog yang saya buat . Jika anda suka silahkan anda simak baik-baik ya langkah-langkah nya untuk memasangkan nya di blog anda

Untuk membuat Widget Facebook Like Box seperti di atas silahkan copas script di bawah ini :

 <style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">Di Like Yah :)</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Wendysoftware&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<br/>
<div class="twitter">
<!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=wendy_febriy&amp;show_count=&amp; show_screen_name=WENDYCYBER&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>&times;</a>
</div>

Keterangan :

text yg berwarna hijau itu adalah kata-kata yg akan di tampilkan di widget, silahkan ganti dengan kata-kata apa saja sesuai keinginan anda

text yg berwarna merah itu adalah url fanpage facebook, silahkan ganti dengan url fanpage facebook anda

text yg berwarna biru itu adalah username twitter, silahkan danti dengan username twitter anda

Tweet