How to Add Facebook Popup Like Widget to Blog or Blogger

Facebook popup like widget

A pretty good way to increase your website traffic is using social networks on your blog. One of the best options is Facebook. implementation of Facebook popup like widget on blogger is one of the strong tool which can increase your blog traffic and visitor can visit you blog's page on Facebook.
Here is an unbelievable way to increase Facebook likes for your blog.  Add this enticing widget to your blog and a Facebook like box will pop up with the light box effect when a user visits your page.  The Facebook popup box will show up on your page about 10 seconds after the page loads. (Show up time can be customized)
Adding of Facebook popup like widget on your blog is very easy and quick. Here this article explains you step by step instructions about “How to add Facebook like popup widget on blogger blog”

Adding Facebook popup like widget on your blogger blog.


Step 1


Login to your Blogger account dashboard go to Layout > Add a Gadget > then click on HTML/Java + button as shown below,


Facebook popup like widget


Step 2


After clicking on HTML/Java + button a new blank popup box will be displayed. Copy the following HTML code and paste in to it.



<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/Page-To-Watch -1481865518803235&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://pagetowatch.blogspot.com" rel="nofollow">Pagetowatch</a></div></div></div>


Step 3 


After adding the code replace the address in blue 
https://www.facebook.com/Page-To-Watch-1481865518803235 with your site's facebook page URL. Click on save button to add the facebook like popup widget. (As shown below in screen shot).
Now you have done adding the widget.


Popup Facebook like box



Step 4


You may also customize the widget as explained below,

  • The widget will appear for 5 seconds after the page finishes loading. You may change the delay time changing the number 5000 by increasing or decreasing in this part:
.delay(5000)

  • By default the like button only shows up first time the user visits your page. If you would like Facebook like box to popup every time the page refreshes or the page loads, then remove this green highlighted code:
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });


             You have done adding facebook like popup widget to your blog/website successfully. To test the same, go to your blog URL and refresh.

Thank you,






0 Comments:

Post a Comment

Privacy Policy
Disclaimer
Terms of Service
Sitemap