How to Add Facebook Like Box Pop-Up Widget on your Blog/ Website

Facebook is one of the best ways to get traffic to your website or blog. So, Official Facebook fan pages are obvious for your blogs. Most of you might be wondering how to increase the likes and thereby organic reach to your page. Here is one method through which you can easily increase your FB Page Likes. Add this wonderful Facebook Like Box Pop-Up Widget onto your blog. This will make sure that almost all the visitors to your site Like your Page too! Read the entire article to learn how to add FB like box pop-up widget and also edit it!

 

 

Add Facebook Like Box Pop-Up widget

Copy the following code and paste it anywhere in the body section of your template or simply use html/javascript in the layout for blogger. For wordpress, tumblr and others, you need to manually edit the template.

<!-- Facebook Popup Widget START --><!-- Brought to you by www.Burptech.com  -->
<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%;
}
#Burptech {
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;
}
#Burp {
float:right;
cursor:pointer;
background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/Burp.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');
$('#Burp, #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='Burptech'>
<div id='Burp'>
</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/burptech&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 Burptech - <a href="http://www.burptech.com/2014/03/add-facebook-like-popup.html">FB Like Box widget</a></span></center>
</div>
</div>
<!-- Facebook Popup Widget END.  -->

 

Customization:

Enter your Facebook Page Name
Search for http://www.facebook.com/burptech and replace it with your site’s facebook page URL.

Change the 10 Second Time Delay
The widget pops up 10 seconds after the page finishes loading. Search for the code below and change the number 10000 to a greater or lesser number.
1 second = 1000. 60 seconds = 60000.

NOTE: The pop-up appears only once in every 30days. If you want the pop-up to reappear, clear your cache and cookies. 

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:

I personally recommend you guys not to annoy your readers with pop-ups everytime they reload the page. Maintaining good relation should be your first objective and FB likes comes after that! So, decide at what intervals you want to use the pop-up window.
Try it and comment below if you have any doubts or problems regarding it! Have fun!

Comments

  1. Thank you for every other informative site. The place else could I get that kind of information written in such an ideal approach? I have a undertaking that I am just now operating on, and I have been on the glance out for such information.

  2. Somebody necessarily help to make significantly articles I would state. That is the very first time I frequented your web page and thus far? I amazed with the research you made to make this particular submit incredible. Fantastic process!

  3. I will immediately seize your rss feed as I can’t to find your email subscription link or e-newsletter service. Do you have any? Please permit me recognize in order that I could subscribe. Thanks.

  4. I have been surfing on-line greater than 3 hours as of late, yet I never found any fascinating article like yours. It’s beautiful worth sufficient for me. In my opinion, if all website owners and bloggers made good content as you probably did, the net will probably be much more useful than ever before.

  5. Your style is so unique compared to other folks I have read stuff from.
    Thank you for posting when you have the opportunity, Guess
    I will just bookmark this page.

  6. Its like you read my mind! You appear to understand so much about this, like you wrote the ebook in it or something. I believe that you simply could do with a few percent to force the message home a bit, however other than that, that is magnificent blog. A fantastic read. I’ll certainly be back.

  7. Hello there. Today the use of msn. This is an very well prepared content. We’re guaranteed to book mark them plus revisit read through additional of one’s beneficial facts. Just publish. I am going to undoubtedly come back.

  8. My programmer is trying to persuade me to move to .net from PHP.
    I have always disliked the idea because of the expenses.
    But he’s tryiong none the less. I’ve been using Movable-type on a number of
    websites for about a year and am worried about switching to another
    platform. I have heard very good things about blogengine.net.

    Is there a way I can import all my wordpress content into
    it? Any help would be greatly appreciated!

  9. michael says:

    What’s up, I would like to subscribe for this weblog to obtain newest updates, thus where can i do it please help out.

Speak Your Mind

*