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!
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 https://tektrunk.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%;
}
#Tektrunk {
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;
}
#Trunk {
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');
$('#Trunk, #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='Tektrunk'>
<div id='Trunk'>
</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/tektrunk&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 TekTrunk -
<a href="https://tektrunk.com/how-to-add-facebook-like-box-pop-up-widget-on-your-blog-website/">
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/tektrunk 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.
How to add a Facebook like box pop-up on WordPress
Starting a WordPress blog is more common than ever and this makes adding extra functionality, like Facebook like boxes even easier. Instead of messing around with any kind of code or programming, all you have to do is install a plugin. Plugins are free and add extra features to your WordPress blog. For this purpose, we’d recommend the “Facebook Like Box” plugin, you can find it here for free.
Try it and comment below if you have any doubts or problems regarding it! Have fun!
