Guides: How to offer e-mail subscriptions step-by-step

E-mail subscriptions aren’t dead, on the contrary, many people prefer to keep up-to-date this way and depending of the topic the ratings can be more or less important. In this guide we’ll show you how to activate this service until the point of creating a custom subscribe-form step-by-step for Blogger and, by the way, WordPress.

Activate e-mail subscriptions on FeedBurner

There are multiple online services to create e-mail subscriptions starting from the blog’s RSS address, in this case and considering the service’s popularity we’ll talk about FeedBurner, and it is very likely most of you have already moved your feeds there, if not, starting with a Google account you can create a FeedBurner one.

To activate it, in your website’s panel go to the "Publicize" tab and then to the e-mail subscriptions option, here you’re given some generic code to offer e-mail subscription with a form or link, but as we’re going to customize it later right now we just need to click "Active".

Setting up e-mails by content

The subscribed users will get an e-mail daily with you blog’s new stuff and with FeedBurner you can configure several parameters, we already talked you into including the post’s title in the subscriptions and now we’ll look into this and many other options.

These options are located in "Publicize ? Email Subscriptions ? Email Branding"

Email title or theme

Here you can determine the email’s title with our content. We have two fields, first one is for when our email has just one article, and the second one is for when there is more than one. We also have 3 variables we can make use of:

${latestItemTitle} – Title of your last article.
${n} – Total number of articles per email.
${m} – Email’s article count minus one. For example: if an email has 3 articles, m = 2.

So for example, for the first field we can define the next formatting:

${latestItemTitle} | Your Blog's Name

And for the second field, activating the option Change Subject when an email has 2 or more items, we’ll use this next format:

${latestItemTitle} and ${m} more articles | Your Blog's Name

Logo’s URL

To make a real mark you have the option to add your logo to every email, a 150 to 250 px in width picture in neutral colors can help you accomplish the task.

Typography Format

We’re also given to adjust color, size and typography for the articles contained on the email. In my opinion default values are pretty readable and only by a personal exception it won’t be necessary to modify them.

Now save the changes for the options to apply in the next venues.

Sender address

By default, the address shown on the sent emails is the one you registered with in feedburner, and not always this is the best option. The panel to change the sender address is found in:

Publicize ? Email subscriptions ? Communication Preferences.

The ideal would be an address like this one:

no-reply@mydomain.com

In this same panel are located the options to customize the activation message to the users, it is really important to check this out.

Offer email subscriptions on your blog

There are two ways to offer email subscriptions to your readers:

• A link, which once clicked opens on a new window showing a form to type in the email address and an anti-spam captcha.
• Directly a form, which once filled opens a new window to fill in an anti-spam captcha

In both cases opens a new window, so just pick one up according the space you have available, next up we’ll show you the HTML code to insert them and the CSS to add some style.

Subscription link

The subscription link has no major complications, the code is this one:

<a href="http://feedburner.google.com/fb/a/mailverify?uri=YourFeedBurnerURI" class="mailsubscription">Free Email Subscription</a>

Where YourFeedBurnerURI comes from your FeedBurner’s URL, for example, our RSS address is: http://feeds.feedburner.com/btemplatesblog, YourFeedBurnerURI would be btemplatesblog. And to add some style, it’ll be enough with the assigned class, the CSS:

a.mailsuscription {

}

Something really common is to add a mini icon to this link to make it stand out.

Subscription Form

The subscription form is not so different from any other, so it is customizable as far as our CSS knowledge can take us, the basic HTML to add the form is as follows:

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YourFeedBurnerURI', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" id="fmailsubscription">

<div>
	<p>Subscribe via email:</p>
	<p><input type="text" name="email" id="emailfield"/></p>

	<input type="hidden" value="YourFeedBurnerURI" name="uri"/>
	<input type="hidden" name="loc" value="en_US"/>

	<input type="submit" value="Subscribe" id="mailsubmit"/>
</div>
</form>

Then again we have to replace YourFeedBurnerURI with our own URL. Contrary to the code provided by FeedBurner, this code validates correctly and is easier to appreciate the structure and add style. For example, these next CSS styles:

#fmailsubscription {

}

#fmailsuscription p {
margin:10px 0;
}

input#emailfield {
color:#999999;
float:left;
font-size:12px;
height:12px;
padding:2px;
width:65%;
}

input#mailsubmit {
background:#EEEEEE none repeat scroll 0 0;
border:1px outset #CDCDCD;
float:right;
font-size:10px;
padding:2px;
text-align:center;
width:25%;
}

With these styles, the result is:

You can adapt this styles to match your blog’s layout.

For Blogger and WordPress HTML.

HTML. The same for both, you can add a html widget on the sidebar.

CSS. In WordPress the styles are in the style.css file and in Blogger just right before the closing tag:

]]></b:skin>

Suggestions for the email subscription

• Put the icon or form in a visible and accessible place.
• Make sure to mention the subscription is free of charge, and users can unsubscribe whenever they want.
• Confirm and reinvite the subscribers who never activated their subscriptions.
• If you have a category that stands out among others, make sure to offer a subscription only for it.

Subscribe to BTemplates Blog

Speaking of subscriptions, are you subscribed to our content? no? Well, now its the time to do so, you can choose between the RSS Feed or email subscription 🙂