Add Sliding Facebook LikeBox To Wordpress

Wordpress Facebook LikeBoxWould 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"     

Add Floating LikeBox To Wordpress


imageIn 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

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 »

16 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Hello ; Thanks for another useful post :) but i have a question with the last step. How can i install it as a plugin to blogger?

    ReplyDelete
  2. Found it i was looking for a wrong post :) had to look for the blogger one ;) thanks anyways!

    ReplyDelete
  3. @0daylog
    it is wordpress tutorial, not blogger

    ReplyDelete
  4. Hi Muhammad,
    I am Usman from Islamabad. Where is the code for blogger? Because I have seen the demo which in on blogger so it means we can have it on blogger. Please provide me for blogger.

    ReplyDelete
  5. hi

    this is a nice post and this information is very useful for wordpress script

    online software

    ReplyDelete
  6. hi

    its is useful for word press not for blogger i think it may be useful for word press developer

    php web development

    ReplyDelete
  7. Wordpress tut finally nice to know that!

    ReplyDelete
  8. @Salaria

    Have a look on this post for Blogger.
    http://www.mybloggertricks.com/2011/12/floating-facebook-likebox-for-blogs.html

    ReplyDelete
  9. Everybody please read this post to apply the same widget to Blogger Floating Likebox For Blogger

    :)

    ReplyDelete
  10. hi.. pls help me... pls visit my blog http://wallpaper.naruto-tv.info look for my floating fb like... how can i fixed that?? when i put my mouse it will appear but i can't hit the like button.. it's always back to the side..

    ReplyDelete
  11. Thanks, I have added and attached a unique photo instead of same FACEBOOK logo. Please check my blog.

    ReplyDelete
  12. is this possible to add in any static site... i mean html page?
    I've tried but got some error..
    if you have any solution.. please

    ReplyDelete
  13. Thanks a million for this tutorial. I just added it to my blog. www.jeffleemovies.com

    ReplyDelete
  14. THANKS SIR THIS FB PLUGIN IS VERY USEFUL THANK AGAIN

    ReplyDelete