March 10, 2012

Add Email Subscription Box on Your Website with Google FeedBurner




How your visitors get in touch with your latest updates happening on your site? Absolutely you can distribute your content via popular social networks such as Facebook, Twitter, Google+ and ask them to join them. But still some users may wish to read your updates via news readers. So you can provide them subscription capability via feeds. But there also another portion of your readers love to receive your updates right into their inbox. So what you gonna do about them and feel them satisfactory with your subscription offerings?

If you are a Blogger users we have already discussed about how to enable email subscription for your readers via How to Offer Email Subscriptions in Blogger post. However as a non-Blogger user or if you are not happy with Blogger email subscription widget, you may seeking a simple and efficient way to enable email subscription with customization capability. Have a feed on your site? If yes, then as a solution, Google FeedBurner will help you to provide reliable service in this scenario.

Google FeedBurner offers an email subscription service for their feed users, that allows publishers to deliver their content to subscriber's inbox without any complex procedures. This email subscription service delivers daily digest of new content from your feeds via email to the email subscribers and it will take care of rest of them after you setting up your email subscription service. So if you have already redirected your feed to FeedBurner or willing to do so, you can make use of this service free-of-charge. Interested? Let's figure out how to implement this on your site.


Before You Go:

* First of all you need to have your site feed redirected to FeedBurner. If you haven't done it already, read How to Redirect Your Feed to Google FeedBurner.

* If you are a Blogger user and wanna enable email subscription for your readers, read How to Offer Email Subscriptions in Blogger.

* You need to change FeedBurner email preferences before enabling subscriptions for your readers. Further you can make your subscription emails more efficient and user friendly by optimizing email preferences too. Read How to Configure Your FeedBurner Settings and find how to customize your email subscription preferences under Publicize heading.


Steps:

1. Log in to FeedBurner account.

2. Click on the Feed Title of your blog feed.

3. Navigate to Publicize tab.

4. Click on Email Subscription.

5. Now click on Activate button at the bottom to activate email subscription service, unless it is activated already.

5. Now grab the Subscription Form Code found in the page and add to your website where you wanna display email subscription form.

Notes:

* If you are familiar with HTML, you can alter the subscription form code and style it on your own way.

* If you are a Blogger user and wanna add it as an element, you can add your button code snippet via HTML/JavaScript element. Read How to Add an External Widget or Codes to Blogger. Else if you wanna render it in a Blogger post or page, read How to Embed External Content on Your Blogger Posts or Pages.


Enjoy :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Seta Tutundjian said...

Great article Mayura, can you elaborate on how you can customize the format of the subscribe widget so that it is boarders and more catch like the one you have on this site? The style i am getting when activating the widget, doesn't have a boarder, font for heading All CAPS, the submit is next to email box etc... check it at www.dish-away.com .

Mayura De Silva said...

Hi Seta,

I have customized my email subscription widget by designing a background image and adding CSS styles dear. And by aligning text box and submit button. Yours is the one comes up with Blogger by default. It can't customize. First remove it from your blog. Then try out this tutorial, get your email subscription box code and add it to your site. Then you can customize it as you prefer.

Cheers...

Seta Tutundjian said...

Thaanks Mayura for the quick response (as usual:-)), the only problem that to customize it,you need to be familiar with HTML and I am not:( I was hoping that there is already a customized code that i can copy together with the instructions on where to copy it on the HTML code. cheers,

Mayura De Silva said...

Simply you just can add a background image for your coding dear :) Else if you go for further customization as I did, you need to edit several places in your template, layout and should familiar with HTML, CSS and Java Script. As you are not familiar with HTML, create background image suite to your widget and follow these steps. However you need designing skills.

i. Add below style code just before ]]></b:skin> line in your template by specifying your background image, width and height.

.email
{
background-image:url('[Specify Your Background Image]');
width:[Image Width]px;
height:[Image Height]px;
background-repeat: no-repeat;
}

ii. Now add your email subscription box code as below in a new HTML/JavaScript element.

<div class="email">

[Add Your Email Subscription Box Code Here]

</div>


Sometimes you may find tutorials for implementing subscription box code with their pre-customized email backgrounds too. Just google for it :)

Cheers...