Join the list of our 279,000+ subscribers

Obviously Facebook is one of the best ways in the social media to get traffic to your website or blog. It is one of the strategies of Facebook, by making the pages official, traffic will be directed to the blog directly. Al though it is not an official one, at least it must have a huge number of leaks. But the question is how to increase the likes for your Facebook page. Well, here is one of the best methods through which you can increase likes for your Facebook pages with very less effort. All you need to do is to add this Facebook Like Box Pop-Up Widget onto your blog. It will make sure that the visitors to your site will like your page too! You gotta read this to learn how to add FB like box pop-up widget.

Add Facebook Like Box Pop-Up Widget

Just copy the following code and paste it anywhere in the body section of your template, or you can use html/javascript in the layout for blogger. You have to edit it manually if it is wordpress, tumblr and for other platforms.

<!— Facebook Popup Widget START –><!— Brought to you by www.techhug.net —>
<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%;
}
#TechHug{
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;
}
#techhug {
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=’TechHug’>
<div id=’TH’>
</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/techhug.net&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 <a href=”techhug.net”>TechHug</a> – <a href=”https://techhug.net/2014/06/how-to-add-facebook-popout-like-box-in.html”>FB Like Box Popup Widget</a></span></center>
</div>
</div>
<!— Facebook Popup Widget END.  –>

Customization:

Search for http://www.facebook.com/ and replace it with your site’s FB URL.

Change the second time delay

The widget will pop up for 10 seconds after loading the page. You have to search for the code written below and change the numebr to 10000 more or less. Presicely, 1 second = 1000.60 seconds = 60000

Popup every time the page loads

Remove this line from the code if you would like the Facebook box to pop up everytime the page loads.

$.cookie(‘popup_user’, ‘yes’, { path: ‘/’, expires: 7 });

I recommend you not to make your readers annoyed with pop-ups all the time they reload the page. Your first objective should always be maintaining a good relation with likes in Facebook. It is good to maintain better intervals in window pop-ups. Try this and comment if you have any issues regarding the topic covered.