Facebook Popup Like Box Widget For Blogger/website

Like Google, Facebook is one of the successful companies. That helps people in making money online. Facebook has proved to be very helpful in promoting the website. That's why we will try to increase the likes and follower numbers on our Facebook fans page.

Like/followers number can be extended through the website. In this tutorial, we will learn how to embed Facebook fanspage into a popup window.

    Demo    

Add widget to your site

1. Log into your Blogger account and go to " Layout > Add a Gadget > "
2. Then a pop-up window will open, select HTML / Javascript in it.

3. Again copy and paste the code below into the empty box.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#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:#eaeaea;border:5px solid #828282;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:0;top:0}#fbox-button:before{content:"CLOSE";padding:5px 8px;background:#828282;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</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/profile.php?id=300700240344046&width=339&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="http://trylity.blogspot.com/facebook-popup-like-box-blogger-widget.html" rel="dofollow">Trylity</a></div>
</div>
</div>

How to customize this widget.

After adding the code, At the place of the blue address, paste https://www.facebook.com/profile.php?id=300700240344046 url of your Facebook page.

This widget will show in 5 seconds after the page has loaded. If you want to increase time / event, then increase or decrease the number 5000.

.delay(5000)

by default, As if a user visits the page for the first time So this popup will appear. If you want to pop up the Facebook box every time, delete the given code.

$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

If you want to show this widget only in the home page, So go to ['Theme'> 'Edit HTML'] and click inside the code And press CTRL + F button and find the code below.

</body>

Paste the facebook popup widget right above the body tag and make sure to include the conditional tags below:

<b:if cond='data:page.type == "index"'>ADD THE FACEBOOK WIDGET CODE HERE </b:if>

Or click on "save theme"

See the demo to see how this pop-up widget works.
Hope you liked this article, if you have any suggestions, then write in the comment box. And share it.

• Tweet
• Share
• Share
• Share
• Share