Facebook popup like box for website with timer

 

Introduction

Now a days it is very common to attach your website with social media. Because now-a-days almost everyone is connected to social media. And website reputation is being compared with how many facebook likes website have or how many followers website have on twitter. If your site have so many like then people will trust your site. That's why these days everyone want to connect their website with the social media website like Facebook, Google+ or Twitter. These social networking sites provides so many ways to the website owners to connect their website with their sites.

So, In this article i will describe how to add jquery Facebook popup like box in your website  with timer. It will popup after your suggestive time. You will have to just pass the time in seconds and it will popup after that time.

Just Add the following Code for Facebook popup like box :

Open you .aspx or .html page and just add the following code in the head section of your page.

For ex. <head> your code goes here </head>

   <!-- Facebook plugin strarts from here -->
<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'>
// 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 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 });
    });

<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/stepcoder&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>
 <!-- Facebook plugin ends here -->

Just Find the StepCoder form the following line of code and replace it with the name of your facebook page.

src='//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/stepcoder&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'

You can get the name of your facebook page by going on to the page. And just note the url after facebook.com/yourpagename. In my case it is like facebook.com/stepcoder.

This popup will show after every 20 seconds. If you want to increase or decrease the time just find the below line of code. And Increase of decrease time as per you need.

 $('#fanback').delay(20000).fadeIn('medium');

Hope this will help you.

ScreenShot

Give your Valuable Comments.
comments powered by Disqus
 
Follow me on twitter
About Me
Harpreet Singh
I began programming with C++ when i was 17. Then at the middle of my study .NET came. Then I began to read C# and VB.NET. By the time i learnt SQL and ASP.NET, and developed some websites such as news portals that are active now. Currently i am running my own Software company.
More Articles