How to Add Facebook Page Promoter Lightbox on Blogger Blog

If you are a regular reader to RealTimeTricks posts you have seen that we are using a Facebook pop-up box which appears to visitors on their first visit (and not on their every visit). It helps RealTimeTricks get lot of Facebook fans just by visiting any of the post on this blog. To display Facebook pop-up box on RealTimeTricks we use this plugin but it won’t work if you are on blogger, blogspot doesn’t support WordPress plugins. To display same Facebook pop-up box (Facebook page promoter lightbox) on blogger blog you need to insert some code and that I’ll tell you in this tutorial.

Few hours back I received an email asking to write a tutorial on “how to add Facebook page promoter lightbox on blogger blog” so this tutorial is for Emmy and to all who want to display Facebook pop-up box related to WordPress plugin that I’m using now.

Name: Emmy
Message: would you please share a tutorial or widget for Facebook pop-up box which you are using. share it according to blogger’s blog.

Time: Friday December 14, 2012 at 12:48 pm
IP Address:
Contact Form URL:
Sent by an unverified visitor to your site.

Add Facebook Page Promoter Lightbox on Blogger Blog

To add Facebook pop-up box you need to follow-up some code and before you go on adding code in your blog let me inform you that this will save IP addresses of your visitors. It means when visitor land on your blog or any sub-pages this will store their IP address and won’t appear to that visitor again for next 7 days. However, you can set this interval according to your own choice but I strongly recommend that changing the time period will make this pop-up box appear to that particular visitor again and again which might look weird to visitor.


Steps to Add Facebook Pop up Box

Go to your blogger account and select your blog (if you have more than one blog you have to select).

Step-1. Now go to Layout option.


Step-2. There click on Add a Gadget.


Step-3. Use HTML/JavaScript Widget.


Step-4. Paste the following code inside that box.

Step-5. Hit Save Arrangement button and click on preview to check the changes.

/* 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 0px rgba(0,0,0,0.4); -moz-box-shadow:0 0 0px rgba(0,0,0,0.4); -webkit-box-shadow:0 0 0px rgba(0,0,0,0.4); } #cboxTopLeft{width:14px; height:14px; background:url( no-repeat 0 0;} #cboxTopCenter{height:14px; background:url( repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url( no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url( no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url( repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url( no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url( repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url( repeat-y -211px 0;} #cboxContent{background:#fff; overflow:visible;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url( no-repeat center center;} #cboxLoadingGraphic{background:url( 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( 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: #3B5998; 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 type="text/javascript" src=""></script><script type="text/javascript" src=""></script>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*7; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"340px", inline:true, href:"#subscribe"}); } });
// ]]></script>
<!-- This contains the hidden content for inline calls -->

<iframe style="border: none; overflow: hidden; width: 300px; height: 140px;" src="//;height=180&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" height="240" width="320" frameborder="0" scrolling="no"></iframe>

Customize Facebook Page Promoter Lightbox

  • Before adding the code change RealTimeTricks with your Facebook fan page username.
  • And to change the time period search for *7 and replace it with the number you want.

Comments are welcome! Please do share this article if it may have helped you in any way! Also Like – Facebook & Follow us – Twitter to get connected. Thank you, softsindia.