
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.