How to add popup Facebook like box on blogger

Admin
December 20, 2020
Everyone wants more likes and followers on their Facebook page and this is not so easy to get likes and followers because for that you need audience.


But if you are having a website and you have audience then you can convert the audience into your Facebook follower.


If you use the popup Facebook like box on your blogger blog then you can show your Facebook page after the website completely loaded.


There is a small bad effect of this widget, it makes your blog little bit slow loading because this widget loads external files from Facebook CDN.

If you want to see a demo of this popup Facebook page like box widget then simply click on the below demo button.
We are always trying to tell you how to install widgets on blogger blogs in the easiest way. You can't install this widget from the add widget section, you need to go to your theme edit HTML mode then follow the below steps to add install this widget on your blog.

How to install Facebook like popup on blogger blog

  1. Seach for </style> on the theme edit HTML mode
    To search anything in the blogger template section press Ctrl+F and then type the term to search and press enter.
  2. Now copy the code provided below and paste it just above </style>.
    
      <style>
#fb-fanbox {
display:none;
background:rgba(0,0,0,0.9);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
-webkit-transform:translateZ(0);
}
 
#fb-boxclose {
width:100%;
height:100%;
-webkit-transform:translateZ(0);
}
 
#fb-boxview {
background:#fff;
border:1px solid #fff;
width:300px;
height:230px;
position:absolute;
top:33%;
left:37%;
border-radius:3px;
}
 
#fb-closebox {
float:right;
cursor:pointer;
position:absolute;
right:0px;
top:5px;
}
 
#fb-closebox:before {
content:"X";
background:#fff;
color:#000;
font-weight:400;
font-size:15px;
font-family:inherit;
padding:5px 8px;
}
 
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {
color:#aaa;
font-size:9px;
text-decoration:none;
text-align:center;
padding:5px;
}
</style>
<script>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
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(''));
}
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;
};
 
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}
});
//]]>
</script>
  3. Now search for </body>
  4. Copy the code provided below and paste it just below the <body> tag.
    
      <div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
<div id='fb-closebox'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='https://www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/sayemtutorial&width=300&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border:none;overflow:hidden;width:339px;height:200px;'></iframe>
</div>
</div>
  5. Save Theme/Template
After you saved your theme then just changed the sayemtutorial with your Facebook page username from the code and again save the theme.

    Final word

    There is some last word for you. I am creating this widget to get more likes on Facebook pages from blogs and other websites.

    So if you face any problem adding this widget on your blogger blog then fill free ask me in the comment box. That's it's for today I hope you will enjoy it.