06 July 2012

Floating Facebook Fan Page Or Like Box for Blogger

Advertisements

We have very good script for adding floating Facebook fan page to Blogger blog. Facebook button will be visible and when you hover mouse pointer it will open fan page/like box.



So lets add this to your Blogger blog

Step 1

Go to Edit HTML and click on Expand Widget Template. Press CTRL F and look for ajax.googleapis. If it is present then move to Step 2. IF it is not present then look for </head> and add following code ABOVE </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Step 2

Go to Page Elements > Add a Gadget > HTML JavaScript and add following code to it.

<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("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") 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=http%3A%2F%2Ffacebook.com%2Fpages/PC-Game-Requirements/192332410828966&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

Replace pages/PC-Game-Requirements/192332410828966 with your Facebook fan page name. Click Save. That's it.

Related Posts

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More