Adding FeedFlare to your blog

Check out our custom instructions for Blogger, Movable Type, TypePad or WordPress.

In order to add FeedFlare to your blog, you’ll need to insert a <script> tag at the bottom of each post (near author, date, comments, etc), anywhere a post appears. Usually, this means editing two templates — the home page template, which lists all recent posts, and the individual post template, which shows one post at a time.

Tag Structure

First, let’s look at how an example <script> tag is structured:

There are two pieces of data you need to insert in this tag before it will work on your blog:

Your FeedFlare URL. Here it is: http://feeds.feedburner.com/~s/YOUR-FEED-URI-HERE

Dynamic post URL. Use one of your blog’s template tags to dynamically insert the URL of the current post. (E.g. Blogger uses <$BlogItemPermalinkURL$>; Movable Type uses <$MTEntryPermalink$>.)

Copy…

Grab the appropriate code for your blogging platform. If you don’t see yours here, use the first one (“Generic”).

Generic

<script src="http://feeds.feedburner.com/~s/YOUR-FEED-URI-HERE?i=POST-URL-HERE" type="text/javascript" charset="utf-8"></script>
Be sure to replace the “POST-URL-HERE” with a template tag that works in your blogging platform.

TextPattern

<script src="http://feeds.feedburner.com/~s/YOUR-FEED-URI-HERE?i=<txp:if_individual_article><txp:permlink /><txp:else /><txp:php>echo rtrim(site_url(array()), '/');</txp:php><txp:page_url /></txp:if_individual_article>" type="text/javascript" charset="utf-8"></script>
(Courtesy Markus Merz.)

Drupal

<script src="http://feeds.feedburner.com/~s/YOUR-FEED-URI-HERE?i=http://mysite.com<?php print $node_url ?>" type="text/javascript" charset="utf-8"></script>
(Make sure to change “mysite.com” to your site’s actual domain name.)

JRoller

<script src="http://feeds.feedburner.com/~s/YOUR-FEED-URI-HERE?i=$absBaseURL/page/$userName?entry=$entry.anchor" type="text/javascript" charset="utf-8"></script>
(From http://jroller.com/page/dunpanic?entry=feedflare_for_jroller)

PluggedOut

<script src="http://feeds.feedburner.com/~s/http://feeds.feedburner.com/~s/YOUR-FEED-URI-HERE?i=http://www.myblog.com/index.php?entryid=<entryid>" type="text/javascript" charset="utf-8"></script>
(Make sure to change “myblog.com” to your site’s actual domain name.)

Serendipity

<script src="http://feeds.feedburner.com/~s/YOUR-FEED-URI-HERE?i={$entrydata.url|escape:url}" type="text/javascript" charset="utf-8"></script>
(Courtesy Mario Witte.)

Mephisto

<script src="http://feeds.feedburner.com/~s/YOUR-FEED-URI-HERE?i=http://{{ site.host }}{{ article.url }}" type="text/javascript" charset="utf-8"></script>
(Courtesy Thibaut Barrère.)

… and Paste

Place this code at the bottom of each post, anywhere a post appears. At the bare minimum, this means editing two templates — the home page template, which lists all recent posts, and the individual post template, which shows one post only.

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 additional questions? Visit our FeedBurner Help Group where real live FeedBurners are on hand to help you out.

Close window

Explore FeedBurner Help