How to add Facebook Popup like box widget in blogspot blog - This time I'm going to share about "How to add a new, clean and very simple Facebook Popup like box widget in blogger". So many bloggers are already shared this tutorial on their blog, but here I will try to give it more simple. In order to increase visitors to the Facebook page, my friend needs to promote a Facebook page to get more like from users who visit your blog. And no doubt, by adding a Facebook pop-up like box in blogger is one of the best ways to improve your Facebook fans.
For those who want to add this widget on your own blog, make sure to take a look of this widget by clicking on the below demo button.
Now if you want to install this popup box plugin on your own blog, then simply follow the below steps.
How to install Facebook Like Box?
At first, visit to your blogger dashboard - Visit
Go to the "Layout" section.
Click on "Add a gadget".
Then select the "Html/JavaScript" option form Popup menu.
Now add the below HTML code into "Html/JavaScript" box.
<style scoped='' type='text/css'>
#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:2px solid #03a9f4;width:304px;height:230px;position:absolute;top:33%;left:37%;border-radius:3px;}
#fb-closebox {float:right;cursor:pointer;position:absolute;right:0px;top:6px;z-index:2;}
#fb-closebox:before {content:"X";padding:5px 8px;background:#fff;color:#000;font-weight:normal;font-size:15px;font-family:inherit;}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink 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) {
// Pengaturan 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(''));
}
// Dapatkan 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'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
<div id='fb-closebox'>
</div>
<div class='fb-like-box' data-href='https://www.facebook.com/askwithloud' data-width='300' data-height='255' data-colorscheme='light' data-show-faces='true' data-header='true' data-stream='false' data-show-border='false' style='border:none;overflow:hidden;width:300px;height:200px;'></div>
</div>
</div>
After that, go to the "Template" section and then click on the "Edit Html" button.
In template editor add the below code just before </body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=562901580420523&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Now save the template by clicking on the "Orange Save Template" button.
- Note - Replace the above highlighted Facebook page URL with your own URL.
- Note - If you want to bring up this pop-up like box on every time, please delete the code $ .cookie (' popup_facebook_box ',' yes', {path: '/', expires: 7}); in the above code and disable the cookies: false
That's it! I hope you like this widget! Stay tuned for more cool widgets! Thanks for reading +Prince Chaudhri
0 Comment to "Add New Facebook Popup Like Widget In Blogger"
Post a Comment