June 9, 2016

Facebook Like Lightbox Popup Widget For Blogger

- Advertisement -
Facebook Like Lightbox Popup on Website
Facebook page is a most popular social web page that created to promote for business, brands, causes, celebrities, and other organization. It is unlike personal profile, Facebook page does not add or request friends with others but it is gain "Fans"that people can choose to "Like" a page.

You can add your facebook page to your blog or website by using the Facebook social plugin to generate the script code to place in your blog widget sidebar or web pages. In this post, I will share you a tutorial that you can show your Facebook Page Lightbox or popup it on the home page instead of showing on the sidebar, footer, and page.

The Facebook Lightbox that pops up on your home page will help you to promote your Facebook page and gain more "Like" on the page. Your visitors will see it in the first time they come to your website or blog. It is an advantageous tool that attracts visitors eyes and easy to click Like Button on your Facebook Page. This Facebook Lightbox will disappear when you click anywhere you on your site.

The Facebook Like Lightbox Popup is different from the 5 Styles Facebook Widget Like Box that I provide the tutorial last few months ago or you can learn How to add Facebook Like Box on a website.

Facebook Like Lightbox

Facebook Lightbox Popup Tool

These are specialist Facebook Lightbox CSS Code, Iframe, and Script that you can use to promote your Facebook page on your blog or website.
#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;}
#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;}
#cboxOverlay{background:#000;opacity:0.7 !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:#ddd}
#cboxTopCenter{height:14px; background:#ddd}
#cboxTopRight{width:14px; height:14px; background:#ddd}
#cboxBottomLeft{width:14px; height:43px; background:#ddd}
#cboxBottomCenter{height:43px; background:#ddd}
#cboxBottomRight{width:14px; height:43px; background:#ddd}
#cboxMiddleLeft{width:14px; background:#ddd}
#cboxMiddleRight{width:14px; background:#ddd}
#cboxContent{background:#fff; overflow:visible;}
#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:#ddd; 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;}
#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;}
<script src="http://demos.blogsupporter.com/demo-script/jquery.min.js"></script>
<script type="text/javascript">
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:"350px", inline:true, href:"#subscribe"});
<!-- The contains is hidden content for calling -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=Facebook Page URL Here &width=300&height=168&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false' style='border:none; overflow:hidden; width:300px; height:158px;'></iframe></center>
</div><a href="http://www.blogsupporter.com">Blog Supporter</a></div>

Add Facebook Like Lightbox Popup Widget To Blogger Blog

To add the Facebook Like Box Popup on Blogger blog, please use this tutorial and follow this guideline.

1. Login Blogger Blog by going to Blogger.com
2. Now you are on Dashboard, click on Layout ›› Add New HTML/javaScript
3. Copy Facebook Lightbox Code Above and paste in the HTML/javaScript Box then Press Save Button.

HTML/JavaScript Text Box

4. Now please replace your Facebook Page URL instead of Facebook Page URL Here
5. You have done, then you got Facebook Like Box Lightbox on your Blog.

Add Facebook Page Lightbox Popup Widget To Wordpress Website

1. Login you WordPress Website
2. On Dashboard Click on Appearance ›› Widgets

WorPress Widget Function

3. Copy Facebook Lightbox Code Above and paste it into the textbox, them Press Save button.

WordPress Widget Textbox

4. In this step, you need to replace your Facebook Page URL instead of Facebook Page URL Here
5. You got you got Facebook Like Box Lightbox on your website.

Finally, you got Facebook Like Lightbox Popup on Blogger Blog and WordPress Website. If you have any question or happy with this tool please vote below or leave me the comment.

Was this article helpful?

Thanks! Your feedback helps us improve blogsupporter.com
Keo Sopherth

I offer a blogger blog, WordPress website development tutorials, and simple search engine optimisation tip with love.

- Advertisement -
Advertise Here (330 x 280)
- Advertisement -
Advertise Here (330 x 280)


  1. Funciona! Muchas gracias :)
    Lo puedes comprobar visitando mi blog ;) www.travelera.es

    1. Great Nuria Travelera, You did a great job for your blog!