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 e...
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"
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.
- Login to your Wordpress Dashboard.
- Navigate to Appearance > Widgets
- Drag and drop a Text (Arbitrary text or HTML ) widget to the sidebar
- 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/AVvXsEiCgXZdMOoQgP6HT35vT4OzrQknHqwYEvoBZKW36nqGkKwXGIELdudxdja-F850MiskVg_nYYnk85a4YE1Tu3yVBBfQAkkMtb6xDge9eV1Z5bn9J9C71-BOjbWLUSl5mGNkiGF4mf_xypHe/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&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&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.
COMMENTS