Facebook Popup Widget with Lightbox Effect

Posted On // 37 comments


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(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/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.

37 comments

Dilip Yadav Author
5 May 2013 at 06:47

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

Reply
Hiring Camp Author
5 July 2013 at 21:45

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

Reply
6 July 2013 at 00:34

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]

Reply
Lucky Singh Author
7 July 2013 at 11:21

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

Reply
Yassine Ifis Author
14 July 2013 at 15:28

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

Reply
15 July 2013 at 09:39

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]

Reply
MHnews Author
18 July 2013 at 01:14

its not working in my site please help me

Reply
18 July 2013 at 06:20

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

Reply
22 July 2013 at 04:47

its not working for me

Reply
22 July 2013 at 05:34

I have updated the code please check it out.

Reply
Bulatan Author
22 July 2013 at 19:04

Can I replaced facebook link with image?

Reply
Bulatan Author
22 July 2013 at 19:08

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

HOW?

tq

Reply
23 July 2013 at 07:13

Yes you can !

Reply
23 July 2013 at 07:17

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.

Reply
Manu Author
8 August 2013 at 00:52

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

Reply
8 August 2013 at 06:54

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

Reply
Manu Author
9 August 2013 at 05:37

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.

Reply
9 August 2013 at 20:03

I checked your blog and the widget was working properly.

Reply
11 August 2013 at 10:58

nice work good

Reply
Rajesh Kuchan Author
12 August 2013 at 19:34

worked ... coool

Reply
Aditya Sharma Author
28 August 2013 at 05:45

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

Reply
29 August 2013 at 02:06

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

Reply
19 October 2013 at 06:25

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

Reply
27 October 2013 at 21:46

hello and thank you for the code!
but, i need help.
i want to when people see the page, they need to click on 'like' botton to exit from the popup.
how can i do it?

thank you very much and have a nice day :)

Reply
24 November 2013 at 04:18

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

Reply
Jide Salu Author
27 November 2013 at 13:18

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

Reply
Jide Salu Author
27 November 2013 at 13:28

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.

Reply
28 November 2013 at 03:07

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

Reply
Jide Salu Author
1 December 2013 at 14:08

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

Reply
Raj Chauhan Author
13 January 2014 at 00:05

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

Reply
13 January 2014 at 08:27

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

Reply
11 March 2014 at 06:42

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

Reply
Reece Taylor Author
24 March 2014 at 17:47

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

Reply
21 May 2014 at 04:35

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

Reply
13 July 2014 at 17:56

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?

Reply
vfun co Author
30 November 2014 at 03:20

How Can i Add in wordpess blogs

Reply
santanu achar Author
16 August 2015 at 08:10

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Facebook Popup Widget with Lightbox Effect |