Untuk dapat memasang fans page facebook di blog kita dengan mudah terlebih dahulu kita meletakkan kode html di blog kita,untuk contohnya kita lihat fans page facebook di blog bagian kiri blog saya untuk itu kita lihat cara masang dan meletakkan di blog kita dengan cara mengikuti petunjuk di bawah ini.
1.Langkah pertama kopi kode html di bawah ini
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzflGyGvg0FmLW5KXhyphenhyphenB61h3Eap_9svHQT7idQ3a4T68-hvDZ4NwnXrTfDLYNB1NFKlz6NgfP26yPITTAw2AadFbpg-eI7Rrw4ZrRoPyL4X4X8l8cfh67twhvhArS2JK5oVVH7Co7VtB0/s1600/fans-page-facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/sindoglamor&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://sindoglamor.blogspot.com/2013/09/cara-masang-fans-page-facebook-di-blog.html">Get Widget Here</a></span></div></div>
Atau anda bisa menggunakan kode di bawah ini
 |
| fans page facebook di blog |
<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-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;
cursor:pointer;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>
“<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FSindoglamor&width=300&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true&appId=417513225020019" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowtransparency="true"></iframe>”
<!-- Selesai --!><a class='close' href='#'>×</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href=" http://sinndoglamor.blogspot.com/ ">MY Blog</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href=" http://sindoglamor.blogspot.com/ ">Get This Widget</a></p>
</div>
2.Ganti tulisan yang berwarna merah dengan alamat / URL Halaman Facebook Anda.
3.Yang terahkir letakkan hasil kopian anda dan letakkan di blog anda debgan cara masuk ke blog anda dan masuk ke tata letak lalu add widget pilih html dan langkah paling terahkir save/simpan selesai deh cara masang fans page facebook di blog atau website anda sekian.