June 9, 2016

Facebook Like Lightbox Popup Widget For Blogger

Facebook Like Lightbox Popup on Website
Facebook page is a most popular social web page that created to promote business, brands, causes, celebrities, and other organization. It is unlike personal profile, the 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 in the sidebar, footer, and page.

The Facebook Lightbox that pops up on your homepage will help you to promote your Facebook page and gain more "Like" on the page. Your visitors will see it for 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.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#eaeaea;border:5px solid #828282;width:340px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:"CLOSE";padding:5px 8px;background:#828282;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}
<script type='text/javascript'>
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
<script type='text/javascript'>
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-button, #fbox-close').click(function(){
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
<div id='fbox-background'>
<div id='fbox-close'>
<div id='fbox-display'>
<div id='fbox-button'>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogsupporter%2F&tabs&width=300&height=154&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=285401398477549" width="300" height="154" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="https://www.blogsupporter.com" target="_blank">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.
4. Now please replace your Facebook slug instead of blogsupporter
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 to improve blogsupporter.com
Keo Sopherth Professional Blogger

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)

2 Replies so far - Add your comment

  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!


Your comment will be removed if it is a Spam or a comment with a link.