Facebook, being one of the most popular social network, is a great place for bloggers to have their blog popular and get their topics directly to their subscribers at the moment of publishing. This has got a great role to play in increasing the blog traffic. You can just get your blog right in the newsfeed of their Facebook account. All you have to do is having them liked your page.
Pop up like box is,in a manner, compelling visitors to like your page eventhough it is not a compelsion. Having said that, don't make them hate your blog just because the pop up is too disturbing. The old classy like box placed in side bars which dont help in increasing FB likes so fast. But for beginners, this could be a great way to have more people following you. Hoping that rang some bells in you, let's go to the installation steps.
Pop up like box is,in a manner, compelling visitors to like your page eventhough it is not a compelsion. Having said that, don't make them hate your blog just because the pop up is too disturbing. The old classy like box placed in side bars which dont help in increasing FB likes so fast. But for beginners, this could be a great way to have more people following you. Hoping that rang some bells in you, let's go to the installation steps.
HOW TO ADD THE FACEBOOK POP UP LIKE BOX
- Log in to your Blogger account.
- Open the Layout tab placed on the left.
- Click on "Add a gadget" in the pop up appeared.
- Select "HTML/Javascript" Paste the below code in to the text box displayed.
<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>
<br />
<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=https://www.facebook.com/YOUR_PAGE&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false" style="background: #fff; border: none; height: 200px; overflow: hidden; width: 339px;"></iframe>
<br />
<div id="fbox-link">
Powered by <a href="http://boostweb.blogspot.com/" rel="nofollow" style="padding-left: 0px;">BoostWEB</a></div>
</div>
</div>
IMPORTANT:
- Change "YOUR_PAGE" with you Facebook page's url.
- Replace 5000 in .delay(5000) to change the time when the pop up has to be displayed. In the above code it will be displayed after 5 seconds.
- Click on "Save"
- Click on "Save arrangement"
- Now, The pop up starts displaying to the viewers of your site.
how to add facebook like box pop up in blogger widget fast loading facebook like box pop up widget installation steps how to add facebook like box in blogger add facebook pop up like box wid get in blogger steps
Post a Comment