Recently we shared simple yet stylish floating facebook like box widget. Now we came with Another New Floating Facebook Like Box Widget For WordPress ! This will Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. Its widget for WordPress. You can find floating facebook like box here. Now lets move to how you can add this in blogger I will show you How You Can Add Another New Floating Facebook Like Box Widget To WordPress?
Add Floating Facebook Like Box Widget To WordPress !
- Go to Dashboard > Appearance > Widgets > Available Widgets.
- Drag Text widget into a sidebar.
- Paste in the code.
- Save.
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.abtlikebox span a{color: gray;text-decoration:none;}
.abtlikebox span a:hover{text-decoration:underline;}
}
</style>
<div class="abtlikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fallbloggingtips&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span></span>
</div>
</div>
5. Click on Save button and done !
Note:-Replace allbloggingtips With Your Facebook User name.
5. Save your widget.
Now this is most important part. If you missed it the widget will not works.
6. Goto Appearance > Editor
7. Than goto > Header.php
8. Now Place below code just before <head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
9. Click Save.
Now Visit your blog to see it that its working :D. Hope you enjoy the post.
Hey! first, everything go marvelous!!! thanks a lot by the code. But i have a cuestion… how can i do the same but with a twitter teets box?
again, your code was perfect!
see ya!
Well, that is not available for twitter version. Did you tried this method?
Hi Ammar! Wow this is so awesome. I think I like the feel of this widget compare to the ones I saw before. I’m not code savvy but this post is super helpful! Thanks so much! Just put it on my blog.
xx Donah
Sweet Jelly Bean
Thanks , it`s working good. But i want to put left side of my blog. Where should i changed in code.
Search for “float : right” in above code and replace it with left. :)
Let me know if you still face any issue!
Hello Ammar, if i am not wrong this code was originally belong to bloggers. You just customized it for wordpress. Am i right ? This really create an awesome feelings.
This widget was only available for blospot users. But I converted in to WP as well.. Now This is available for both. You can see the blogger version here.
It means i was quite right in this case. Your basically come on wordpress from blogger. its really awesome progress, Congratulation.. for this growth.
Great tutorial Ali,
Was easy to follow and looks great on my blog !
Thanks
Hi. I saw that you have done exactly the same as I did over 1 year ago that is already adapted for WP, please take a look https://wordpress.org/plugins/be-it-facebook-sidetab/ if you guys still have problems with this.
Regards
I think I discovered why it stopped working but would love a work around. I really love your code. I made a post that contained a youtube video and it stopped working. After i removed the post it started working again.
please specify how to put in facebook user name. whenever i am putting in my page name.its generating an error
Let me know whats your facebook page username? I’ll give you new code for this! :)
i’ve put it on my website, and it’s work.. thanks
hi Ammar i liked your way for this facebook like box without plugin so out hosting a/c not much load for other java scripts.
thanks for this code.
You are right bro..
Thanks for visiting and commenting.. :)
I even didn’t add the header code but still my floating facebook like box works.
Thank you for sharing good practices. Good advice is always good to take. Great article, I will try to increase my ranking on Google with these tips.
It’s look like arscode-social-slider-free plugins!
Really impressed by watching your improvement,when you published(25/01/2012) your first slide out facebook like box the number of your facebook fans was 66 and now(11/05/2012) on this version it is 364.Keep going bro.Best of luck….
Yeah ! Glad to know that ;) BTW now total facebook likes are 400+ :P
Thanks for the share Ammar. Can we use HTML 5 like box in that code?
I am not sure about that :( But you can test it and see yourself it works or not
Thanks for the code, I have been wanting a floating box but haven’t been able to find one I like.
Really like this like box, will there be any effect on page loading speed if we add this ?
Not so much ;)