Floating Facebook Like Box Widget For Your Website

<div dir="ltr" style="text-align: left;" trbidi="on">Are you struggling to <b>get more facebook likes</b>? Add a floating facebook like box to your blog or website.  The widget remains in a fixed position on the right-hand side of your site.  When you hover over the blue facebook image, the like box will then slide and reveal itself using jquery.<br /><br /><div class="separator" style="clear: both; display: none; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik3sesISVRHDdpqr1W9kQyrCRSArV0_0Poj0HOG9WYjKDBZ2P5O1gxrUBnUGg1nd7p121fKytzpOG9X7sIc3skp1a5hQgx6ebb9RAgJ0Csn4cManG9jhMsz0pgJc9mX7UP16tBegbnd7s/s1600/Screen+Shot+2013-11-13+at+2.38.34+AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy_aYKfCgNi5zmVud8wpjE1PwAwNkP0Tv3U2s9VQgTu7wQDiQseU-9SdVDnRgW4HaMnbI0ZzgfvN5780jxu8xVbWL1HGzPeCPuGCj_hYm-s9cBJ0isSFnxrwvXiwSUPXRXG0E1g0ZiMGA/s1600/facebook+widget.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://s19.postimg.org/zbys8g6hf/floating_facebook_widget.png" /></div><h3>View Demo</h3>You can see a demonstration of this facebook widget on the right side of this page. Hover over the facebook image with your mouse. A facebook like box should appear. <br /><a name="more"></a><br /><h3>Add Widget to Your Site</h3><b style="background-color: #ffe599;">Step 1</b><br />Add the following code anywhere in the body section of your template. <br /> <textarea id="styled" name="textarea" onclick="this.focus();this.select();" rows="2" style="height: 134px; width: 569px;"><!--Floating Facebook Widget by www.zen-tek.blogspot.com START--><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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWzgdbrEuFHlfZ3kcTIppvFJ0nD56YD7jQvnC_uMzvP-C8VlKzLJ-jc68TXxKpeqP1ATs1txSV430X_68B_oNizOlfOxyLDIipWkmCJfqp6cyDEYAc1swaxjzoNCRXlup14nRqL3hdrBM/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%2FofficialZentek&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>Widget by :<a href="http://www.zen-tek.blogspot.com"> ZenTek</a></span> </div></div><!--Floating Facebook Widget by www.zen-tek.blogspot.com END-->

<!--Floating Facebook Widget by www.zen-tek.blogspot.com START--><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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWzgdbrEuFHlfZ3kcTIppvFJ0nD56YD7jQvnC_uMzvP-C8VlKzLJ-jc68TXxKpeqP1ATs1txSV430X_68B_oNizOlfOxyLDIipWkmCJfqp6cyDEYAc1swaxjzoNCRXlup14nRqL3hdrBM/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%2FofficialZentek&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>Widget by :<a href="http://www.zen-tek.blogspot.com"> ZenTek</a></span> </div></div><!--Floating Facebook Widget by www.zen-tek.blogspot.com END-->

Step 2
If the floating facbook widget is not working properly after step 1, then you need to add jquery to your site. Follow the instructions below.

1.  Go to Design>Edit HTML
2. Search for <head> and just below it paste the following JQuery code. 

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

How to Customize

Where to find the code?
In order to find the html go to the blogger dashboard>Layout. Click "edit" on the "HTML/Javascript" gadget.

Enter your facebook username
Search for the line of code below and replace officialZentek with your own facebook page username. If you don't have a username you can easily create your own here. facebook.com%2FofficialZentek

Facebook Popup (Like Box Widget)

<div dir="ltr" style="text-align: left;" trbidi="on">Here's a fantastic way to increase facebook likes for your blog or website.  Add this enticing widget to your site and a <b>facebook like box will pop up</b> with the lightbox effect when a user visits your page.  The facebook widget will show up on your page about <span style="background-color: #ffe599;">20 seconds after the page loads</span> (but can be customized).  This is a surefire way to dramatically increase your likes.<br /><br /><div class="separator" style="clear: both; display: none; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi15SJEAbGiS4TrIli9RB9KXWwotF9upmoGugbj9i9ZOTn11E9qMODUvn_oyAWwKhv6IVoToSpKNQJPiaQwLZ91RJu04kQs0CRv75M0Ex8nmpXMEknJFTtMixgpznvb-kthyUt1-iEYCgU/s1600/Screen+Shot+2013-11-04+at+8.42.15+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi15SJEAbGiS4TrIli9RB9KXWwotF9upmoGugbj9i9ZOTn11E9qMODUvn_oyAWwKhv6IVoToSpKNQJPiaQwLZ91RJu04kQs0CRv75M0Ex8nmpXMEknJFTtMixgpznvb-kthyUt1-iEYCgU/s1600/Screen+Shot+2013-11-04+at+8.42.15+PM.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaaPGhWS9Z2Bt2nF-MJoPUXDunI1feSnjJYMFtJYV8kBk9Tc4Xlj5YE6T05ORfeqVyzcYMRfu2mux0AS6c10HKnwzKD4XrBZN9OOYBUMoEaVTrv8aGtIQnlYRrQuJg-ueSe_eFdKiOznA/s1600/facebook+popup+widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtcoXB4ZxPJHKSks4FLDPSD9feqFO5uCK2-oVDMOFwOr2xiTIBQH9soMVlQUIpkRRkdzglItrtg0lKg0V-yy6wQbrt4rSW2NyBnA22ihDGs2idqp6-HjvAS40QQ-UaFLCI4CrZHzz3Ph8/s1600/facebook+popup+widget.png" width="400" /></a></div><h3>Add Widget to Your Site</h3>Add the following code anywhere in the <i>body</i> section of your template. Or simply click the "add to blogger" button for blogspot blogs.  For Wordpress themes, Weebly templates, and Tumblr, you will<br /><br /><a name="more"></a><br /><br />need to manually copy and paste the script into your template.<br /><br /> <textarea id="styled" name="textarea" onclick="this.focus();this.select();" rows="2" style="height: 146px; width: 591px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><style>#fanback { display:none; background:rgba(0,0,0,0.8); width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; } #fan-exit { width:100%; height:100%; } #fanbox { background:white; width:420px; height:270px; position:absolute; top:58%; left:63%; margin:-220px 0 0 -375px; -webkit-box-shadow: inset 0 0 50px 0 #939393; -moz-box-shadow: inset 0 0 50px 0 #939393; box-shadow: inset 0 0 50px 0 #939393; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: -220px 0 0 -375px; } #fanclose { float:right; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMldhgXzAQR5so_CAIC1twAJjjRp9e1nZJJWqDXxrCq1voHBmWAKWK-rx8jACY0SPiQH4at225fXg-iS5iwWmgwz3xFjyAqWHrVvf9mUeWJJbRLpWexgTj2vUnkJLMw2lZK89-8hVtusc/s1600/fanclose.png) repeat; height:15px; padding:20px; position:relative; padding-right:40px; margin-top:-20px; margin-right:-22px; } .remove-borda { height:1px; width:366px; margin:0 auto; background:#F3F3F3; margin-top:16px; position:relative; margin-left:20px; } #linkit,#linkit a.visited,#linkit a,#linkit a:hover { color:#80808B; font-size:10px; margin: 0 auto 5px auto; float:center; } </style> <script type='text/javascript'>//<![CDATA[ jQuery.cookie = function (key, value, options) { // key and at least value given, set cookie... if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; } if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [ encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } // key and possibly options given, get cookie... options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; }; //]]></script><script type='text/javascript'>jQuery(document).ready(function($){ if($.cookie('popup_user_login') != 'yes'){ $('#fanback').delay(20000).fadeIn('medium'); $('#fanclose, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 }); }); </script> <div id='fanback'><div id='fan-exit'></div><div id='fanbox'><div id='fanclose'></div><div class='remove-borda'></div><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php? href=http://www.facebook.com/theblogwidgets&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center><span id="linkit">Powered by <a href="http://morganandmen.com">Morgan&Men SEO Consulting</a> - <a href="http://www.zen-tek.blogspot.com">ZenTek</a></span></center></div></div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><style>#fanback { display:none; background:rgba(0,0,0,0.8); width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; } #fan-exit { width:100%; height:100%; } #fanbox { background:white; width:420px; height:270px; position:absolute; top:58%; left:63%; margin:-220px 0 0 -375px; -webkit-box-shadow: inset 0 0 50px 0 #939393; -moz-box-shadow: inset 0 0 50px 0 #939393; box-shadow: inset 0 0 50px 0 #939393; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: -220px 0 0 -375px; } #fanclose { float:right; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMldhgXzAQR5so_CAIC1twAJjjRp9e1nZJJWqDXxrCq1voHBmWAKWK-rx8jACY0SPiQH4at225fXg-iS5iwWmgwz3xFjyAqWHrVvf9mUeWJJbRLpWexgTj2vUnkJLMw2lZK89-8hVtusc/s1600/fanclose.png) repeat; height:15px; padding:20px; position:relative; padding-right:40px; margin-top:-20px; margin-right:-22px; } .remove-borda { height:1px; width:366px; margin:0 auto; background:#F3F3F3; margin-top:16px; position:relative; margin-left:20px; } #linkit,#linkit a.visited,#linkit a,#linkit a:hover { color:#80808B; font-size:10px; margin: 0 auto 5px auto; float:center; } </style> <script type='text/javascript'>//<![CDATA[ jQuery.cookie = function (key, value, options) { // key and at least value given, set cookie... if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; } if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [ encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } // key and possibly options given, get cookie... options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; }; //]]></script><script type='text/javascript'>jQuery(document).ready(function($){ if($.cookie('popup_user_login') != 'yes'){ $('#fanback').delay(20000).fadeIn('medium'); $('#fanclose, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 }); }); </script> <div id='fanback'><div id='fan-exit'></div><div id='fanbox'><div id='fanclose'></div><div class='remove-borda'></div><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php? href=http://www.facebook.com/theblogwidgets&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center><span id="linkit">Powered by <a href="http://morganandmen.com">Morgan&Men SEO Consulting</a> - <a href="http://www.theblogwidgets.com">Widget</a></span></center></div></div>

How to Customize

Where to find the code?
If you've installed the widget by clicking "Add to Blogger" you'll need to locate the code in order to make customizations. In order to find the html go to the blogger dashboard>Layout. Click "edit" on the "HTML/Javascript" gadget.

Enter your facebook username
Search for http://www.facebook.com/theblogwidgets and replace it with your site's facebook page URL.

Change the 20 Second Time Delay
By default the widget pops up 20 seconds after the page finishes loading.  Search for the code below and change the number 20000 to a greater or lesser number.

1 second = 1000.  10 seconds = 10000. 60 seconds = 60000.
 .delay(20000)

Popup every time the page loads 
By default, the like box widget only shows up the first time the user visits your page.  If you would like the facebook box to popup every time the page loads, then remove this line of code:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

Display only when user visits your homepage
You can do this by surrounding the widget code with these conditional tags below. Go to Template > Edit HTML. Now search for the </body> tag. Place the facebook popup widget right
above this body tag.  Make sure to include the conditional tags below.

<b:if cond='data:page.type == "index"'>REPLACE-WITH-FACEBOOK WIDGET-CODE-HERE </b:if>

Having trouble seeing the facebook widget?

By default, this facebook like box widget is only displayed once every 30 days. You may need to delete your cookies if you would like to see it again.  Or check out the "How to Customize" section above, in order to display the widget every time a user visits your site.

If you're still having trouble with the popup widget, please leave a comment below.  I am happy to help you!

Another Facebook Like Box Widget...

You should also check out the Floating Facebook Like Box.  Conveniently located on the right side of the web page; your visitors will be able to like your facebook page at any time.