Add Sliding Facebook LikeBox To Wordpress

Would be not wrong if I say you already use facebook like box for your facebook page at your website/blog. But they don’t have any kind of effect they just live at your website/blog like a simple widget. Although this is my first post at MBT but I will try my best to give you more from this tutorial. It’s about how to add a pop out facebook like box with slide effect. Basically it uses JQuery effect for sliding. It is a Wordpress Version of the same Widget Mohammad Posted on "Floating LikeBox For Blogger"     

Live Demo

Add Floating LikeBox To Wordpress

In the demo you can see an image that float one the left side of the page when you put your mouse pointer on that image the image slide having a facebook like box with a cool style, follow the steps below and see how you can grab this for your wordpress blog.

 

1. Login to your Wordpress Dashboard.
2. Navigate to Appearance > Widgets
3. Drag and drop a Text (Arbitrary text or HTML ) widget to the sidebar
   
4. Paste the following code inside it, if your facebook page URL is look like “https://www.facebook.com/bloggertricks” then use this code 

<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/AVvXsEiPrGuW1qfs04KYnqnZY7ubYzLv12St1LshRJZpUscA7A0GTBtb3EOfMYVp5PYqyVfdey5IGH8s0l6KexI9E0eB2qxXO9_zRWZoTMOgPzAzttkP4qQXuT5WSuEBYXOXnHvAsbQMMkmEpPTM/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%2Fbloggertricks&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>Widget by:<a href="http://www.MyBloggerTricks.com">My Blogger Tricks</a></span></div></div>

Replace "bloggertricks" with you page username. In case your facebook  Page URL  looks like 

“http://www.facebook.com/pages/MyBloggerTricks/106066352757384″

Then better create a Facebook Username  in 5 seconds by visiting this Link

5. Save your widget.
6. Next In your theme options > Go to Head Code.
If your theme does not support any head code section you can get it by simply Installing a plugin with a name "Header and Footer" by "Satollo"
7. Paste the code below in the head code box

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

8. Click Save.

Visit your blog to see it working, Hope you enjoy the post.

---

Faiz Muhammad Khan is a student of BSC computer Science. He has an ambition to become a Web Designer / Developer. He loves to Blog @ RISE PK You can always keep in touch with him at @Facebook

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 12/14/2011