28 December 2017

Blogger, Feedburner Email Subscription Popup Widget


After a very long time, I got a chance to write some Javascript, jQuery, and some HTML stuff. I thought of updating my blog with a new subscription pop-up. The goal is to show a pop-up enabling the user to subscribe to my blog through email. While I have them already in a couple of places, I felt a pop-up at the center of the screen would help - to get some attention and action. Let us see how it goes.

I am sharing the code here. Feel free to use it if you are searching for something like this (but give the credits by not removing Widget by Lakshmi N).

Now coming to the widget. The following are the functionalities
  1. Display a pop-up with an option to subscribe or close the widget
  2. Integrate the pop-up with my feed provider (which is Google's Feedburner) so that I do not need to manage the subscriptions. It comes with a lot of security and  I can move to a different provider if there is a need.
  3. Make it less annoying. Use cookies and do not display the pop-up for another N days (by setting the expiry for cookie).
While I foresee some changes on the look and feel - but the core features are almost there. I have also committed the changes to GitHub.  There are few customizations that you might need depending on your requirements and taste. Here is how I have implemented
  1. HTML/CSS: If you turn on developer tools in your browser, you should see that the entire pop-up is written using HTML, CSS, and Javascript. I have used absolute positioning of the widget so that it shows up in the middle of the browser window. 
  2. Images: There are two images that I have used - one for the background for the pop-up and the close button. You can customize these too for your requirements in case if you need better images
  3. Display Timeout: Configure timeout duration after which you want the pop-up to be displayed. The display of the pop-up will be delayed for such duration after document.ready(). This should be lesser duration.
  4. Cookie Expiry Timeout: This is the duration after which the popup will again appear. This can be any precision (it can be from milliseconds to year). In order for this logic to kick-in, the user should have clicked "close". Ideally, this should be longer duration.
  5. JQuery: I have used JQuery, so ensure that you load jQuery in section and add/update document.ready(). I have used one already on my blog from Google CDN.
  6. Other Platforms: I have tested this on my blog (blogger) and not tested on other blogging platforms. But I believe it should work. Give it a try :-)
  7. Questions: If you have any questions or the stuff is not working, use the comments section to reach out to me. I try my best to support.
Here is my gist (If you remove the credits, it is mere copying and if you give credits it will be termed as normal usage. Be happy that I do not ask for money or bitcoins :-)).