Recently we shared simple yet stylish floating facebook like box widget. Now we came with Another New Floating Facebook Like Box Widget For Blogger ! This will Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. This will help you to increase facebook likes. You just need to put small code to your blogger blog. Currently this widget is only for Bloggeer/Blogspot blogs. We will soon share about WordPress in our next post. 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 For Blogger?
Add Floating Facebook Like Box Widget To Blogger !
- Go to Design > Page Elements.
- Click Add A Gadget.
- In Add A Gadget window, select the HTML/Javascript .
- Paste the following code inside it,
<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 Page URL or User name.
What’s Next !
Visit your Blog to see it floating facebook like box at the right side of your webpage. I hope this widget surely helps you in increasing number of your Facebook Likes. The widget code is customized and improved by Ammar.
awesome buddy , it will make my blog more beautiful but i have question will it increase page loading speed because heavy java script is installed in it and my blog is already having few but important java scripts.
not working n my blog. my blog is http://swaskitchen.blogspot.com
A code is missing from your blog. Go to edit template and paste below code after <head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
It doesn’t work on my blog. It was working some days ago but suddenly it stops floating.
There must be due to some other/new script that you’ve added..
Hi Ammar, I have seen several floating like box widget but this one is outstanding. Ammar thanks for sharing this
Hello,
can i use this script on WordPress Engine?
for WordPress Please see -> https://allbloggingtips.com/floating-facebook-like-box-for-wordpress/
The Error says
No data received
Unable to load the webpage because the server sent no data.
Here are some suggestions:
Reload this webpage later.
Error 324 (net::ERR_EMPTY_RESPONSE): The server closed the connection without sending any data.
what should i do?
Can you send us screenshot? please!
it looks so nice. i just got ur website and it seems very good.
this widget background seems transparent which does not look good. so how to remove its transparency?
This widget background is not transparent. :) Its white background..
have a look at my blog. its transparent. :)
For those who are facing problem after implementing above code please add below code into your HTML page above closing head
1. Sign in to Blogger
2. Go to your Dashboard>Design>Edit HTML
3. Add this code above the closing tag in your HTML file:
My blog could not see the facebook tab.
http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png.
Why? I try but not solution.
Pl help
I visited your blog and its working fine here :)
sir i paste above the code in html java script but it is not found and not suuport on my blog
plz sent simple code for to my mail
thank you sir
Hi,
This code is working find on almost all blogspot blogs :) Just check again your site setting. !
Ohhh, thank you! I didn’t know that you already have a Twitter Widget! Thanks a lot! :)))))
nice facebook like box dude, i loving it for my one of blogspot blog.
anyway thanks for this.
Welcome Pooja ;)
You have customized it very nice.
I like the border of the widget. Looks super cool ……..
Awesome work bro :)
Glad you like it :)
Yes You Customize It Very Specially Border Color Make This Widget Very Cool :)
This is awesome! I was looking for this for quite some time. Thank you very much! Now I have one more request if I may ask? Could you give me this same widget but for Twitter? Cause I’ve seen websites with this same floating widget but for Twitter. Thanks in advance!
Glad you like that widget :D We will soon provide you another floating twitter follower widget box till than check it out Floating Recent Tweets Widget For Blogger
sir,
used the code in my website but for my facebook username it does not work but when i tried for other it worked my username is- nimtdewas
it shows error “Could not retrieve id for the specified page. Please verify correct href was passed in.”
Hi Sunjay,
It works for PAGES only. You can’t like anyone’s profile ;) First go and create Facebook page than get a username. And than replace allbloggingtips to your page. It works :D