Update May 2017
This 2017 we have re-released this Facebook Page Like Popup with lightbox & now easier to install with Blogger widget installer. Stripped out the fatness, blends in on any Blogger themes, easy to customize -- with only a click of a button.
Find all the details here at 2017 Facebook Page Like Lightbox documentation page.
Find all the details here at 2017 Facebook Page Like Lightbox documentation page.
Installing a Facebook popup "Like" box has been one of the popular features amongst blog users and website owners, ever since the social media websites like Facebook became viral. Surprisingly, our friends and blog shop / web store owners are having hard time installing this social media plug-in, even though it is being widely shared by bloggers alike.
The problem they faced while trying to install some of the available Facebook pop up like box plug-in would be:-
- Outdated codes and plug-in snippets.
- Unusable and some triggered browser error.
- Hangs a webpage due to source code error.
- Web page loads too slow.
- Not in full control, some users feels that they are being harrassed by popups!
- Uses heavy/oudated popup library.
- Hard to view (or some do not work) on mobile devices.
Updated: Here's an example website using the lightweight responsive Facebook popup Like box with minimal styling. http://www.artienatasha.com . Nice pinkish colors. You could always refresh our page here to see the popup Like box in action.
Here, we are going to introduce to you a Facebook popup Like box plug-in, which is unobstructive (huh?), lightweight, minimal and simple, responsive (works on major mobile devices), easy styling. and does not use additional/heavy javascript library!
- It does not obstruct your webpage load.
- Responsive and workable in major mobile devices web browsers (tested Android).
- No additional javascript popup library used.
- Lightweight and easy to customize.
- Set the cookie timer upon visitors first visit.
With only a few line of Javascripts/jQuery, you can add a cool responsive Facebook like box for your Blogger blog, blogshop, web store or your website. And it also comes with a browser cookie timer. It means that you can control/configure the popup timeframe based upon your blog/website visitors first visit.
Before we continue, you must have the Jquery library included in your template. Go to Template Editor > Backup/Restore (if required) > Edit HTML > and find this piece of code (or something similar) somewhere in between your <head> and </head> tag.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'/>
If you have one, skip this step. Otherwise, if you can't find any, then add that piece of codes above/before your current template </head> tag and it should look like so:-
...codes... <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'/> </head> <body> ...more codes...
Click Save > and head over to your Blogger Dashboard Layout section.
Now click Add a Widget from anywhere in your Blogger layout > find and select HTML/Javascript widget > copy below codes and paste in the widget body:-
<!-- facebook like box starts -->
<!-- popup box stylings -->
<style type="text/css">
#fb-back { display: none; background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999;}
#fb-exit { width: 100%; height: 100%; }
.fb-box-inner { width:300px; position: relative; display:block; padding: 20px 0px 0px; margin:0 auto; text-align:center; }
#fb-close { cursor: pointer; position: absolute; top: 5px; right: 5px; font-size: 18px; font-weight:700; color: #000; z-index: 99999; display:inline-block; line-height: 18px; height:18px;width: 18px; }
#fb-close:hover { color:#06c; }
#fb-box { min-width: 340px; min-height: 360px; position: absolute; top: 50%; left: 50%; margin: -220px 0 0 -170px; -webkit-box-shadow: 0px 0px 16px #000; -moz-box-shadow: 0px 0px 16px #000; box-shadow: 0px 0px 16px #000; -webkit-border-radius: 8px;-moz-border-radius: 8px; border-radius: 8px;
background: #fff; /* pop up box bg color */
border-bottom: 40px solid #f0f0f0; /* pop up bottom border color/size */
}
.fb-box-inner h3 { line-height: 1; margin:0 auto; text-transform:none;letter-spacing:none;
font-size: 23px!important; /* header size */
color:#06c!important; /* header color */
}
.fb-box-inner p { line-height: 1; margin:0 auto 20px;text-transform:none;letter-spacing:none;
font-size: 13px!important; /* header size */
color:#333!important; /* text color */
}
a.fb-link { position:relative;margin: 0 auto; display: block; text-align:center; color: #333; /* link color */
bottom: -30px;
}
#fb-box h3,#fb-box p, a.fb-link { max-width:290px; padding:0; }
</style>
<!-- facebook plugin -->
<div id='fb-back'>
<div id="fb-exit"> </div>
<div id='fb-box'>
<div class="fb-box-inner">
<div id="fb-close">X</div>
<!-- edit your popup header text here -->
<h3>Like This Template?</h3>
<!-- edit your supporting text here -->
<p>Show your Support. Become a <b>FAN!</b></p>
<!-- edit your fb name below -->
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Irsah-Indesigns&width=290&height=275&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false'style='border: 0 none; overflow: hidden; width: 290px; height: 270px;text-align:center;margin:0 auto;'></iframe>
<!-- edit your supporting link here -->
<a class="fb-link" href="//YOUR_BLOG_NAME.blogspot.com">Contact Us</a>
</div>
</div>
</div>
<!-- popup plug-in snippet -->
<script type='text/javascript'>
//<![CDATA[
//grab user's browser info and calculates/saves first visit
jQuery.cookie = function (key, value, options) { if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; }
if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : ''].join('')); }
options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; };
// the pop up actions
$(function ($) {
if ($.cookie('popup_fb') != 'yes') {
$('#fb-back').delay(400).fadeIn("slow"); // options slow or fast
$('#fb-close, #fb-exit').click(function () {
$('#fb-back').stop().fadeOut("slow"); // options slow or fast
});
}
//initiate popup function by setting up the cookie expiring time
$.cookie('popup_fb', 'yes', { path: '/', expires: 3 });
});
//]]>
</script>
<!-- facebook like box ends -->
Editing notes for the Fb popup like box are included. Change the url to your Facebook page and it would look like so:-
...codes... http://www.facebook.com/YOUR-FB-NAME&width=290...more codes...
Adjust/edit the timeframe (by days) the popup will initiate after your users first visit at this code:-
.$.cookie('popup_fb', 'yes', { path: '/', expires: 3 });
Current setting is 3 days. To test, change the integer to "0" (without quotes).
Leave the widget title empty! Save your widget. Drag and drop the widget somewhere at the bottom of your template Layout section. Click Save Arrangements. This is to make sure your Facebook Like box popup loads/initiates after any other importat content in your template.
You can view the FB popup plug-in. But wait!... Most likely when you open up your web page or blog, your browser had already stored your website or blog informations!
To see the Facebook popup Like box in action at your site, either you can do this:-
- View your site by using an Incognito window feature (like in Chrome) or a Private Browsing feature which does not store/save a webpage cookies or cache.
- Set the timer to "0" (without quotes) at the codes stated above.
- Clear entirely your browser cache by hitting the CTRL + F5 simultaneously or use the browser Settings > Clear Cache.
We also included indicators/comments in the code snippets for you to style and edit the text at your new Facebook popup Like box plug-in.
REFRESH this page and don't forget to Like us and become a Fan. Thank you for your support!
Got It!
Data submitted via comments collected & stored by the respective providers.
Read our Privacy Policy to learn more on data management & protection.