Creating Custom BrowserFriendly Chicklets

BrowserFriendly offers a wide assortment of “chicklets,” or subscription badges that allow potential subscribers to stay engaged with your content in their favorite feed reader or news aggregator. In addition to the “core” set of chicklets and the additional options displayed in BrowserFriendly by default, you may add any subscription chicklet to BrowserFriendly that you want using a process very similar to what our FeedFlare service provides.

If you are a developer and wish to offer a BrowserFriendly Chicklet for use with your service, read on to learn how to format and host the required XML document that defines your Chicklet for anyone to use on BrowserFriendly.

Creating Your Own BrowserFriendly Chicklet

Let’s use an example from Grazr, a service that offers easy-to-use tools to turn feeds into “widgets” that can display your feed content on any blog. Let’s create a BrowserFriendly Chicklet that, when clicked, allows you to get a Grazr widget that you could then place on your own website.

Creating your BrowserFriendly Chicklet XML file

The simplest way to build a Chicklet is to start with this structure, which is based on a standard FeedBurner FeedFlare XML Flare Unit:

<FeedFlareUnit>
<Catalog>
    <Title>Add to Some Cool Service</Title>

    <Description>Use this feed with some cool service.</Description>
</Catalog>
<FeedFlare>
    <Text>Subscribe with Some Cool Service</Text>
    <Image src="http://someservice.com/add.gif"/>

    <Link href="http://someservice.com/useus?feedurl=${feedUrl}"/>
</FeedFlare>
</FeedFlareUnit>

Next, we figure out what real text and links we should use with our Grazr service example.

Determining link and chicklet image values

Using Grazr’s Create a Widget page, we can quickly determine the code needed to build a BrowserFriendly Chicklet by adapting the HTML code their service currently generates for a site badge. Using FeedBurner’s own feeds.feedburner.com/burnthis as an example feed, we get the following badge code from Grazr:

<a href="http://grazr.com/gzpanel.html?file=http://feeds.feedburner.com/burnthisrss2"
target="gz"><img src="http://grazr.com/images/grazrbadge.png" border="0" alt="Open Grazr">
</a>

From this code, we can use the badge image address and the link used to build the Grazr widget itself. Here is what our updated BrowserFriendly Chicklet code looks like:

<FeedFlareUnit>
<Catalog>
    <Title>Add to Grazr</Title>

    <Description>Create a Grazr widget from this feed.</Description>
</Catalog>
<FeedFlare>
    <Text>Subscribe with Some Cool Service</Text>
    <Image src="http://grazr.com/images/grazrbadge.png"/>

    <Link href="http://grazr.com/gzpanel.html?file=${feedUrl}"/>
</FeedFlare>
</FeedFlareUnit>

In our XML, we have removed the literal burnthisrss2 feed and replaced it with ${feedUrl}, which is a standard parameter FeedBurner will replace in BrowserFriendly with the address of the feed being viewed. When your Chicklet is displayed in BrowserFriendly it will link to the Grazr Create a Widget page and pass along your feed’s address automatically.

This BrowserFriendly Chicklet XML file now needs to be hosted on a publicly available web server so that it can be added to any FeedBurner feed that uses BrowserFriendly. Our example Unit is available at:

http://blogs.feedburner.com/misc/addtograzr.xml

Adding A Custom BrowserFriendly Chicklet To Your Feed

Follow these instructions to use the Chicklet you created above in BrowserFriendly:

1. Sign into FeedBurner and click the title of the feed you want to modify on My Feeds.
2. Click Optimize and then choose the BrowserFriendly option from the left-side service menu.
3. Click the More subscription options link.
4. Type the address of your Flare Unit into the text box and click Add ↑.
5. The Grazr chicklet should appear in the list above. Click the checkbox next to it to use it with this feed’s BrowserFriendly view.
6. Click [Save] to save your changes.
7. View your feed in a browser. You should now see the Grazr chicklet in the Subscribe Now! section of your feed.