Add Facebook Popup Like Box in Blogger

Facebook has turned into the main online networking administration on the Internet playing host to more than 1.3 billion clients; of those, 800 million login to their dashboard bolsters at any rate once a day. On account of the limitless number of dynamic clients on administrations like Facebook, getting new perusers as a blogger or substance supplier has ended up less demanding than at any other time in recent memory.

Demo: How to Add Facebook Popup Like Box Widget In Blogger

With a specific end goal to create a powerful advanced battle, you totally must exploit social networking by doing things like coordinating Facebook on Blogger. Email advertising can be valuable, yet it accompanies confinements that could restrain your blog's potential. Maybe the most huge issue is that messages don't accompany a face or identity like Facebook does.

Also Read: Add Facebook Pop Like Box With Timer In Blogger

How to Add Facebook Pop-Up Like Box with Images

Recently, I have shared a facebook widget i.e., "Adding Facebook Likebox in Blogger with Timer". But the that  facebook widget doesn't contain any images or faces of  those  facebook fans who likes your page. In order to answer that question. I made another research and thank God! because  I've made it.The codes that I'm going to share in this tutorial were from MBT and do some modifications  in order to deliver it  more nicely at my best.

Live Demo

Features of this facebook widget:

• This stunning facebook pop up like widget will help you to increase your blogs facebook likes and also gives a professional look to your blog.


• It has a transparent look and a quick closable button which loads real fast.


• It has timer facility which you can control the visibility of the number of pop up for your readers (show pop up for your readers at your desired days).

Steps to Add Facebook Like Box Pop Up widget in your Blog

Step 1. Go To Blogger Dashboard > Lay-out > Add an HTML/Javascript Gadget 
Step 2. In the blank page, paste the code below

<style>
/*
   ColorBox Core Style:
   The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

   User Style:
   Change the following styles to modify the appearance of ColorBox.  They are
   ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
        box-shadow:0 0 15px rgba(0,0,0,0.4);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
        -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
       }

#cboxTopLeft{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x top left;}
     #cboxTopRight{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px 0;}
     #cboxBottomLeft{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px;}
     #cboxBottomCenter{height:43px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x bottom left;}
     #cboxBottomRight{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px;}
     #cboxMiddleLeft{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -175px 0;}
     #cboxMiddleRight{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0;}
     #cboxContent{background:#fff; overflow:visible;}
         #cboxLoadedContent{margin-bottom:5px;}
         #cboxLoadingOverlay{background:url(http://2.bp.blogspot.com/-bMneOFi_UDo/Txohpge3Z9I/AAAAAAAAF0s/AbVgxX9pXtQ/s400/loadingbackground.png) no-repeat center center;}
         #cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAAAAF0Y/iwIo3LnjoE0/s400/loading.gif) no-repeat center center;}
         #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
         #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
         #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
         #cboxPrevious{left:0px; background-position: -51px -25px;}
         #cboxPrevious.hover{background-position:-51px 0px;}
         #cboxNext{left:27px; background-position:-75px -25px;}
         #cboxNext.hover{background-position:-75px 0px;}
         #cboxClose{right:0; background-position:-100px -25px;}
         #cboxClose.hover{background-position:-100px 0px;}
         .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
         .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
         .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
         .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*-----------------------------------------------------------------------------------*/
/*   Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration:none;
}
.box-title {
   color: #F66303;
   font-size: 20px !important;
   font-weight: bold;
   margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
   color: #999;
   margin: 0;
   text-align: center;
}
#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://downloads.mybloggertricks.com/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   if (document.cookie.indexOf('visited=true') == -1) {
       var fifteenDays = 1000*60*60*24*30;
       var expires = new Date((new Date()).valueOf() + fifteenDays);
       document.cookie = "visited=true;expires=" + expires.toUTCString();
   $.colorbox({width:"400px", inline:true, href:"#subscribe"});
       }
});
</script>
    <!-- This contains the hidden content for inline calls -->

        <div style='display:none'>
   <div id='subscribe' style='padding:10px; background:#fff;'>
        <h3 class="box-title">Receive  updates via Facebook. PLEASE Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
      <center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>

Step 3. Save  template and refresh your page to see your  "Facebook Pop-up Like Box Widget"

Customization:

1.Replace  https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl with your facebook fan page URL .
2. If you don't want this pop up load for every refresh then you can replace the red highlighted False to true and set your desired days to load it on your blog by changing the above *30 to your desired days.

Happy Blogging Friends and Love Thy Neighbours!

Add Facebook Pop Like Box With Timer In Blogger

Having a problem on how to advertise your online business. Facebook is the answer as it is the largest social networking  site. And as  blogger you want also to spread your content because no matter how quality is your content is but it is not being talked by people around the globe, you are just like wearing new and beautiful dress but just sleep in your bed.

As of the moment (when I wrote this article) it is the no. 1 in Alexa Rank having a 963,574,340 (data taken  from web-site.org) . In connnection with this,  FACEBOOK has provided the facility in shape of many widgets and boxes through which the webmasters and bloggers can easily advertise their blog or website and circulate it on the FACEBOOK. And now, in this tutorial I am going to share with you the “FACEBOOK POPUP LIKE BOX WITH TIMER”, which you can easily install in your Blogger Blog and attract more visitors and build a better fan following on the Facebook. The codes that I'm going to share with  you are highly customizable.

Live Demo

Add Facebook Pop Like Box With Timer In Blogger

Step 1. Log in to your Blogger Dashboard.

Step 2. Go to Template (have a back-up of your template for your reference).

Step 3. Click “EDIT HTML”.

Step 4. Inside “HTML EDITOR”, press “CTRL+F” and find  tag </body>.

Step 5. Copy &paste the following code below just above/before  tag </body>.

<!-- Facebook Popup Like Box With Timer Starts by Bloggingtipsandtrix.blogspot.com -->

<script type='text/javascript'>
//<![CDATA[
    KNFBFansPRO='pages/Bloggingtipsandtrix/533310753378603?ref=hl'
 //]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}
#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;}
#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size: 13px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>
<script src='https://googledrive.com/host/0B9e7eeKnhqEVUFBGNGVKRkdHV3M' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='https://googledrive.com/host/0B9e7eeKnhqEVM3ppcFdvWkZPUEE' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
    $(document).ready(function(){                      
        $().KNFBFansPRO({
           timeout: 30,
            wait: 0,
            url: 'http://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>
<!-- Facebook Popup Like Box With Timer ends by Bloggingtipsandtrix.blogspot.com -->

Customization:

• Change the red highlighted texts with your facebook username or facebook fan page.
• If you want to hide your facebook fan page name because it is odd to look especially if it contains many numbers, simply delete the 13px   in font size in the above code and change it to zero (0).
• Set the  time-out  (in seconds) by replacing 30 with your own.
• This widget will  reappear after few minutes. Simply change the  (0) with 1, 2, or any time you want.

 In my case my complete facebook fan page is https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl

Step 6. Click Preview to see the initial effect then hit the Save button.
As a token of this article please like my facebook fan page. Thank You!
Peace and more blessings to your family.
Enjoy!

Adding Static Facebook Pop Out Like Box at the Right Side Of A Blog With A Hover Effect

As you could remember before at the right portion  of this  blog that there is a cool Floating Facebook Like Box that slides very smoothly upon pointing it with the mouse. This widget is very important to your blog for it encourages other people to like your posts and at the same time spread your it freely to the all parts of the globe dramatically. In this post I'm gonna show the steps on how to make it. Don't  worry because  I will make it very simple one.

Adding Static Facebook Pop Out Like Box at the Right Side Of A Blog With A Hover Effect

Please follow the steps below:

1. Go to your Blogger Dashboard, click  Template >> Edit HTML

2. Please check the "Expand Widget Templates" box at the topmost portion.

3. Search (CTRL + F) for this tag

</head >

4. Add the code below just above the </head> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

5.  After that ,please save your template.

6. Now go to Layout >> Page Elements >> Click add a new Gadget >> Choose HTML/JavaScript and in the HTML box, paste the code below:

<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("http://3.bp.blogspot.com/-1GCgbuSZXK0/T38iRiVF41I/AAAAAAAABpg/WlGuQ3fi-Rs/s1600/vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=Your Facebook Fan-page URl &amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true"></iframe>
</div>

7.  You're almost done, now gonna replace Your Facebook Fan-page URL   in the codes above with the URL of your facebook fan page.
Also replace the : symbol in your URL with %3A and / with %2F


For example, my facebook fan page is:
http://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl

After replacing the characters above, your facebook fan page should look like this:

http %3A %2F %2Fwww.facebook.com %2Fpages %2FBloggingtipsandtrix %2F53331078603?ref=hl
Note:  Please neglect the color red and pink for  I used it only for guiding purposes.
          Now, if it doesn't work, try not to replace the symbols found in your facebook fan page  url as stated above.

Other customizations (optional):

- to change the width and height of your facebook box, change the bolded-italic values (250)
- to change the background color of the facebook fan box (logo), replace #FFFFFF with the hex code of your color (click  here to choose  one)
- if you want to change the color of the facebook badge (facebook button) replace this code #3B5998
with your own.

8. Save your widget.
Click here, for tutorial in  putting facebook like/fan box in blogger sidebar.
Credits  goes to Helplogger with some modification from me.