Facebook Popup Widget with Lightbox Effect



Today I am going to show how you can add a Facebook Popup widget for Blogger. This widget comes with Lightbox effect and looks attractive. The popup which appears is a one time popup i.e. the popup will just come one time and not in every page of your blog.

The demo of this widget can be seen by clicking below button.


Once you have seen the demo, below is the step on how you can add this Facebook Popup widget with lightbox effect to your blogger blog.



Adding the HTML/CSS/JavaScript in the Gadget


Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code in the box.

<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/AVvXsEigWu1SGB4LLBQxOy2GkMwx4bmI2LPz_kztb4h4NOJkifkB7bJY6vNzN5UivQXNomkhPr4ZrvOJKwzT2fQWJKD-DoJ-WrPWllAIy-__1iKOiSruA67jFhXpaLX2jhYsFAE_eTiulmINw_Ws/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;
}
</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(100).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/AllBloggerTricks&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div></div>

After adding the code change AllBloggerTricks to your desired page URL. Save the Widget and after that Save the Template. Thats it, you are done now. Now you and your visitors can see this Popup Facebook widget in your blog.

36 comments:

  1. Hey dude can i get you template pls. i will keep link of yours at footer.??? tell me????? can mail me parallelblogging@gmail.com

    ReplyDelete
  2. hi i am really impressed with this facebook pop up box with light effects.
    could you please tell me how to make this box to show everytime on every page when i refresh the page.
    looking for a quick response


    Thanks

    ReplyDelete
    Replies
    1. Hi ! Thats quite simple. Just remove the below given code and save the widget. After that the box will come everytime the page is refreshed.
      [pre]
      $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
      [/pre]

      Delete
  3. its awesome dude, but can you you send me the code by which it appears only at click. my email is sr5060il@gmail.com

    ReplyDelete
  4. hii Dhiraj it didn't work whit me..can you tell me why

    ReplyDelete
    Replies
    1. It can possibly be because of one reason i.e. your blog doesn't has Jquery plugin. To add it just add the below given piece of code at the top of the code which is given above in the post.

      [pre]< script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'>< /script>[/pre]

      Delete
  5. its not working in my site please help me

    ReplyDelete
    Replies
    1. You may have not added the Jquery plugin please check the comment which is just above yours.

      Delete
  6. Replies
    1. I have updated the code please check it out.

      Delete
  7. Can I replaced facebook link with image?

    ReplyDelete
  8. I want this pop up always show when refreshed only at HOME.

    HOW?

    tq

    ReplyDelete
  9. To do so first of all remove the below code from the above given code

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

    Secondly add <b:if cond='data:blog.pageType == "index"'> at the beginning of the code and </b:if> at the ending.

    ReplyDelete
  10. hi my dear friend i really like this fb pop up box .. to make this box to show everytime on every page when i refresh the page.
    i removed this code as you said $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
    and add this code < script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'>< /script>
    but it is still not working please help me

    ReplyDelete
    Replies
    1. I would suggest you to add the above updated code and just remove
      [pre]
      $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 }); [/pre]

      Delete
    2. Hi Dhiraj this code is not working on my blog what could be the reason.my blog is www.fresherscab.blogspot.in you can check it.
      Please help me my friend.

      Delete
    3. I checked your blog and the widget was working properly.

      Delete
  11. not working on my blog
    pls check and help
    url-hacksndmods.blogspot.com

    ReplyDelete
    Replies
    1. Its working absolutely fine. I would request you to check your blog again.

      Delete
  12. can i use follow button of facebook in light box??/

    ReplyDelete
  13. i want to update this code in word press site then at which place i need to put this code?

    ReplyDelete
  14. Hello Dhiraj Barnwal, I stumbled across your blog and I must say I am impressed because you take time to respond to your readers. Well done.

    I also need your help please. I have posted the widget and also included the Jquery plugin. Still, I am unable to see the FB pop up. Please help. What am I doing wrong. I will appreciate a quick response please.

    My blog is http://www.jsalu.blogspot.co.uk

    ReplyDelete
  15. Apologies for reposting as I forgot to tick the notify button.

    Hi Dhiraj Barnwal, I stumbled across this very useful blog of yours as all attempts to include FB pop widget picked up from other sites hasn't worked. I must say I had hope because you took time to answer your readers questions and offered solutions.
    I also need your help please. What am' I doing wrong as I have pasted the widget plus the Jquery plugin and yet, I am unable to see the widget pop up.

    Dhiraj Barnwal, what am' I doing wrong?

    My blog is http://www.jsalu.blogspot.co.uk

    Many thanks for your anticipated assistance.

    ReplyDelete
    Replies
    1. Well I can see the popup without any problem. Have you tried opening your blog with another browser ?

      Delete
  16. Thanks Dhiraj for your response. yes I have tried another browser. I can see the FB box without my FB details. Any other suggestions?

    ReplyDelete
  17. Thanks dhiraj. it's nice thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks

    ReplyDelete
  18. hi how are you i set it but not working plz check my bloge
    http://pakistaniposts1.blogspot.com/

    ReplyDelete
  19. Really Awesome Work "" Dhiraj Barnwal "" very use for everyone perfectly work on my site
    http://www.atozinfo4all.in

    ReplyDelete
  20. I removed the code from my website COMPLETELY but it's still trying to load "fanclose.png" ??

    ReplyDelete
  21. Hello and thank you for the code!

    Perfectly work on my blog

    But I want this pop up always show when refreshed only at HOME.

    Could you please explain what to do?

    Thanks

    ReplyDelete
  22. Hello Friends, I would like to know how come That Works From The Cookie That From "expires: 7" In applying? are minutes, hours? I Want Every 1 Hour Have To Meet As appears?

    ReplyDelete
  23. Nice. http://mrcompose.blogspot.com

    ReplyDelete