Blogging Facebook Tutorials

How to add Facebook Like Box Popup for your Blog

Nowadays these social Signals matters a lot in SEO. Many bloggers are working to make it strong in order to rank in Google. Facebook is a great place to drive tons of traffic to your blog within no time. So, In this post I will show you how to setup and Facebook likebox popup to your blog which pops out when people visit your blog.

How to add Facebook Like Box Pop-up: 

  • Goto your Blog Dashboard
  • Then to Template, then click on Edit HTML
  • Now Copy the Below Code and paste it anywhere in body [Between <body> and </body>]
    Recommended to paste it just before </body> tag.

<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(https://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(1000).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=https://www.facebook.com/Techspotz&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>
</div>
</div>

Make sure that you Edit the following:

  • Change my Page link with yours: https://www.facebook.com/Techspotz
  • Remove this if you want to load the popup every time the page loads $.cookie(‘popup_user_login’, ‘yes’, { path: ‘/’, expires: 7 });
  • Edit this to Load after a certain time – delay(1000) [ 1000 = 1 second ] 

About the author

Sasidharan

Sasidharan is The Founder & CEO Of Techspotz, A Blogger Who is Growing Up Very Fast From Chennai, India. He Likes To Write On Any Topic Related To Blogging Such As Tech, Wordpress, VPS, Android, Hacking, Online Tutorials And Computer

Leave a Comment