How to Add Static Facebook Like Box for your Blogger Blog

Facebook has become an incredible way to increase traffic to ones blog, but there are things you have to do to keep those traffic coming and also turning first time visitors to subscribers. this widget i’m about to share is one that will help turn those first time visitors to loyal readers!

Advantages of this widget is; to free space on the page. Because Facebook can prevent website normal as the box. Static Pop Out Facebook as soft box with jQuery effect of activation for the blogger, this is another cool control. See Facebook static plate to the right of the page and move the mouse over the plate with the frame, as is visible by sliding to the left. :D cool huh?

Now lets get down to business! You could skip this phase if you’re 100% sure you have this plugin

Live Demo

  • Go to Blogger Dashboard < Design tab > Edit Html
  • Search for </head> tag ( using ctrl+f)
  •  Add below line of code Before </head> tag

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

 

Now save your template.

Read =>> How to add related post widget to Blogger Blog

Step 2.

Adding Widget Code ( Html code )
it’s Simple

  • DashBoard=>Layout or page elements –>> Add a gadget->> Html/java script.
  • Add a below code in the Html/java script box.

Replace the text  in RED  to your URL below i.e. with the URL for your page.
(Note:- Facebook URL Must starting with “http://” and it contains no space or illegal Characters )

<a href=”http://www.yunggenius.com” target=”_blank” title=”Blogger Widgets”><img src=”http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png” border=”0″ alt=”Blogger Widgets” style=”position:absolute; top: 0px; right: 0px;” /></a><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://3.bp.blogspot.com/-YwBHQWHKtfo/Tw2Ewd7XpQI/AAAAAAAAAOc/Nwjd9y_JzjA/s1600/facebookbadge.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 style=””><div><iframe src=”http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/geniustips/120990358053780&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><span>By <a href=”http://yunggenius.com.com/”>Blogspot tutorial</a> / <a href=”http://www.yunggenius.com/2013/06/add-static-facebook-box-blog.html/”>+Get This!</a></span></div></div>

</div>

Now remember to replace the text in RED with your facebook numeric ID you can get that here Findmyfacebookid.com

And that’s it we’re all done, pretty easy huh? :D . Liked this post? kindly share it to your blogger friends on Facebook and Twitter :D . You could also subscribe to our feeds for more blogger tips and hacks! Kindly use the subscription box below.

Happy Blogging.

Leave a Reply

Your email address will not be published. Required fields are marked *