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
Email: gr8celebfashion@gmail.com
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: 39.52.85.217
Contact Form URL: http://realtimetricks.com/contact
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.

add-facebook-page-promoter-lightbox-on-blogger-blog

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.

add-facebook-page-promoter-lightbox-on-blogger-blog

Step-2. There click on Add a Gadget.

add-facebook-page-promoter-lightbox-on-blogger-blog

Step-3. Use HTML/JavaScript Widget.

add-facebook-page-promoter-lightbox-on-blogger-blog

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

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

1
2
3
4
5
6
7
8
9
<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 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(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -211px 0;} #cboxContent{background:#fff; overflow:visible;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn4/Txrt1QsGH1I/AAAAAAAAFWw/_jWYVoR1HX8/s1600/loading-background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-E/Txrt1J6NThI/AAAAAAAAFWo/4P12CJPj924/s1600/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://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/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: #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="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><script type="text/javascript" src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></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="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Frealtimetricks&width=300;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.

About Irfan Siddiqui

Irfan Siddiqui owner of RealTimeTricks where he helps others with blogging tips, tech news, gadget tips and other great updates. Follow him on twitter via @RealTimeTricks to keep in touch with him or catch him on Facebook

Comments

  1. As per me anyone should avoid adding this as it annoys lots of readers.
    Janmejai recently posted..Top 10 Gifts For Women/Girls on Birthdays and Other OccasionsMy Profile

    • I think you didn’t read about cookies that this save every time you visit a blog and keeps it away from you for next 7 days. That I think won’t annoy you.

  2. very nice widget … liked it :)
    keep posting :D ….

  3. Its great free plugin. Definitely helps you increase the likes.
    Satish Patel recently posted..Giveaway #1–Participate and Win Thesis 2.0 this ChrismasMy Profile

  4. I am really thankful to you for sharing this tutorial. I am a fan of you now.

  5. Hi Irfan,
    that sounds very attractive. And special thanks for explaining the cookies thing and dispelling our doubts as to potential visitors’ annoyance. I totally agree with you that popup can be a perfect solution for building a Facebook community. Most visitors are in a hurry and have no time to search for the ‘join us on FB’ button on a sidebar. In this way, we simply minimize the effort required for joining the community. Thanks for sharing your experience
    Diane Clark recently posted..3 Smart Ways to Save Money in College: Thin Wallet GuideMy Profile

  6. hi,
    great post . I am working on blogger also. its helpful.
    but I think many people dislike it bcoz it .
    Rajkumar Jonnala recently posted..Guide to rip DVD to iTunes step by stepMy Profile

  7. A nice little trick to promote and get a Facebook like for a blog. Smart work man cool.

  8. If i make it as .1 will it load every day once to a visitor

  9. Hi Irfan,
    cool technique its definitely helps you to increase the likes of your facebook page.
    thanks for sharing.

    Tweeted!
    Jatin Sharma recently posted..NewspaperTimes WordPress Theme Free downloadMy Profile

  10. Nice work.. This is the really great way to increase facebook fans. Thanks for sharing it.

  11. work fine.
    thanks for sharing this widget.

  12. thanks , but, I need Lightbox as like your blog for my blogger blog.

    any idea?

  13. Been looking to do this in blogger, great tutorial. I’ll be adding this later today, looking to see what results will come of it.

  14. Nice post and clearly explained :) As a blogger i find using a lightbox as a great way to increase the amount of Facebook subscribers my blog has as readers are far more likely to click on it than if you just had a widget in the sidebar .

  15. Its not working now… I have just putted on my site but nothing to displayed :/

    • If you have followed each steps carefully then it would have worked. I have tested myself and there are many who have used this technique to add facebook page promoter lightbox on blogger blog.

  16. Thanks so much, Irfan! Very helpful!

  17. I tried following it. I can’t see the pop-up.

Speak Your Mind

*

CommentLuv badge

© 2010 - 2014 RealTimeTricks by Irfan Siddiqui | Sitemap | Disclaimer | Privacy Policy | Find us on Google+