Irsah inDesigns Blog

Irsah inDesigns Blog

Premade Blogger shopping cart theme & template premium free themes ready download curated by slightly bizarre Blog designs & small business development info studio based in KL.

Facebook Page Popup & Like Lightbox 2017 Plugin for Blogger Blogs

Learn how to AMP'd your blog with valid AMP HTML Blogger theme framework. Visit Blogr-AMP Theme and AMPaction Theme. No 3rd party application. Compatible with published posts. Quick in search & on any devices.
Need that extra boost, showcase your Facebook fan page & add more likes to your Fb page? Get your blog readers engaged to your Facebook social media pages, use a responsive & customizable Facebook Page like lightbox right on your Blogger blog pages super easy.

This plugin is an updated version from our readers most used/installed Facebook Popup Like Box we released 3 years ago which the codes is still relevant (& working) to date -- Add Facebook Like Popup on Blogger Blog.

Easy to install, only a click of a button, use Blogger widget installer to integrate this unique Facebook page lightbox plugin on any Blogger template or themes. Tested & works perfectly on newly released responsive Blogger themes ie Notable, Contempo, Soho & Emporio.

Customize to your own text, add a click to action link & display your Facebook page/wall at your own blog without compromising your existing Blogger Theme layout or design. Works in any modern web browsers & even on mobile devices.

Install Facebook Like Popup Lightbox Widget with Timer on Blogger Blog Themes

Un-obstructive to your blog contents, delay lightbox display right from your Blogger dashboard widget settings -- you in control!

This Fb page lightbox plugin for Blogger does not require to setup a Facebook App ID & does not include any external libraries except its dependencies -- refer details in documentation below.

Refresh this page to see it in action!

Facebook Page Like Lightbox Features


  • Easy installation with a click of a button!
  • No Facebook App ID required.
  • No 3rd party lightbox plugin required.
  • Controlled timing & user session display. 
  • Customizable text for lightbox display.
  • Responsive & lightweight.
  • Blends in to current theme designs.
  • Click to action link available.
  • Tested on major modern web browsers & mobile devices.





Reaching  users installed & counting...
Thank you for the support! — Irsah inDesigns




Subscribe Us & Widgets Updates Delivered Instantly!



By clicking the "Add Facebook Like Lightbox widget", you have read & agreed on the Terms of Service & Software Policy

Version History

0-9-0 - May 2017

  • Widget/plugin release


1.0 How to Install Facebook Like Lightbox Widget?


  1. While sign in to Blogger, click "Add Facebook Like Lightbox to my Blog!" button above
  2. At Blogger Add Page Element, select your blog to install this widget
  3. Click Add Widget
  4. Preview your new widget which will be located at your Layout > Sidebar section.
  5. Click Edit to setup your Facebook lightbox.

If you need to preview the widget contents you can click Edit Content.

Add Facebook Like Box on Blogger Themes 2017

1.1 Adding & Removing Widget


You can remove the widget anytime you like and re-install again but do take note on the dependencies as stated below.

This widget is 100% safe & secured, no encryption -- read able codes & mark-ups.

1.2 Widget Placement


Place your Blogger Facebook Like Lightbox widget anywhere available in your theme layout, best placed in the footer section of theme. Use Layout drag & drop feature to setup your widget placement accordingly.

Facebook Popup Like Lightbox on Blogger Blog Theme 2017

2.0 Facebook Like Lightbox Setup


Setting up Facebook Page Like with timing lightbox made easy as all text & plug-in setup is included in widget. Edit the widget text, styles & lightbox plugin accordingly -- all made available right from your Blogger widget.

2.2 Light Box Text & Click to Action Link


Fb Lightbox Headings

At widget find below & edit highlighted yellow

<h3>
  Facebook Popup Heading
</h3>

Fb Lightbox Byline

At widget find below & edit.

Facebook Popup Byline Text!

Fb Lightbox Click to Action

At highlighted yellow add the URL to link to. Edit text at highlighted orange to your click to action text.

<!-- action link -->
<a class="fb-link" href="https://your_blog_name.blogspot.com/">Contact Us</a> 

2.2 Facebook Page Setup

Uses Facebook iframe to display a Facebook fanpage without additional plugin or any application ID.

At <!-- fb like lightbox iframe --> replace highlighted yellow to your Facebook page ID or unique name. Refer 3.0 Facebook Page Iframe for detail settings.

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/facebook&amp;width=290&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false" style="border: 0;"></iframe>

2.3 Facebook Lightbox Settings


At <!-- fb like lightbox settings --> custom set your light box settings. Parameters are self explanatory, edit accordingly.

<script>
var FB_lightbox = {
  expires : 0, // set cookie expiry in day(s)
  show : 8000, // timing display lightbox in ms
  hide : 1000, // timing hides lightbox in ms
  key : 'popup_fb' // cookie unique key
};
</script>

Parameter Description

expires
The amount in day(s) to set the cookie expiry - default 0
For testing purposes set expires value to 0 and refresh blog page twice.

show
The timing in milliseconds for lightbox to display - default 8000 (8s)
To prevent being penalized for content obstructions in search engines, set a longer timing delay to initiate lightbox.

hide
The timing in milliseconds for fade effect when closing lightbox - default 1000 (1s)

key
A unique identifier & session cookie key to save at users web browser.

3.0 Facebook Page Iframe


Facebook Page iframe is served from Facebook Page Plugin hosted by Facebook. To minimize external calls & additional plugin library, this plugin was simplified to retrieve directly from Facebook servers.

Instead of using data-* on a HTML element, the parameters is replaced directly to the iframe src attribute values.

How to Add Facebook Page Lightbox on Blogger Blogs

To setup & display a Facebook Page, insert a Facebook page unique ID or a Page name at highlighted yellow below.

<!-- fb like lightbox iframe -->
<iframe
allowtransparency="true"
frameborder="0"
scrolling="no"
src="https://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/irsahindesigns&amp;width=290&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false"
style="border: 0;"></iframe>

All available settings for this Facebook Page plugin can be viewed here at Facebook for Developers - Page Plugin page. Contact us if or leave a comment below if you need assistance.

4.0 Dependencies

4.1 jQuery Library


This Facebook Page Like Lightbox uses jQuery library which is included with the widget installs. If your blog already equipped with jQuery, remove script tag below in widget body.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Troubleshooting & Custom Setup


You can contact us by using our Contact page here Please provide your name, blog URL, and a detail description of your issues -- our Theme designers & developer team may not entertain if failure to do so.

If you need custom setup, for example checkout using send email notifier, other checkout options, you can also use our Contact page to get in touch with us.

This software/application is provided as-is with no warranty -- developer/author/designers will not be reliable for any loss whatsoever.

So what do you think? Do you have any feedback or additional functions that needs to be included with this Blogger shopping cart widget? Add your questions & comments below...



Facebook Popup Heading

Facebook Popup Byline Text!
Contact Us
New shopping cart widget for Blogger blogs -- transform your blog & sell products using your blog posts instantly! Visit Add Shopping Cart Widget Page to learn more.



Interesting Related to this Topic at Irsah inDesigns Blog

DISQUS With Us!