Facebook Popup Like Box Widget for Blogger

Leave a Comment
Facebook Popup Like Box Widget for Blogger

Hello Guys, Looking for Facebook Popup Like Box Widget for Blogger or your website. Nowadays it has been important to have a huge number of followers on Facebook too to have a good impression among your readers. Facebook has we know has become the leading social media on internet which has around 800 million active users everyday. Due to this it has become a great thing to have a Facebook followers for your blog which are your permanent readers every time you post your article on your Facebook page.

Facebook Popup Like Box Widget for Blogger

Facebook Popup Like Box Widget for Blogger



As we know very well that traffic is very essential for our website whether it is from social media or from search engine we need traffic. So Facebook page plays a very important role where your crowd is permanent who ever have liked your page. After every update to your page you get those number of readers who have liked your page. So getting likes for the page who ever visits your website we need this Facebook popup like box widget which reminds people to Like your Facebook page and be your follower on Facebook. This way you will keep getting traffic to your website. 

How to add Facebook Popup Like Box Widget for Blogger ?

1. Log into your blogger account and select your blog > Now go to 'Layout' and Click on "Add Gadget" link from any of the sides.

2. Now, after the popup window is opened, select the HTML/JavaScript Gadget option.

Facebook Popup Like Box Widget for Blogger

3. Now Copy and Paste the following code in the content section. No need to give any title in 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/shoutgoals&width=339&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.shoutgoals.com" rel="nofollow">ShoutGoals</a></div>
</div>
</div>

CUSTOMIZATION

  • After adding the above code, replace the address in blue https://www.facebook.com/shoutgoals with your Facebook Page URL.
  • This widget will appear after 5 seconds once the page is completely loaded. If you want to change the number 5000 to greater or lesser number in this part.
delay(5000)

  • By default, the Like box only shows the first time the users visit your page. If you want like the Facebook box to popup ever time the user visits remove this code.: 
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });


So this was all about Facebook Popup Like Box Widget for Blogger. Hope its working for you. Now you don't need to tell people to like your website on Facebook you would be getting your Facebook followers every time someones visits your website. This is the best way to get traffic from social media. Also will help to increase your revenue. Feel free to share your views regarding Facebook Popup Like Box Widget for Blogger in below comments.


No comments:

Post a Comment

Get latest updates

 

Proud to be an Indian

We are on Facebook