Adding Label Feeds to Your Template

Recently I saw a post over at phydeaux3's blog explaining how to access each of your label's individual feeds.

I decided I wanted a link to the feed next to each label listed in the official Blogger Labels page element.

Here's what I did...

The first thing to do is to go to Template -> 'Page Elements' -> 'Add a Page Element', and add a label element to your template.

Then go to 'Edit HTML' and check the the checkbox for 'Expand Widget Templates'

Now you'll wanna find where the label element is located in your template. It should look something like this:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <data:label.name/>
        <b:else/>
          <a expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        (<data:label.count/>)
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Next, you're gonna want to add a piece of javascript:

<script type='text/javascript'>
  var lblname = '<data:label.name/>';
  lblname = encodeURIComponent(lblname);
  var feedlink = 'http://beta.blogger.com/feeds/YOURBLOGID/posts/full/-/' + lblname;
  document.write('&lt;a href=&quot;' + feedlink + '&quot;&gt;&lt;img src=&quot;http://img304.imageshack.us/img304/3518/rect18st2.png&quot;/&gt;&lt;/a&gt;');
</script>

The parts in bold are the parts you need to (or may want to) change. YOURBLOGID is obviously going to be your blog id. You can exchange summary for full if you want. You can also use a different image if you want, or even use text instead of an image.

Finally, your Label element will look something like this when you're finished:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <script type='text/javascript'>
          var lblname = '<data:label.name/>';
          lblname = encodeURIComponent(lblname);
          var feedlink = 'http://beta.blogger.com/feeds/YOURBLOGID/posts/full/-/' + lblname;
          document.write('&lt;a href=&quot;' + feedlink + '&quot;&gt;&lt;img src=&quot;http://img304.imageshack.us/img304/3518/rect18st2.png&quot;/&gt;&lt;/a&gt;');
        </script>
        <b:if cond='data:blog.url == data:label.url'>
          <data:label.name/>
        <b:else/>
          <a expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        (<data:label.count/>)
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

An example of what this looks like is located in my sidebar.


Update:
Here's an even better way to do the above (in this case better means not requiring javascript):

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <a expr:href='"http://beta.blogger.com/feeds/YOURBLOGID/posts/full/-/" + data:label.name'><img src='http://img304.imageshack.us/img304/3518/rect18st2.png'/></a>
        <b:if cond='data:blog.url == data:label.url'>
          <data:label.name/>
        <b:else/>
          <a expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        (<data:label.count/>)
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Once again, the part in bold is what you add


Couple More Updates
Thanks to protesto (see comment below) the line in bold that gets added can be as simple as dropping in the following:

<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://img304.imageshack.us/img304/3518/rect18st2.png'/></a>

If you prefer to show the feed image as a background image via css then you can follow Vivek Sanghi's comment posted below.

Finally, if you use special/reserved url characters in your label names then you're gonna want to use the javascript method to insert the feed image. The reasoning for this is that the javascript method uses the encodeURIComponent() method which, for example, will replace the slash character (/) with %2F and make the link point to the correct location.