How To Add Facebook PopUp Like Box (Blogger & WordPress)

Facebook is an incredible and free source of referral traffic that can drive huge visitors and increase page views. And having a Facebook fan page is must for bloggers and website owners. The best benefit of adding Facebook PopUp Like Box every time your blog loads up is that it indirectly increases Facebook fan following of your page and  you can the share your posts on Facebook with a larger audience.

How To Add A Facebook PopUp Like Box Every Time Your Site Loads Up (In Blogger Platform)

Most bloggers prefer a Facebook Pop Up Like Box to increase their social media following . It is like a double benefit, Increase in no. of visitors as well as increases  Facebook likes.

I have seen many blogs which are not so popular but they have huge fan following on Facebook

Moreover, there is no doubt, Facebook drives Quality traffic to your blog. In this post I am sharing the trick to add a Facebook pop up like box will start working.

Step 1. Click on Layout Option in Left side bar of your blogger dashboard, and then Click on add a gadget.

add-faccebook-pop-up-like-box-in-blogger

Step2. Select HTML/JAVA text, in the next window. Just copy and paste the following codes

<script src='https://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: #120E0E;
 border: 5px solid #120E0E;
 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(2000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 1 });
});
</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/blogoops&width=402&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="#" rel="nofollow">Techeera</a></div>
</div>
</div>

 

Step3. Now you need to make slight changes, replace the highlighted red colored texts with your Facebook page URL address.

Step4. You can change the border color of the box by replacing this by your colour code

By default , the Facebook Pop Up Like Box will appear after 2 seconds , After your site has been loaded completely.

But if you want to increase or decrease the time span, then you can do it by changing the following:-

Change 2000 by any other number i.e.

No. of seconds X 1000

  • 1000 – 1 seconds delay
  • 2000 – 2 seconds delay
  • 3000 – 3 seconds delay

Keep this 2000 , this will work fine.

This was for blogger blog, but in case you have a WordPress, adding a Facebook PopUp Like Box in WordPress is easier just by using a plugin.

How To Add Facebook PopUp Like Box In WordPress

facebook-pop-up-like-box-in-wordpress-blog

WordPress users have always an advantage since there exists a number of plugins that lets do almost anything, you can create a normal WordPress blog, an e-commerce website, forum site and even social networking site like facebook. So power of WordPress plugin is amazing.

So There exists an amazing WordPress plugin that lets you add  Facebook PopUp Like Box  that comes every time you side loads in browser.

facebook-pop-up-likebox-plugin

All you need to do is to download and install the plugin. You need to configure the plugin’s setting, to add your facebook fanpage URL address. This plugin is absolutely free and simple, although it has not been updated but you can still use it.

Conclusion

Facebook Popup like box is a great way to increase Facebook fan following so you must use it.  Do let me know your experiences and opinion in the comment section.

Comments

comments