Skip to main content

Facebook Popup (Like Box Widget) With Time Delay

Facebook Popup Like Box Widget With Light box and Time Delay

If you are looking on how to increase your blog social media connection you can use widgets that will expose it to your reader. One of the best way is to use Facebook like box will pop up with the lightbox effect. This facebook pop up is not annoying because of its ability to detect its user cookies. It won't open when it is already closed. It has a time delay also to avoid visitors leaving your blog. Just set it in any way you want and increase your followers/likes easily.

Add Widget to Your Site

Add the following code anywhere in any widget/HTML box.
Go To layout and add gadget--> HTML/JavaScritp Box Paste all the below code -> then save

<script src='' type='text/javascript'></script>
#fanback {
#fan-exit {
#fanbox {
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 {
background:url( repeat;
.remove-borda {
margin:0 auto;
#linkit a.visited,#linkit a,#linkit a:hover {
margin: 0 auto 5px auto;
<a href="" target="_blank" title="Blogger Tips and Tricks"><img src="" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="" target="_blank" title="Latest Tips And Tricks"><img src="" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="" target="_blank" title="virtual credit cards"><img src="" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>

<script type='text/javascript'>
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 : '', ? '; secure' : ''

// 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 type='text/javascript'>
if($.cookie('popup_user_login') != 'yes'){
$('#fanclose, #fan-exit').click(function(){
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

<div id='fanback'>
<div id='fan-exit'>
<div id='fanbox'>
<div id='fanclose'>
<div class='remove-borda'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//


style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
<span id="linkit"><a href="">Facebook Popup Widget</a></span></center>

How to Customize

  • Search for href= and replace it with your site's facebook page URL.
  • Change the 30 Second Time Delay by searching for the code below and changing the number 30000 to a greater or lesser number.
    1 second = 1000.  10 seconds = 10000. 60 seconds = 60000.

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 evertime the page loads, then remove this line of code:

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

Display facebook widget 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!

source: jam is dead policeman in payatas shoot a gun Passers for The Civil Service Exam- Paper and Pencil Test nbi online registration


  1. I can't copy your code from this page :/

  2. Hi Hanne I already updated it... just be sure to copy everything it is scrollbox

  3. hi does this only work on blog websites like wordpress etc..

    or any website?

    just put it into the body right?

  4. @James it works on every blogs.. just put it inside HTML widget box..

  5. What if a visitor already like the page? still it showed every 30 days to him/her?

  6. @bedjo yes it depends on what setting you put in days of cookies...

  7. how to remove the X (close) icon on this pop up ? I have used this pop up.
    Help me please

  8. its not popping...i don't know why

  9. @Timor clean your cookies it will only pop once...

  10. is this possible for this pop up to appear only to those who didn't liked it already, I mean it should check the cookie and see if the visitor has signed in to his fb account and if he already had liked the page then this pop up doesn't show.

  11. How can I use this widget in Sharepoint platform?

  12. it is popping but not loading... do you have an idea?

  13. @Defne Y. I tried it just now and its good... its not loading probably because the facepage page you type is wrong or not functioning.

  14. i have checked it many times, but nothing it normal that right after my link is coming an "&" ?

  15. have edited it wrong...
    First copy all the code don't change anything yet then check if it will pop up correctly.. then delete all your cookies... then simple change theblogger911 to blogcocoonofdesign thats it. dont edit anything.

  16. You can get your personal code here just put it inside HTML I edited it for you with your facebook page.

  17. @Defne Its working on your blog now. Congrats :D

  18. ok one last question again :D it is just popping up one time, if i want it to pop up again i have to delete my cookies, so now i just have to delete this line: $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 }); in the html code which you have send me ?

  19. @Defne you're right...but it will pop up again and again every time you will reload your blog.

  20. Hey @Garywal, could I also send you the link to my FB and ask you to kindly generate the right HTML. With the cookie line deleted. I seem to make not make it work :)

  21. I have use this code in my blogger website. But It can't work. please tell me what can I do?

  22. Men i have try out the codes but it doesnt work, i even paste the code you generate for Define Y to see if her page will pop up on my blog so as i can just change the URL but it doesnt what might be the Problem?

  23. @rkghosh I tried it and still working sure to copy all the codes.

  24. it works perfectly. thank you.:X

  25. How can i make this to pop up every weeks insted of every 30 days?

  26. wonderful....i went through many blogs but none of them explained properly....
    u hv placed the codes with numbered lines..thats really great..i could not find like this in other blogs

    the only think to ask u : how to diasable tha pop up for those who already liked it ?
    plz help me...


Post a Comment

Popular posts from this blog

How To Add HTML Contact Form for Blogger Blogs

Our problem in creating a contact form is that you don't want third party contact form cause it will burden your loading page and if you want to give your reader an instant contact form but don't want to show your email, this HTML form will help you with your problem

You can create a simple form, as displayed below, to enable your visitors to send you comments, questions or whatever you'd like.

1.Log in to your dashboard--> layout

2.Click on "Add a Gadget".

Now Select "HTML/Java Sricpt"

3.Copy and Paste below code into it.
<FORM action="mailto:[email protected]" method="post" enctype="text/plain"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%"><TR><TD width="30%"><DIV align="right"><B>Name:</B></DIV></TD><TD width="70%"><INPUT type="text" name="name" s…

How to Add Random Post Widget to blogger Blogs

Instead of creating new post everyday to reduce your bounce rate, many respected bloggers are suggesting to sell your old posts to readers. We all know that many of our posts are useful even time passed. today I am going to make a tutorial on how to add a beautiful random post and reduce your bounce rate also to promote your older posts

Hows Random Posts.
Doesn’t add load to your page loading
Shows the Name Of The Author.
Shows the number of comments.
Summary Showing Enabled.
CSS Added.
Hover effect for images. Installing It On Your Blog Go to blogger > Open layout tab
Now Add A new HTML/JavaScript widgetGive any title you want [ eg: Being Viewed, Recently Viewed, Now Viewing etc. Its up to you. ].
Now paste the code given below :  <style type="text/css"> .recent_post_content{width:100%;} .recent_post_content_item {filter: alpha(opacity=80);opacity: 0.8;} .recent_post_content img {width:45px;height:45px;background-position: center;margin:7px;padding: 2px;border:#888 solid th…

High PageRank Do-Follow Forums List (606)

Besides from getting your answers to unanswerable queries, the good thing of do-follow forums is to create a good back links through their High Page rank pages on Google, creating your pointing to your site makes your blog grows faster in ranking,

Now a days it is very hard to find do-follow link website because they are making their site as no-follow, like the wiki, it is before a do-follow site but since many SEO experts use wiki as spam they control it and made it no-follow, so now I am giving you a list of do-follow and high ranking sites that you can use to make your blog popular.

Its your tactics on how to create your links on this site, but remember not to spam cause Google might hit you. :)

Here are the list enjoy