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.
facebook pop up likebox
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbtNhMLEMjBqdiGrmjUdXzuPtxT1lTUekEJJwQ_SyFGh-rS6lL2EKEj2FsOVVprmHlSHzlaq29pJ_-_rVKy8R8av5CACoIgCx-NjOSkUgEdZWww2aNoBTDeIxx5QqWWJICAQ7NG7q7AY/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPoeXgVlEGXuOBNVJGQ1UdotdYf2IiaRLFdM-NMypIO7BuFGstqjy9XOOZDemM6OxV52D0X5EdrvlKBQU10k2hwRGifbYwRVx5UYW7YDuexQUP7EckPWdiqpR8qcy7iZIBTjz-nWcbGI/s400/border.png) repeat-x top left;}
     #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbtNhMLEMjBqdiGrmjUdXzuPtxT1lTUekEJJwQ_SyFGh-rS6lL2EKEj2FsOVVprmHlSHzlaq29pJ_-_rVKy8R8av5CACoIgCx-NjOSkUgEdZWww2aNoBTDeIxx5QqWWJICAQ7NG7q7AY/s1600/controls.png) no-repeat -36px 0;}
     #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbtNhMLEMjBqdiGrmjUdXzuPtxT1lTUekEJJwQ_SyFGh-rS6lL2EKEj2FsOVVprmHlSHzlaq29pJ_-_rVKy8R8av5CACoIgCx-NjOSkUgEdZWww2aNoBTDeIxx5QqWWJICAQ7NG7q7AY/s1600/controls.png) no-repeat 0 -32px;}
     #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPoeXgVlEGXuOBNVJGQ1UdotdYf2IiaRLFdM-NMypIO7BuFGstqjy9XOOZDemM6OxV52D0X5EdrvlKBQU10k2hwRGifbYwRVx5UYW7YDuexQUP7EckPWdiqpR8qcy7iZIBTjz-nWcbGI/s400/border.png) repeat-x bottom left;}
     #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbtNhMLEMjBqdiGrmjUdXzuPtxT1lTUekEJJwQ_SyFGh-rS6lL2EKEj2FsOVVprmHlSHzlaq29pJ_-_rVKy8R8av5CACoIgCx-NjOSkUgEdZWww2aNoBTDeIxx5QqWWJICAQ7NG7q7AY/s1600/controls.png) no-repeat -36px -32px;}
     #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbtNhMLEMjBqdiGrmjUdXzuPtxT1lTUekEJJwQ_SyFGh-rS6lL2EKEj2FsOVVprmHlSHzlaq29pJ_-_rVKy8R8av5CACoIgCx-NjOSkUgEdZWww2aNoBTDeIxx5QqWWJICAQ7NG7q7AY/s1600/controls.png) repeat-y -175px 0;}
     #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbtNhMLEMjBqdiGrmjUdXzuPtxT1lTUekEJJwQ_SyFGh-rS6lL2EKEj2FsOVVprmHlSHzlaq29pJ_-_rVKy8R8av5CACoIgCx-NjOSkUgEdZWww2aNoBTDeIxx5QqWWJICAQ7NG7q7AY/s1600/controls.png) repeat-y -211px 0;}
     #cboxContent{background:#fff; overflow:visible;}
         #cboxLoadedContent{margin-bottom:5px;}
         #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgctKUQX0lytX8l9e0FsOiiLjw-LNbFX290SWQ5zDhQNHUK7X_7dg5WarOB5eQ9uvogFAgxcEsegZBaiwbdYUN7xw5e2jczjutze1Ebn4E6HziBs7wxiOVjiyDrmnmbTgR-nWdHTqrv0bI/s400/loadingbackground.png) no-repeat center center;}
         #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif9Zq1OVfEiiP_0N8UZsKLczngn-Ko6KYPp_2-RY34ExEV6YCl0-4PQhUcvr19RcP34_2LMEvLkpQGuCSL_V1MbGFZNClz7u_gPD1lLgVZbWdKLCQ4hyphenhyphen-ARhcd5Bi_p6BQj5bq-Ujr1gs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbtNhMLEMjBqdiGrmjUdXzuPtxT1lTUekEJJwQ_SyFGh-rS6lL2EKEj2FsOVVprmHlSHzlaq29pJ_-_rVKy8R8av5CACoIgCx-NjOSkUgEdZWww2aNoBTDeIxx5QqWWJICAQ7NG7q7AY/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!


About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook


Express yourself!
2 comments : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...