Adding FeedFlare to your Blogger blog

This guide is for "New Blogger". Still using "Old Blogger"? Show me the Old Blogger steps.

In order to add FeedFlare to your blog, you'll need to insert a small piece of code near the post metadata (author, date, comments, etc) in your template. Fortunately, this is really easy (really!) — just follow these seven short steps.

1. Sign in to Blogger.

2. For the blog to which you're adding FeedFlare, click "Manage Template" or "Manage Layout" (you'll see one or the other).

   

   If you clicked "Layout," follow the instructions for editing Blogger Layouts. If you clicked "Template," follow the instructions for editing Blogger Templates. (Yes, we realize that's a little confusing!)

Editing Blogger "Layouts"

1. Copy this code:

   <script expr:src='"http://feeds.feedburner.com/~s/YOUR-FEED-URI-HERE?i=" + data:post.url' type="text/javascript" charset="utf-8"></script>

2. In Blogger, click "Edit HTML". You should see the HTML for your blog template.

   

3. Click the "Expand Widget Templates" box above and to the right of the template code.

   

4. In your template code, scroll to <div class='post-footer'>. (Don't see this code? You may be using a customized or non-standard Blogger template. Don't panic! Paste the code near the post metadata (author, date, comments, etc).

5. Paste the code from step 1 just below <div class='post-footer'>.

   

6. Click [Save Template].

   Click "View Blog" to see what you've done, and enjoy!

1. Sign in to Blogger.

2. From the Blogger Dashboard, click the blog to which you're adding FeedFlare.

   

3. Click the "Template" tab. You should see the HTML for your blog template.

   

Editing Blogger "Templates"

1. Copy this code:

   <script src="http://feeds.feedburner.com/~s/YOUR-FEED-URI-HERE?i=<$BlogItemPermalinkURL$>" type="text/javascript" charset="utf-8"></script>

2. In Blogger, click "Edit HTML". You should see the HTML for your blog template.

   

3. In your template code, scroll to <p class="post-footer">. (Don't see this code? You may be using a customized or non-standard Blogger template. Don't panic! Paste the code near the post metadata (author, date, comments, etc.).)

4. Paste the code from step 1 just above <p class="post-footer">.

   

5. Click [Save Template Changes].

   Click "View Blog" to see what you've done, and enjoy!

Customizing FeedFlare's Appearance on Your Blog

Your FeedFlare can be styled almost infinitely using CSS. Let's take a close look at how FeedFlare's output is structured:

<p class="feedburnerFlareBlock"><a href="flare1url" class="first">Flare 1</a> <span>&#8226;</span> <a href="flare2url">Flare 2</a> <span>&#8226;</span> <a href="flare3url">Flare 3</a></p>

There are a few interesting (and important) things to point out about this:

• FeedFlare is wrapped in a <p> tag, so it will inherit the default paragraph styles in use on your blog. However, because it contains a class of feedburnerFlareBlock, you can style it however you want.

• By default, FeedFlare uses bullets (•) as separators. But each one is wrapped in a <span> tag, so you can hide them, restyle them, or make them dance at your leisure.

• To aid your styling, we've applied a class of first to the first link.

Have questions? Visit our Support Forums where real live FeedBurners are on hand to help you out.

Close window

Explore FeedBurner Help