You must have seen the facebook like boxes those pop-up when you enters a website. That pop-up box shows the Facebook like counts and some profile images of the likers showing that people are liking the page on Facebook. This may motivate a visitor to press
the like button of the facebook page of a content rich website or blog which will definitely increase the social presence of the blog. This may be useful to spread your voice and increase your reader via facebook. So I myself wondered how bloggers do that in their blogs and did some research. And finally got to know how to achieve the task of showing a pop-up facebook like box on blogger. I am goin to show you how. There are two methods to achieve this. Let me proceed with the first method.
METHOD 1:
Step I: Log in to your blogger account and go to Dashboard.
Step II: Go to ‘Template’, then Click on ‘Edit HTML’. Now you get the HTML editor for your blog template.
Step III: Hold the CTRL + F to find a string and in the search box, search for: </head>.
Step IV: When you get into </head>, copy the following code and paste it just above this tag (when you copy, don’t forget not to copy the line number appearing in the code like 1: ).
1: <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1' type='text/javascript'/> <script src='http://dl.dropbox.com/u/73386157/codigos/minipopup/jquery.cookie.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_user_login') != 'yes'){ $('#fanback').delay(100).fadeIn('medium'); $('#fanclose, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } $.cookie('popup_user_login', 'yes', { path: '/', expires: 1 }); }); </script>
1: #fanback{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999} #fan-exit{width:100%;height:100%} #fanbox {background: white;width: 420px;height: 270px;position: absolute;top: 58%;left: 63%;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -220px 0 0 -375px;} #fanclose {float: right;cursor: pointer;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1cYLpA1qz2KowLj0k2GTB36tGNnzT1I4ggQqTIkM6eQxSuoNivdM5Gz0PyeTRyyY2mPgc7y2MPG2vZtUMxulUB612QwB0jqFajll6ooAjH6Lp_cZI10NumosMuhT8LA8Yb9W6Jokvkv0f/s1600/fanclose.png) repeat;height: 15px;padding: 20px;position: relative;padding-right: 40px;margin-top: -20px;margin-right: -22px;} .remove-borda {height: 1px;width: 366px;margin: 0 auto;background:#F3F3F3;margin-top: 16px;position: relative;margin-left: 20px;}
Step VI: Once again, press CTRL+F and search for <body> and copy-paste the following code below it:
1: <div id='fanback'><div id='fan-exit'/><div id='fanbox'><div id='fanclose'/><div class='remove-borda'/> <iframe src="//www.facebook.com/plugins/likebox.php?href= https://www.facebook.com/TechBhuvan&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false&appId=329902783740649" scrolling="no" frameborder="0" style="border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;" allowTransparency="true"></iframe> </div></div>
(Remember to change the yellowed text to the URL of your blogs facebook page.)
Step VII: Now Click on ‘Save Template’ to save the changes you have done to the template. After successful Save, Exit and Check your blog to see it’s working.
METHOD 2:
You may employ this alternative method to add a pop-up facebook like box to your blogger blog. Here you go:
Step I: After Logging into you blogger blog, go to Layout.
Step II: Add a HTML/JavaScript Gadget and add the following code to the HTML/JavaScript Gadget.
<style>#fanback {display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}#fan-exit {width:100%;height:100%;}#fanbox {background:white;width:420px;height:270px;position:absolute;top:58%;left:63%;margin:-220px 0 0 -375px;-webkit-box-shadow: inset 0 0 50px 0 #3b60aa;-moz-box-shadow: inset 0 0 50px 0 #3b60aa;box-shadow: inset 0 0 50px 0 #3b60aa;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -220px 0 0 -375px;}#fanclose {float:right;cursor:pointer;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJPO6BiVg06TTzHj627EqZDAraebYf9L4ohdp7FtEpfR9ls-HctTKwjldovb3UogLNPtf106Iss5GvjgqXXRrc-Qjf9dBlwasn7CZqEMT16HqfTe5wtAf5I9yM7-jq_iw0PYodLIm-ll1/s1600/popup_exit.png) repeat;height:15px;padding:20px;position:relative;padding-right:40px;margin-top:-20px;margin-right:-22px;}.remove-borda {height:1px;width:366px;margin:0 auto;background:#F3F3F3;margin-top:16px;position:relative;margin-left:20px;}</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 IEoptions.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_user_login') != 'yes'){$('#fanback').delay(100).fadeIn('medium');$('#fanclose, #fan-exit').click(function(){$('#fanback').stop().fadeOut('medium');});}$.cookie('popup_user_login', 'yes', { path: '/', expires: 1 });});</script><div id='fanback'><div id='fan-exit'></div><div id='fanbox'><div id='fanclose'></div><div class='remove-borda'></div><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/TechBhuvan&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe></div></div><script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
(Change the yellowed text to the facebook Page URL of your blog.)
Step III: Save the Gadget. You are Done.
You can done few customization to the like box. You can change the expire limit of the like box. by default the pop-up will be displayed to the user after one day. To change this time interval, just do a CTRL+F to find expires in the code and change it to the integer you want. That’s it. Have fun.
