Using and customizing BuzzBoost appearance

Creating Your BuzzBoost Code Snippet

To use BuzzBoost, navigate to the Publicize tab for your feed and select the BuzzBoost service from the menu on the left. Set BuzzBoost options the way you like, then click Activate (or Save if the service is already active).

Next, copy the BuzzBoost code snippet that FeedBurner generates for your feed and paste it into any webpage template you currently publish. When you view that page with a browser, BuzzBoost now displays your chosen feed’s headlines (and optional content item excerpts and date stamps, depending on your settings).

Customizing BuzzBoost’s Appearance

Your BuzzBoost output is marked up with id and class attributes, providing you with plenty of options for styling your resyndicated feed using Cascading Style Sheets.

Here’s a dissection of the output code, along with some tips for applying styles. If you’re looking for inspiration, check out some of our sample uses for BuzzBoost.

First, the code output as a whole. This block shows only one entry, but you can imagine how this would repeat itself for multiple entries.

Any BuzzBoost script you generate will include this class, so you can apply similar styles across multiple blocks on your site. Additionally, we apply a unique ID to each block (constructed from your FeedBurner feed URI and user ID), providing an opportunity for styling specific code blocks.

<p class="feedTitle">Feed Title Goes Here</p>

This is the title of your feed (or a title you specified at setup). If you did not choose to “Display feed title” at setup time, it won’t show up in your BuzzBoost output. To avoid conflicts with other elements with a class of feedTitle, use descendant selectors in your CSS, like this:

The li marks the first feed item. The headline and date for this item are marked with classes to provide a hook for styles. Once again, use descendant selectors in CSS to avoid conflicts. The date is determined by your choices at setup time — whether you have checked “Display item publication date” and your format and placement selections.

The excerpt (or full text, if specified) is wrapped in a div, which acts as an effective container whether you are including full HTML (with <p> tags and all) or simply plain text. Excerpts are displayed only if you check “Display item excerpts” at setup; the length and format are provided as drop-down menus.

<p class="enclosure"><a href="#">Download podcast</a></p></li>

Use descendant selectors in CSS to style the enclosure (e.g. podcast) links. The podcast link will only display if you checked “Display podcast links” at setup time and if the feed item contains an enclosure.

A small image with a link back to FeedBurner is inserted at the bottom of each BuzzBoost. This image is contained within a div so you have flexibility in positioning and styling this image.

</ul>
</div>

Just closing things out. Nothing to see here.

Overriding BuzzBoost Settings

When you generate your BuzzBoost, the options you choose are saved on our server. But it’s possible to override these settings on an individual basis. The following options can be overridden by editing the <script> tag that FeedBurner outputs:

Multiple overrides can be applied to your BuzzBoost. In fact, you can override all of the settings to create a completely different version of BuzzBoost without going through the setup process again. An example of how overrides can be combined: