Top Ad unit 728 × 90

Friendly Facebook Popup Like Box Widget for Blogger

Today in this post you will find an Awesome Looking Facebook Popup Like Box Widget for Blogger blog, if you are blogspot user then you should read the whole post. In previous articles i have shared many blogspot Widgets including Facebook Simple Like Box and Facebook Pop-up Like Box for blogger, but this one is best because it is very cool having fully professional looking design which is very friendly and it will surely force visitors of your blog to like your website and increase the business, value and customer of you site with a friendly manner. As you know now a day social media sites are plating an important role in Off Page Search Engine Optimization, so you can't ignore this big deal to attract Search Engines and more Customers to your website. Many Webmasters including newbies and Pro bloggers have been using many Social Media Sharing sites to boost their blog's traffic, Crawl rate and DA (Domain Authority).

Facebook that is also known as fb is best of one leading social media site having millions of daily active users on it from all over the world with Page Rank 9 on Google. If your blog has lots of FB Likes and shares then it is 100% true that your site will get surely get huge traffic and value on the internet world. Because the value of more fans will help you to improve presence of your site on search engines. So for increasing the fb fans of your website you should add a Facebook like widget to your blogger blog, but if that widget has rich with popup facility that popup first to your user whenever visitor visit your website then more chances to get more likes.

Facebook Popup Like Widget for Blogger

Adding Best Facebook Popup Like Box to Blogger

This is the best Facebook Popup Like Box for Blogger ever i have seen, because it has friendly looking structure that covers with smoothly light gray colored border with appropriate size. It is build using light weight coding that does not harm your site's performance and SEO ranking, because if you site loads slowly then Google will surely rank down your blog for this, So you need not worry about that. Okay come to the topic, now we will learn about inserting gadget code in your blogspot log.

1. Go to your Blogger Dashboard >> Layout, click on Add a Gadget and the scroll down and select "HTML/JavaScript"
2. Now copy the below piece of code and paste it into HTML/JavaScript blank box
<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=https://www.facebook.com/bloggercell&width=402&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">Powered by <a style="padding-left: 0px;" href="http://www.bloggercell.com" rel="nofollow">BloggerCell</a></div>
</div>
</div>
Now its time to customize the gadget according to your desire
✼ Replace https://www.facebook.com/bloggercell with your own Facebook page URL
✼ By default the gadget appears after the page finishes loading. But if you want to change the default delay then simply change the 5000 to any desire number. you can search find it by searching the below code.
Note: 5000 means 5 seconds, if you want this gadget to load in 3 seconds then simply change it to 3000.
.delay(5000)
✼ This fb like box only shows up the first time the user visits your web page. If you want the Facebook widget box to pop-up every time the page loads, then simply remove the below line of code:
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
✼ If you would like to display the gadget only whenever user visits your homepage, then follow the below instructions:

1. Go to Template >> Edit HTML, now search for </body>
2. Now paste the Facebook popup widget box right above the body tag and kindly make sure that you have included the conditional tags below:
&lt;b:if cond='data:page.type == "index"'&gt;Kindly Add The Facebook Widget Code Here &lt;/b:if&gt;
✼ After completing the required task, just click on save button to save your settings

Now you have successfully added Facebook Popup Like Box Widget to Blogger.

If you have any query or suggestion in your mind then do not be hesitate just conversation with me by drop your comment in below comment section. If you have like this cool style Facebook Popup Like Box Widget for blogger then kindly share it with your friends and colleagues on social media sharing sites.
Friendly Facebook Popup Like Box Widget for Blogger Reviewed by Unknown on 10:15 am Rating: 5

1 comment:

All Rights Reserved. www.BloggerCell.com © 2014-2015
Follow my blog with Bloglovin - Do not reproduce any article without author's permission.

Contact Form

Name

Email *

Message *

Powered by Blogger.