One Time Facebook Pop Up Like Box For Blogger

Facebook is one of the largest social networking sites on the net. Bloggers are using it to get social on the net as well as to promote their blogs. They make like pages on Facebook for their blogs and share their ideas with their audiences. Sometimes they post their recent articles’ links in the page so that their Facebook audiences can know about their recent posts. Through this page they get many visitors from Facebook as well as some backlinks (though backlinks from Facebook is not so helpful for increasing PageRank).

Thus bloggers are promoting their blogs through Facebook. But you can see that in this process a Facebook like page is very important of all. But without audiences there is no value of a Facebook like page. Now how you can build audiences for your Facebook page. The best way is to make your like page familiar with your blog visitors. This thing can be easily done by adding a Facebook like box in your blog.

In one of my last posts I mentioned “Facebook Like Box” as an important widget which should be used by every bloggers.You can add a Facebook like box in various style. But I think the best way is to display it as a pop up box.

While searching on the net I find a great post from www.mybloggertricks.com on Facebook pop up like box. In this post I will share that. The specialty of this widget is it will appears only one time per IP and for that I like it very much.

Watch A Demo First

Steps to Add Facebook Pop Up Like Box

1. Login to Dashboard                                             

2. Go to Layout --> Add a Gadget.

3. Choose HTML/JavaScript

4. Then paste the codes below in the form.

<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/AVvXsEjaHiqYXQ3gPkpDoJTTZLit-pzs5_LgQVCBxwZbo1_glAHp0IC8auL8y-EtXA5ws96Uv3La3rQ6bNWVf1UHYnJct-bTVQG3UsPYmJ-tZTVpPDvvwiwrahDobNy9Jy3j4KubDqMdaXWU0qd2/s1600/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2eMIF8Wuifp8t9USXLmHewULJxeyuBcqpDZdfaUgc4Tr1HUK3S5QeYwA9oRTd1TnH-WlfKuNSZVDHevEUWj-nLWPIj_XDUa4u0zP0Y21IXb6mrJojpGoiGoLGspAsj7_FqKfX9Pb96wnR/s1600/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaHiqYXQ3gPkpDoJTTZLit-pzs5_LgQVCBxwZbo1_glAHp0IC8auL8y-EtXA5ws96Uv3La3rQ6bNWVf1UHYnJct-bTVQG3UsPYmJ-tZTVpPDvvwiwrahDobNy9Jy3j4KubDqMdaXWU0qd2/s1600/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaHiqYXQ3gPkpDoJTTZLit-pzs5_LgQVCBxwZbo1_glAHp0IC8auL8y-EtXA5ws96Uv3La3rQ6bNWVf1UHYnJct-bTVQG3UsPYmJ-tZTVpPDvvwiwrahDobNy9Jy3j4KubDqMdaXWU0qd2/s1600/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2eMIF8Wuifp8t9USXLmHewULJxeyuBcqpDZdfaUgc4Tr1HUK3S5QeYwA9oRTd1TnH-WlfKuNSZVDHevEUWj-nLWPIj_XDUa4u0zP0Y21IXb6mrJojpGoiGoLGspAsj7_FqKfX9Pb96wnR/s1600/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaHiqYXQ3gPkpDoJTTZLit-pzs5_LgQVCBxwZbo1_glAHp0IC8auL8y-EtXA5ws96Uv3La3rQ6bNWVf1UHYnJct-bTVQG3UsPYmJ-tZTVpPDvvwiwrahDobNy9Jy3j4KubDqMdaXWU0qd2/s1600/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaHiqYXQ3gPkpDoJTTZLit-pzs5_LgQVCBxwZbo1_glAHp0IC8auL8y-EtXA5ws96Uv3La3rQ6bNWVf1UHYnJct-bTVQG3UsPYmJ-tZTVpPDvvwiwrahDobNy9Jy3j4KubDqMdaXWU0qd2/s1600/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaHiqYXQ3gPkpDoJTTZLit-pzs5_LgQVCBxwZbo1_glAHp0IC8auL8y-EtXA5ws96Uv3La3rQ6bNWVf1UHYnJct-bTVQG3UsPYmJ-tZTVpPDvvwiwrahDobNy9Jy3j4KubDqMdaXWU0qd2/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/AVvXsEgT3rx0fZf-XU4wNEajwKiUITdJIWNGUOmC0dAx0d3yrTh1AAorZyNevdibBTtNKUHy32Swa16bfjROsBWd6E1vVhE9-EfUKtrhP7zeFm_LOVmE5RnWgbbQi4boKE2zuwY25qkHAY6UCCE2/s1600/loading-background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoK7mipvKn1dHs6JdsJFGmICCzV3KYSI5P_RVdqmZw02pB7OOanx8PXFlg-Zy-ZXhlDr3c8dUbNQUO-gfBSNFCU5UFrlugn3A11S2IvdRieBw8H077SsLOmQ43vhPEMj1RauUECZIi6JTM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaHiqYXQ3gPkpDoJTTZLit-pzs5_LgQVCBxwZbo1_glAHp0IC8auL8y-EtXA5ws96Uv3La3rQ6bNWVf1UHYnJct-bTVQG3UsPYmJ-tZTVpPDvvwiwrahDobNy9Jy3j4KubDqMdaXWU0qd2/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 src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> 


<script src="http://yourjavascript.com/11215013191/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 all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >&#9660;</p></center></h3> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbestblogging&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> <p style=" float:right; margin-right:35px; font-size:9px;" ><a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.bestwaysofblogging.com/2013/01/one-time-facebook-pop-up-like-box-for-blogger.html">Get This Widget From Best Ways of Blogging</a> <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href=""></a></p> </div> </div>

5. Now Press ctrl + F and find bestblogging . Change it with your page username and save it.
6. If you already have jQuery script in your template then remove the codes below from the above boxed codes.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> 

How to Find Username

Visit your Facebook Page and copy the words in the URL after forward slash. These words are your username. You must add your username in the codes to make this widget worked. 

https://www.facebook.com/bestblogging

Conclusion

I think you have understood what I wanted to say. My English is not so good and I’m sorry for my bad English. If these codes don’t work for you please inform me through the comment form. Thanks for reading my post.