How To Add Facebook Like Box Popup Widget For Blogger/website - | Download Free Softwares and How to Make Money


Wednesday, October 21

How To Add Facebook Like Box Popup 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.

Adding Best Facebook Popup Like Box to Blogger

This is the best Facebook Popup Like Box for Blogger ever i have seen, because it has friendly looking structure that covers with smoothly light gray colored border with appropriate size. It is build using light weight coding that does not harm your site's performance and SEO ranking, because if you site loads slowly then Google will surely rank down your blog for this, So you need not worry about that. Okay come to the topic, now we will learn about inserting gadget code in your blogspot log.

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

 1.  Go to your Blogger Dashboard >> Layout , click on Add a Gadget and the scroll down and select " HTML/JavaScript

2.  Now copy the below piece of code and paste it into HTML/JavaScript blank box.

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


 <script src='' 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}
<script type='text/javascript'>
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:"","; 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 type='text/javascript'>
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-button, #fbox-close').click(function(){
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
<div id='fbox-background'>
<div id='fbox-close'>
<div id='fbox-display'>
<div id='fbox-button'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//
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="dofollow"></a></div>


How to customize this widget.

After adding the code, At the place of the blue address, paste 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. 


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.


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.


No comments:

Post a Comment

You are welcome to share your ideas with us in the comment!

Trending News!!!Free Netflix Movie DownloadsClick Here