Saturday, April 26, 2014

Adding an RSS feed icon to your blog, using Feedburner

Feedburner's chicklets are used to add the standard "orange radar" button to your blog.  This lets readers to subscribe the RSS feed of your choice.   The information is targeted to Blogger users, but most of it applies to anyone who uses Feedburner.


What is a Chicklet, and why you need one:

Previously I've explained how to remove the (ugly and confusing) "Subscribe to Posts (atom)" link from your blog, and why RSS / Subscribe to Posts is important to your blog and how to create a Feedburner feed for it.

But an RSS feed is useless unless people subscribe to it.  So as well as making the feed, you also need to put something in your blog that lets your readers sign up for it.

A standard option for this is the orange square with "radar" markings on it, which many people call a "chicklet" (since it lets your viewer - the chicken? - have access to the feed you are providing).

Feedburner also has options for:
  • Using a custom icon from popular web aggregators
    I'm not sure that this is a great idea, because you don't know what feed-reader software your readers actually use, and the whole point of a feed is that you don't dictate how people see your blog.
  • Using an icon that promotes Feedburner.  This cute, but I've never seen anyone use it.

How to add a chicklet to your blog:


Log in to Feedburner, using the Google account that owns the feed.

Click on the name of the feed you want to provide a subscription tool for.

Choose the Publicize tab.

Choose the Chicklet Chooser option, from the left navigation bar.

Choose one of the options shown:  the default one is the standard-size RSS-radar-button.

Scroll to the bottom of the screen and either
  • Copy the HTML that is shown, and add it to your blog in the same way that you would add any other 3rd party HTML,

    OR  (note:  there have been some reports that the option below doesn't work any longer, as Blogger has changed but tools like Feedburner have not help up)
  • Choose Blogger from the drop down list beside "use as a widget in", and click Go

    This takes you to a Blogger screen where you can choose which blog you want to add the gadget to (if your current login has more than one), and what title to use for it. 

    When this is done, click Add Widget

    This takes you to the Design > Layout tab, where you can drag-and-drop the widget to wherever you want it.  
    (When I tried it just now, instead of the layout screen I got a "bad request" message.  However pressing Save and then View Blog brought up the blog with the gadget showing, and I was able to go back and edit the layout later on).


What your readers see:

Your readers will see an item, wherever you put it, that looks like this:

or something similar, depending on what option you chose from the Chicklet Chooser screen.

When someone clicks on one of these items, they are taken to either a screen where they choose which feed-reader software to add your site to (if you've used the first option), or to the specific feed-reader software.


Customising the widget code:

If you use the generic RSS button, then you may want to customise the widget code slightly:  It looks ugly not to have a space between the picture and the word "Subscribe" - and it's good to have the phrase "RSS" on the screen because that'ss what RSS-savvy people search for when they're looking at a website and want to find the subscribe option.  I also prefer if the subscribe action opens in a new tab/window, rather than taking the reader away from my blog.

This is quite easy to do, if you put a few line breaks in so you can see that
  • the code is actually two separate link statements
  • the first one has an image (the orange "radar bars" that it takes from Feedburner)
  • the second is a text link
  • both of them link to the RSS feed address

So it's quite easy to add a couple of extra spaces (shown as   ), change the text as I've done below, and add   target="_blank"   to both of the links
<a href="http://feeds.feedburner.com/Blogger-hints-and-tips" rel="alternate" type="application/rss+xml" target="_blank">
<img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="vertical-align:middle;border:0"/>
</a>

&nbsp; &nbsp; &nbsp;

<a href="http://feeds.feedburner.com/Blogger-hints-and-tips" rel="alternate" type="application/rss+xml" target="_blank">

Subscribe via RSS

</a>

I generally also put the option to subscribe to my blog by email and the Feedburner FeedCount item (which shows the number of subscribers) in the same area, to give people options, and to encourage them to subscribe.



Related Articles:

Using Feedburner to give your blog a Subscribe by Email option

Adding 3rd party HTML to your blog

Why RSS / Subscribe to Posts is important to your blog

How to create a Feedburner feed for your blog

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

34 comments:

  1. Thanks for your tips,Just now I add rss button on my blog.

    ReplyDelete
  2. I'm afraid I did not understand the instructions given under the heading "How to add a chicklet to your blog". It would be a lot better if you shot the process and show us a video of it so that viewers could understand it better. Hope you will do it.

    ReplyDelete
  3. Hi Anita - sorry you had difficulty with these instructions. It may help to note that they have not yet been updated for the new Blogger interface (this is a work-in-progress - hopefully will get to this article soon).

    I'm afraid I'm not keen to do extensive screen shots and videos - because they would be almost useless when Blogger or and other product (in this case Feedburner) made a change. So personally I prefer text-based descriptions that develop readers understanding on how things work.

    But there are lots of different Blogger-helper sites around (I have listed my favourites in the sidebar) - hopefully you can find one whose materials are more helpful for you.

    ReplyDelete
  4. Thanks for posting this. It was a huge help for me and easy to follow for sure!

    ReplyDelete
  5. Thank you! I've looked at several "tips" about this but yours is the most "dummy" friendly...I'm brand new at this and I know very little.

    It's great to have posts like this to help people like me! Great job!

    Chandra
    www.judyjane.com

    ReplyDelete
    Replies
    1. Glad to help, Chandra. Good luck with your blog.

      Delete
  6. Very useful tip. I am going to use it on my site just now, i am only wondering if the right bottom on my site is the right place for it, but i will have to test it. I think that an image logo can work in blogger too, you just add the link on the image and it should work fine.

    ReplyDelete
  7. nice article. but i think it is also possible without going into feedburner. I described it below : [i am using simple html script gadget to create]
    http://joy-in-blogging.blogspot.com/2012/03/add-rss-feed-icon-to-your-blogspot-blog.html
    let me know your comments. cheers

    ReplyDelete
    Replies
    1. Yes that works, but not if you're using Feedburner to manage your Feed. And if you're not using Feedburner, there's an even simpler way - just add the Subscribe gadget. No coding required.

      Delete
  8. very useful to me, i'm not a techie person, very easy to follow, thanks!

    ReplyDelete
  9. I think they're called chicklets because they look like chiclets gum: http://nuts.com/images/auto/801x534/assets/869ed4decfec61cb.jpg

    good tutorial.

    ReplyDelete
    Replies
    1. Yup, I think you're right: I heard about chiclets recently, when I did a project with some Americans. Unfortunately people in lots of other places have never heard of them though, so it just sound like an odd name.

      Delete
  10. Thank you so much. Your instructions are very clear.

    ReplyDelete
  11. Thanks so much, but can you help me with the right rss feed url to use for add this follow button. I have used the one that appears on feed content page yet it does not seem to work. I want to have all the follow buttons together on my blog, but the rss one keeps opening with an error message on my blog which says "sorry the page you requested on this page does not exist" pleas help!

    ReplyDelete
  12. Thanks! It was very helpful. I want to add a facebook icon and perhaps google plus icon as well next to the rss icon (like your header). Can you please guide me how to? Many thanks!

    ReplyDelete
    Replies
    1. See if this article helps:
      http://blogger-hints-and-tips.blogspot.com/2012/05/simple-subscription-buttons-for-blogger.html

      Delete
  13. thank you! at first blogger, feedburner were a little like contemplating life on mars... now, thanks to posts like yours, I am gradually getting it...

    ReplyDelete
  14. thank you for this post - made it sooo easy!! now my blog is looking better.

    ReplyDelete
  15. What do I do to get the headline animator to work? It has an error code.

    ReplyDelete
  16. brother help me my blogger feed burner address are not make automatically by google feed burner........ad a gadget >layout> follow by email the feed address not available.....
    if make feed address for blogger this message appears Your feed filesize is larger than 576K. You need to reduce its size in order for FeedBurner to process it. Tips for controlling feed file size with Blogger can be found in Tech Tips on FeedBurner Forums, our support site. tell me how to make???

    ReplyDelete
  17. Thank you very much, this article has been of great use to me.

    ReplyDelete
  18. Hello!
    Can you help me? I've had a blog for a two years, and I've thousands and thousands of pictures there (in Picasa web albums). But how can I create a NEW album to Picasa web albums, which has an orange Blogger icon? I really need one, but I don't know how to create one... Thanks for help!

    ReplyDelete
    Replies
    1. Just to go Picasa web albums (https://picasaweb.google.com/lh/myphotos?noredirect=1) and upload a photo that looks like the cover you want to use for your album (ie an orange Blogger icon), saying to put it in a new album.

      Delete
    2. Oh, I didn't explain my problem well..
      When I upload a photo in/to my blog, it automaticly uploaded to my default album (the default album's name is same as my blog's, and it has an orange Blogger icon before the album's (/blog's) name, so that means that all the images that I upload to my blog are automaticly going to that album) in Picasa Web Album. But how can I change this default album? Always the Picasa Web Album has changed the default album automaticly, but now it hasn't, and it bothers me. So, I need to know how to create a new (delault) album, which has an orange Blogger icon before the album's name! I hope you understood my problem and you could help me! :)

      Delete
  19. i am facing problem unable to add my blog to feeds error is 'The URL does not appear to reference a valid XML file. We encountered the following problem: Error on line 12: The reference to entity "zx" must end with the ';' delimiter.'
    also when i click to validate it shows another page error ; http://feedvalidator.org/check.cgi?url=http%3a%2f%2fwww.citizen-reviews.blogspot.in%2f
    error message is 'It looks like this is a web page, not a feed. I looked for a feed associated with this page, but couldn't find one. Please enter the address of your feed to validate'

    ReplyDelete
  20. Thanks so much! I was able to add my own icon and connect to RSS feed on my blog! :)

    ReplyDelete