Friendly Facebook Popup Like Box Widget for Blogger|stock rom go to rompure.com

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.

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.

How to add Facebook Popup Like Box to Blogger

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.js' type='text/javascript'></script>

HTML CODE :

<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/your-page-username&width=330&height=220&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 330px; height: 220px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://solvelogger.blogspot.com" rel="nofollow">Solvelogger</a></div>
</div>
</div>

3. Save it.

Now its time to customize the gadget according to your desire

✼ Replace https://www.facebook.com/solvelogger 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:

1<b:if cond='data:page.type == "index"'>Kindly Add The Facebook Widget Code Here </b:if>

3. 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

So this was our guide on Friendly Facebook Popup Like Box Widget for Blogger , I hope the methods given above helped you.