How To Add Facebook Popup Like Box For Blogger ?

Nowadays Facebook Has Become A Great Social Site Through Which You Can Advertise Your Goods Ads Blogs Etc. More Than 1.3 Billion People Used Facebook Daily.You can Get New Readers From The Facebook.

So,As Being The Blog Designer You Must Take Advantage Of This Social Website Facebook.You Must Interrogate Facebook On Blogger. Facebook Is Worldwide So You Can Get Lots Of Readers Through That.

Sharing Your Site Content Using Facebook Like Box Is Just One Idea That Can Increase Traffic To Your Blog And Get New Readers.Adding Facebook Like Box Reduces Your Individual Workload.

When Someone Reads Your Site Content And Love It They Will Share It To Their Fans Followers Setting Off A Viral Reaction.The First Step To Make This A Reality Is To Make This Change In Your Site.So, Now I Will Show You Some Steps Which Will Help You In Taking This Opportunities.

How To Add Facebook Popup Like Box To Blogger ??

• 1. Login To Blogger Go To Blogger Dashboard- Go To Layout And Click Add Gadget
• 2. Choose Html/Java Script
• 3. Copy The Below Code Into The Empty 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/fastmindhackers&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://helplogger.blogspot.com" rel="nofollow">Helplogger</a></div>
</div>
</div>

• .Click 'Save' To Add To Your Blog. That's All

Editing

• 1. After Adding The Code Replace The Word In Blue
•   https://www.facebook.com/fastmindhackers With Your Facebook Url
• The Box Will Appear 5 Seconds After The Page Loads If You Want To Change The Time Change 5000 To A Greater Or Lesser Number

.delay(5000)

• 
  
• .By Default The Like Box Only Appear When User Visit For First Time.If You Like To Appear Facebook Like Box Every Time It reloads Remove This Line

$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

• 
  
• .If You Want To Show Only When User Visit Your Homepage Go To Template Click Edit HTML And Search Clicking Any Where In The Box By pressing CTRL+F  For This Tag 

</body>

• 
  
• Paste The Facebook Popup Widget Right Above The Body Tag Make Sure To Include Below Tag

&lt;b:if cond='data:page.type == "index"'&gt;ADD THE FACEBOOK WIDGET CODE HERE &lt;/b:if&gt;

After Doing All The Steps Carefully You Can Test Whether It Works Or Not. If It Doesn't Work You May Need To Delete Cookies From Your Browser

Once This Widget Is Added You Can Get High Rank Of Traffic To Your Blog. Your All Hard Work Will Be Useful.