Facebook Popup Like Box for Blogger

Facebook popup like box for Blogger is a highly effective blogger widget to boost your Facebook likes. In my opinion, it is the best way to promote your Facebook business page. By using this popup like box, you will be able to bring your Facebook fan page in front of your audience right after landing on your blog. For this reason, you will have 1000 times better result in the case of getting Facebook likes, social activity, social engagement, followers and the overall social exposure.

Every blogger needs a unique design for their blog. In that case, this amazing facebook popup like box for blogger will generate a unique view to represent the fan page through a light box. Also, it contains some advanced features and functionality. Moreover, this lightweight widget will use jQuery cookie plugin to improve the User experience of your blog. That means this popup like box will not appear again and again for a single reader until 7 days.

How to Add Facebook Popup Like Box in Blogger?

We have seen the importance of this pretty widget. Now we will see how to add this facebook popup like box on our blog. Actually, adding this widget is an easy process. Only you have to follow the step by step instruction. So Let’s get started.

Step 1: Login to your Blogger account and go to the Dashboard > Layout section.

Step 2: Click on the “Add a Gadget” link in the footer or sidebar section. Remember, the recommended area to add this widget is the footer.

Also Read

How To Submit Your Blogger Sitemap To Google, Bing & Yahoo.

Step 3: After clicking on the “Add a Gadget” link, a popup window will appear. Select the “HTML/JavaScript” gadget from the list and click on it.

Step 4: Now copy the following Facebook popup like box code and paste it into the content area of the gadget as shown below.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<style>
#popupFbLikeBox {display:none;position:fixed;background:rgba(0,0,0,0.7);height:100%;width:100%;left:0;top:0;z-index:99999;}
#popupArea {position:absolute;background:white;height:270px;width:auto;left:63%;top:58%;border-radius: 5px;margin:-220px 0 0 -375px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#popupClose{text-align:center;padding:10px;position:relative;cursor:pointer;background: linear-gradient(#eee, #fff);border-top-left-radius: 5px;border-top-right-radius: 5px;color:#000;}
#popupClose:hover{color:red;}
.fbLikeboxArea {margin:0 auto;width:366px;height:1px;margin-top:16px;margin-left:20px;position:relative;}
@media only screen and (max-width: 500px) {
#popupArea{left:63%;top:58%;margin:-220px 0 0 -250px;}
.fb-like-box,.fb-like-box span,.fb-like-box span iframe[style]{width: 100% !important;}}
</style>
<script>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// 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() : '',
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));}
//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>
jQuery(document).ready(function($){
if($.cookie('logedin_user') != 'yes'){
$('#popupFbLikeBox').delay( 2000 ).fadeIn('medium');
$('#popupClose').click(function(){
$('#popupFbLikeBox').stop().fadeOut('medium');
});
}
$.cookie('logedin_user', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='popupFbLikeBox'>
<div id='popupArea'>
<div id='popupClose'>CLOSE
</div>
<div class='fbLikeboxArea'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href= https://www.facebook.com/9jafan &width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div>
</div>

Step 5: You must replace the above highlighted URL with your own Facebook page link. Finally, click on the “Save” button and visit your blog. Wait for few seconds to see the popup like box in action.

Also Read

How To Add Floating Social Share Buttons for Blogger with Share Count.

How To Add 2 Different Random Posts Widget for Blogger With Or Without Thumbnail

Note: If you don’t see the popup after waiting few seconds, please clear browser cookies. After that reload your blog.

Configuration:

Replace the highlighted URL with your own Facebook page URL (as shown above).

By default, the widget will appear after 2 seconds from the blog is fully loaded. If you wish, you can increase or decrease this time by changing the above-highlighted numbers . For example, you can put “delay(1000)” to show the popup like box after 1 second, “delay(5000)” for 5 seconds, “delay(10000)” for 10 seconds etc.

I hope you have added the widget successfully in your blog. This attractive Facebook popup like box for Blogger is tested and compatible with different web browsers. So you shouldn’t face any trouble in the entire process. However, you can leave a comment below for support or any issues.