FeedBurner and TypePad are now magically connected, so adding FeedFlare to your blog couldn’t be easier!
(If you have converted to advanced templates on your TypePad blog, check out our instructions for Editing Your TypePad Templates.)
Adding FeedFlare to Your TypePad Standard Templates
Sign in to TypePad. Click the blog to which you’re adding FeedFlare.
If you haven’t already, connect your TypePad feed to FeedBurner. Let our Quick Start guide lead the way (no flashlight required).
Click the “Design” tab and then click “Change Content Selections” near the bottom of the page.
You should see a summary of content shown on your blog.
Check the “FeedFlare” box and click “Save Changes.”
There is no step three five! That’s it! FeedFlare is now automatically inserted in new posts to your blog. (If you want to see FeedFlare on all previous posts, you must republish your blog.)
Editing Your TypePad Templates
If you have converted your TypePad templates to “advanced” (so you can directly edit the template code), follow these instructions to edit your templates.
Template editing instructions
-
Sign in to TypePad. Click the blog to which you’re adding FeedFlare.
-
Click the “Design” tab and then “Manage Your Designs.” You should see a list of templates for your blog.
Locate the template you’re currently using, and check the box to its left. Click the “Convert to Advanced” button. (If you’re already working with an advanced template, this step is obviously not necessary.)
Activate your new advanced template by clicking “Apply Design.” You should see a list of your Advanced Templates available for editing.
See step 2 as a Quicktime movie (23 seconds, 1.8MB)
-
Near the bottom of the page, locate and click “Create new template module.” Give your new template a name of entry-list by typing it in the “Template Name” field. (If you already have a template module called “entry-list,” just edit it and skip to step 4.)
Navigate to this page in TypePad’s Knowledge Base (preferably in a new tab or browser window) and copy the “Entry List” template module code.
Return to your new TypePad module, and paste the code you just copied into the empty text field.
See step 3 as a Quicktime movie (17 seconds, 776KB)
-
Copy this code:
In your new template module, scroll down to <p class="entry-footer">. Paste the code you copied just above <p class="entry-footer">. Click “Save.”
See step 4 as a Quicktime movie (15 seconds, 632KB)
-
Click the back button to return to the advanced template list. Click “create new template module” again. Give this template a name of entry-individual. (If you already have a template module called “entry-individual,” just edit it and skip to step 6.)
Navigate to this page in TypePad’s Knowledge Base (preferably in a new tab or browser window) and copy the “Individual Entry” template module code.
Return to your new TypePad module, and paste the code you just copied into the empty text field.
See step 5 as a Quicktime movie (20 seconds, 1.3MB)
-
Copy this code:
In your new template module, scroll down to <p class="entry-footer">. Paste the code you copied just above <p class="entry-footer">. Click “Save.”
See step 6 as a Quicktime movie (15 seconds, 1.3MB)
-
Click the back button to return to the advanced template list. Click “Main Index Template” to edit the template that creates your blog home page.
In your template, scroll down to <$MTWeblogIncludeModule module="entry-list"$> and replace with <$MTInclude module="entry-list"$>. (Notice the omission of the words “Weblog” and “Module” — everything else is the same.)
See step 7 as a Quicktime movie (18 seconds, 1.1MB)
-
Click the back button to return to the advanced template list. Click “Individual Archives” to edit the template that creates your individual entry pages.
In your template, scroll down to <$MTWeblogIncludeModule module="entry-individual"$> and replace with <$MTInclude module="entry-individual"$>. (Notice the omission of the words “Weblog” and “Module” — everything else is the same.)
See step 8 as a Quicktime movie (20 seconds, 1.3MB)
-
Click the back button to return to the advanced template list.
Click “Publish Weblog” to commit your template changes. Then, view your 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>•</span> <a href="flare2url">Flare 2</a> <span>•</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.