Add Facebook Popup Like Box to Blogger Blog

Hi friends, Welcome back to Filezooby. In previous posts I told you about Facebook Simple and Floating like box, But this time I have brought a latest and great Facebook like box named as "Facebook Pop Up like box" which is worldwide famous and all's favourite. It is the best way ever to increase your Facebook likers. When any visitor will come to your blog it will appear first, and visitor surely click on this and with this your likes would be increased. Most of the blogger want to add this beautiful function to his/her blog or website, therefore I will tell you all procedure of adding this function to your blog or website. For adding this beautiful widget your blog then please follow these easy instructions to add it;

See the demo

How to Add Facebook Pop Up like box to Blogger Blog

i) Go to Blogger Dashboard> Layout> Add a Gadget

ii) Select "HTML/ JavaScript"

iii) Now Copy the below set of code and paste it in that HTML/ JavaScript Box with below changes.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src="https://facebookpopup2.googlecode.com/files/jquery.cbt-min.js"></script><script type="text/javascript">jQuery(document).ready(function(){if (document.cookie.indexOf('visited=true') == -1){var fifteenDays = 1000*60*60*24*29;var expires = new Date((new Date()).valueOf() + fifteenDays);document.cookie = "visited=true;expires=" + expires.toUTCString();$.colorbox({width:"399px", inline:true, href:"#exestylepopups"});}});</script><style type="text/css">#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:99%;height:99%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto}#cboxTitle{margin:1}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:1;display:block}.cboxIframe{width:99%;height:99%;display:block;border:1}#cboxOverlay{background:#001;opacity:0.5 !important}#colorbox{box-shadow:0 0 14px rgba(0,0,0,0.4);-moz-box-shadow:0 0 14px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 14px rgba(0,0,0,0.4)}#cboxTopLeft{width:15px;height:15px;background:url(https://lh5.googleusercontent.com/-Oonf3hVB8Vk/UUVyfEEnnEI/AAAAAAAABBU/ymAdg3uHHkM/h120/controls.png) no-repeat 0 0}#cboxTopCenter{height:15px;background:url(http://goo.gl/O9QP9) repeat-x top left}#cboxTopRight{width:15px;height:15px;background:url(https://lh5.googleusercontent.com/-Oonf3hVB8Vk/UUVyfEEnnEI/AAAAAAAABBU/ymAdg3uHHkM/h120/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:15px;height:44px;background:url(https://lh5.googleusercontent.com/-Oonf3hVB8Vk/UUVyfEEnnEI/AAAAAAAABBU/ymAdg3uHHkM/h120/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:44px;background:url(http://goo.gl/O9QP9) repeat-x bottom left}#cboxBottomRight{width:15px;height:44px;background:url(https://lh5.googleusercontent.com/-Oonf3hVB8Vk/UUVyfEEnnEI/AAAAAAAABBU/ymAdg3uHHkM/h120/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:15px;background:url(https://lh5.googleusercontent.com/-Oonf3hVB8Vk/UUVyfEEnnEI/AAAAAAAABBU/ymAdg3uHHkM/h120/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:15px;background:url(https://lh5.googleusercontent.com/-Oonf3hVB8Vk/UUVyfEEnnEI/AAAAAAAABBU/ymAdg3uHHkM/h120/controls.png) repeat-y -211px 0}#cboxContent{background:#ffe;overflow:visible}#cboxLoadedContent{margin-bottom:6px}#cboxLoadingOverlay{background:url(http://goo.gl/seJqH) no-repeat center center}#cboxLoadingGraphic{http://goo.gl/u3upJ) no-repeat center center}#cboxTitle{position:absolute;bottom:-24px;left:0;text-align:center;width:100%;font-weight:bold;color:#736f6f}#cboxCurrent{position:absolute;bottom:-24px;left:59px;font-weight:bold;color:#736f6f}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{position:absolute;bottom:-28px;background:url(https://lh5.googleusercontent.com/-Oonf3hVB8Vk/UUVyfEEnnEI/AAAAAAAABBU/ymAdg3uHHkM/h120/controls.png) no-repeat 0px 0px;width:24px;height:24px;text-indent:-9999px}#cboxPrevious{left:0px;background-position:-50px -24px}#cboxPrevious.hover{background-position:-50px 0px}#cboxNext{left:27px;background-position:-74px -24px}#cboxNext.hover{background-position:-74px 0px}#cboxClose{right:0;background-position:-99px -24px}#cboxClose.hover{background-position:-99px 0px}.cboxSlideshow_on #cboxSlideshow{background-position:-124px 0px;right:26px}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px}.cboxSlideshow_off #cboxSlideshow{background-position:-149px -26px;right:26px}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-124px 0px}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#5c5757}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#FFFEFE;font-size:21px !important;font-weight:bold;margin:9px 0;border:19px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:24px;font-family:arial !important}</style><div style='display:none'><div id='exestylepopups' style='padding:10px; background:#ffff;'><center><h3 class="mdbox-title">Receive updates via Facebook. Click the Like Button Below...</h3></center><center><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FMuhammadTariqRafique&amp;width=299&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=257" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:299px; height:257px;" allowtransparency="true"></iframe></center><p style=" float:right; margin-right:34px; font-size:10px;" > <a style=" font-size:10px; color:#397ad4; text-decoration:none;" href="
http://filezooby.blogspot.com/2013/11/facebook-popup.html">Get this widget</a></p></div></div>

1. Replace MuhammadTariqRafique with your Facebook page
2. If you want to appear widget on every reload of your blog visitor in all pages then, Just change true to false.
3. This widget will again Pop Up on your visitors desktop after 30 days, If he clears his browser cookies, If you want to minimize OR maximize time limit then just change *29 to your desire time. like 1 to 30 days
4. You can also change the Text in Blue text with you wish.

After this save it. You are done.

Hope you fully enjoyed this tutorial. If you like our tutorials then Subscribe us by enter your Email ID below Email Subscription box.

Posted in: Blogger,Blogger Widgets