Add Facebook Popup Like Box in Blogger

Facebook has turned into the main online networking administration on the Internet playing host to more than 1.3 billion clients; of those, 800 million login to their dashboard bolsters at any rate once a day. On account of the limitless number of dynamic clients on administrations like Facebook, getting new perusers as a blogger or substance supplier has ended up less demanding than at any other time in recent memory.

Demo: How to Add Facebook Popup Like Box Widget In Blogger

With a specific end goal to create a powerful advanced battle, you totally must exploit social networking by doing things like coordinating Facebook on Blogger. Email advertising can be valuable, yet it accompanies confinements that could restrain your blog's potential. Maybe the most huge issue is that messages don't accompany a face or identity like Facebook does.

Also Read: Add Facebook Pop Like Box With Timer In Blogger


Think about a period when you got an email in you inbox from somebody you didn't have the foggiest idea. Where you slanted to open it or did you send it right to the garbage organizer? In the event that its your first prologue to new buyer, they basically don't know who you are, what you need, and how you got their email. This sets off a starting breakdown of any kind of trust that may have created. The notoriety of email showcasing is further crumbled with a study done by Kaspersky Lab, an Internet research firm. They evaluate that around 70% of every last one of messages sent on the planet are spam.

Also Read: How To Add Facebook Pop-Up Like Box With Images

Imparting site substance utilizing a Facebook Like Box is only one of numerous methods that can produce a standard stream of activity from a differing demographic that may have been beforehand distant. Adding a Facebook Like Box to your site serves to decreases your individual workload, and rather appropriates that capacity just as among your perusers.

When somebody peruses your substance and admires the sort of work that you deliver, they'll be willing to impart that data to their adherents and fans, setting off a viral response. The principal step important to making this a the truth is to roll out this improvement to your site. These next few stages will give you a snappy and simple guide on the best way to include a 'Like Box' to your Blogger webpage with the goal that you can started exploiting these extraordinary open doors.

Recommended: Add Facebook Like/Fan Box In Blogger Sidebar

How to Add the Facebook Popup Like Box Widget 

Log into your Blogger account and select your blog > go to 'Layout' & click the 'Add a Gadget' link on the right side
Once the popup window is open, select the HTML/JavaScript gadget from the list:
Copy and paste the following code inside 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/pages/Bloggingtipsandtrix/533310753378603?ref=hl&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://bloggingtipsandtrix.blogspot.com" rel="nofollow">Bloggingtipsandtrix</a></div>
</div>
</div>

Press the 'Save' button to add the widget to your blog. That's it!

Customization

After adding the code, replace the address (https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl) with your site's facebook page URL.
The widget will appear 5 seconds after the page finishes loading. If you want to change this delay, change the number 5000 to a greater or lesser number in this part:

.delay(5000)

By default, the like box only shows up the first time the user visits your page.  If you would like the Facebook box to popup every time the page loads, then remove this line of code:

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

If you want to display only when user visits your homepage, go to 'Template' > hit the 'Edit HTML' button on the right side and search by clicking anywhere inside the code area and pressing the CTRL + F keys for this tag:

</body>

Paste the facebook popup widget right above the body tag and make sure to include the conditional tags below:

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

After saving your work, you can test out your new feature by returning to one of your old posts which should bring up a little popup widget asking if you'd like to join the site's facebook page.

If you don't see the Facebook Like Box on the page, you may need to delete your cookies or check out the 'Customization' section above in order to display the widget every time a user visits your site. Once this widget is added to your site, all your hard work should start to translate into an increase in web traffic and number of Facebook fans.
Reference: Helplogger

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook