Walking in Light With Christ - hip0's personal blog on System Administration, Free Software, Computer Security and Religion

How to add email subscription box to wordpress with Google Feedburner RSS

I have noticed that many blogs nowdays offer an email subscription box to simplify the subscription procedure for the blog readers.

My blog was lacking this feature so I took the time to find out how can I add an e-mail subscription box field on my blog.
My research has shown me that the easiest way to add the subscription box is by using Google's Feedburner RSS service .
I've been using Google FeedBurner for quite some time and I've already 27 subscriptions with it.
Earlier when I added a FeedBurner subsciption to my blog I've blogged about it, so if you're not acquainted on how to add FeedBurner service to your blog, you might want to read my previous article Adding RSS Feed to WordPress in conjunction with FeedBurner / WordPress add-to-any-subscribe plugin

In this article I will explain in short step by step, how to add the subscrpition email box to your wordpress I assume, that the reader has already enabled and configured registration with Feedburner, if you still haven't just skip few lines above and check my previous article.
I would hereby skip the explanation of why feedburner as an RSS is so advantageous for every blog owner and readers and skip further to the email subscription procedure step by step instructions:
Step 1: Login to your FeedBurner Account

In my case my feedburner account url is accessed via the URL http://feeds.feedburner.com/WalkingInLightWithChrist-FaithComputingDiary

I have been properly logged in to my feedburner, so to view statistics of my current feeds subscription and to configure various variables of feedburner I had to access the URL address: http://feedburner.google.com/fb/a/myfeeds, a very quick shortcut to my feedburner account settings is also avaialable by simply accessing the URL: http://feedburner.com

Step 2: Click on the link that says My Feeds


If you have configured feeds for your feedburner you will get the list of feedburner feeds, (one could have multiple feeds, let's say if you have a couple of blogs or sites and you use one feedburner account to podcast your feeds for each of the separated blogs or sites.

Step 3: Click over the feed you want to have the feedburner email subscription box

Below you see the screenshot of my configured feedburner feed:



Right after clicking on your configured feed in my case Walking in Light With Christ - Faith, Computing, Diary you will see the screen:



Step 4: Click on Publicize menu

You will see the following two screens while scrolling with your browser:





You see in the second screenshot above there is a textbox with a html form code, to set the feedburner subscription to appear on your blog you need to copy/paste this code and put it on your blog.

After copy/pasting the code, don't forget to scroll down in your browser and save the email subscription generated form settings, (NB! if you don't save it it want be working even if you install it on your blog).
Here is the Save button screenshot:



Step 5: Setting up feedburner email textbox to wordpress

In order to set up the just copied html and css form code you need to login to your wordpress blog admin and go to:

Appearance -> Widgets


Scroll over the Available Widgets list, find the Text Widget and press the Add button to include the Text Widget to your blog sidebar.

Further on the same Widgets page, go to the Sidebar menu find the just added Text Widget and click over the Edit link:



Here is my screenshot of the edit screen of the Text Widget:



Step 6. Add the feedburner email subscription box to single posts blog views

This step is not a requirement, but I found it for myself to be vital, as it might rise some more subscribers to my blog, if my blog readers finds individual indexed pages in Google.

This step is also highly dependant on the wordpress theme you use, I use the old wordpress default theme and it's default behaviour is not to show up the wordpress sidebar, whether an individual wordpress post is clicked over, therefore to enable my feedburner subscription box for individual posts I also need to place the form code obtained from Feedburner.com's to my templates single.php

If you're using some kind of theme that doesn't have the non-sidebar single post behaviour you might skip forward this step, otherwise just continue on reading.

To include the feedburner email form subscription to my single posts I edited blog/wp-content/themes/default/single.php

In the single.php file find the code:

<?php comments_template(); ?>


Immediately after the above code place your feedburner form code, like you see in below screenshot:



Step 7: Modify your form code css and javascript to make your feedburner more accustomed for your needs

Again this step is voluntary and is not necessery I've disliked the default way the form is formatted so I played a bit with few of it's values to customize it to my likings, the things which I have changed a bit in the provided feedburner form code was:

• Remove the Delivered by Feedburner text from the form
• >
  
  To do so in the issued feedburner form code below when you copy the code paste it to some text editor and remove from the code the text:
  
  <p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>

  
  
• - Change the subsciption box width and height:
• 
  
  style="width:140px"

  
  Changed that to:
  
  style="width:120px"

  
  also I've changed:
  
  'scrollbars=yes,width=550,height=520'

  
  to:
  
  'scrollbars=yes,width=450,height=420'

  
  Another point of interest for adjustmnets in the feedburner for are in the form code:
  
  
• Remove feedburner subscription form default bordering
• 
  
  form style="border:1px solid #ccc;padding:3px;text-align:center;"

  
  I've changed that to:
  
  form style="border:0px solid #ccc;padding:2px;text-align:center;"

  
  By changing the css values border:1px to border:0px I have instructed the subscription box to show up without borders.
  
  

That's all now refresh in your browser and check if the feedburner email subscription form is showing up properly to your wordpress.
To completely ensure yourself it works correctly try to subscribe yourself to the form and during your next blog post you should receive an email notifying you about the newly written article.

You can see, my blog feedburner subscription form on the blog right sidebar.