Social media is the best way to get visitors to your blog and Facebook is the most used social networking site. Adding a social gadget to your blog not only help you get visitors but also help visitors to share contents with their friends and other people.
Using Facebook pop up box you let your visitors like your page on Facebook. If you're a blog owner and you don't have a Facebook page then you should make a Facebook page. Facebook page is the best way to let your visitors know that you have published something new on your blog.
Not only it will help your visitors to visit your blog but also it will give you a positive point to your blog that your visitors can have the chance to contact you while they are on Facebook.
Facebook pop up like box also helps you to increase like on your Facebook page.
The box will load after 5 sec the site finish loading. To change this time, change the value in blue
The box will load only the first time a visitor visits your site. To show box on every visit remove this piece of code.
Show us your love by leaving a comment!
Using Facebook pop up box you let your visitors like your page on Facebook. If you're a blog owner and you don't have a Facebook page then you should make a Facebook page. Facebook page is the best way to let your visitors know that you have published something new on your blog.
Not only it will help your visitors to visit your blog but also it will give you a positive point to your blog that your visitors can have the chance to contact you while they are on Facebook.
Facebook pop up like box also helps you to increase like on your Facebook page.
Steps to follow
- Open blogger
- Go to 'Layout' and click 'Add a gadget'
- Choose 'HTML/Javascript gadget'. See the screenshot for better demonstration.
- Copy this code and paste in that gadget.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fbox-background {
display: none;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
#fbox-close {
width: 100%;
height: 100%;
}
#fbox-display {
background: #eaeaea;
border: 5px solid #828282;
width: 340px;
height: 230px;
position: absolute;
top: 32%;
left: 37%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#fbox-button {
float: right;
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
}
#fbox-button:before {
content: "CLOSE";
padding: 5px 8px;
background: #828282;
color: #eaeaea;
font-weight: bold;
font-size: 10px;
font-family: Tahoma;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
color: #aaaaaa;
font-size: 9px;
text-decoration: none;
text-align: center;
padding: 5px;
}
</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_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=YOUR FACEBOOK PAGE URL&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Widget by <a style="padding-left: 0px;" href="http://tutesinside.blogspot.com/2016/09/add-facebook-pop-up-like-box-to-blogger.html" rel="nofollow">Tutes Inside</a></div>
</div>
</div>
- Save gadget and visit your site to check live changes.
Customize your pop up box
The box will load after 5 sec the site finish loading. To change this time, change the value in blue
.delay(5000)
The box will load only the first time a visitor visits your site. To show box on every visit remove this piece of code.
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
Show us your love by leaving a comment!
0 comments:
Don't forget to check 'Notify me' box to get notification of reply.