A Unique Facebook Fan Box for your website

post footer border
By adding a Facebook Fan Box on your website you are putting one step forward to exposure yourself on the web. Facebook’s own simple social plugins and widgets are a great way to link your Facebook page with your website. The only potential downsides is the original style of the widget, which is not very attractive and that's why most of the webmasters go with the customized Facebook Fan Boxes.
This widget works on all the major platforms (Blogger, WordPress , Tumbler, TypePad, Bravenet, Weebly, LiveJournal etc).



Setting Up Your Widget

Basic HTML

<div id="fbfanpage">
<div id='slider_thanks'>
<a href="javascript:void(0);" onclick="return closeFBsticker();">(X)</a>
<div style="clear: both;text-align: center;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmobileinterview&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23fff&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:140px;" allowTransparency="true"></iframe>
</div>
</div>
</div>

Replace red part with your Facebook Fan Page url.

SCRIPT

Add these scripts before </head> tag.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(window).scroll(function(){
if($(document).scrollTop()>=$(document).height()/4)
$("#fbfanpage").show("slow");
else
$("#fbfanpage").hide("slow");
});
function closeFBsticker(){
$('#fbfanpage').remove();
$.ajax({type:"POST"});
}
</script>

STYLE

#fbfanpage{
background:#fff;
border: 5px solid white;
border-radius: 150px 150px 0 150px;
box-shadow: -3px 3px 4px #BFBFBF;
margin-bottom: 0;
padding:12px 14px 0 14px;
width:350px;
position:fixed;
bottom:13px;
right:2px;
display:none;
}
#slider_thanks {
background-color: white;
border: 4px solid #E2DDD1;
border-right: none;
border-bottom: none;
border-radius: 150px 150px 0 150px;
font-size: 0.9em;
height: 150px;
margin-bottom: 0;
padding: 40px;
text-align: center;
}
#fbfanpage a{
float:right;
color:#555;
font-size:10px;
font-weight:bold
}




Recent Posts