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.
<div class="feedburnerFeedBlock" id="myfeeduri1234">
<p class="feedTitle">Feed Title Goes Here</p>
<ul>
<li><span class="headline"><a href="#">First item headline
here</a></span>
<p class="date">Jan 22, 2005</p>
<div>Aliquam delenit enim nostrud autem velit eum aliquip
lobortis consectetuer eum volutpat vero autem et. Tincidunt consequat
illum quis suscipit dolor nonummy in dolore.</div>
<p class="enclosure"><a href="#">Download podcast</a></p></li>
.
.
.
</ul>
<div id="creditfooter"><a href="http://www.feedburner.com" target="_blank">
<img src="http://www.google.com/help/hc/images/feedburner/buzzboost-pwrd.gif"
alt="Headlines by FeedBurner" /></a>
</div>
</div>
And now, we break it down line by line.
<div class="feedBurnerFeedBlock" id="myfeeduri1234">
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:
div.feedBurnerFeedBlock p.feedTitle { color: red; }
We’ll skip boring line three. Next!
<li><span class="headline"><a href="#">First item headline here</a></span>
<p class="date">Jan 22, 2005</p>
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.
<div>Aliquam delenit enim nostrud autem velit eum aliquip lobortis
consectetuer eum volutpat vero autem et. Tincidunt consequat illum quis
suscipit dolor nonummy in dolore.</div>
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.
<div id="creditfooter"><a href="http://www.feedburner.com" target="_blank">
<img src="http://www.google.com/help/hc/images/feedburner/buzzboost-pwrd.gif"
alt="Headlines by FeedBurner" /></a></div>
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:
| Parameter | Setting |
|---|---|
| nItems | Integer; number of items to output |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&nItems=10" type="text/javascript"></script> | |
| displayTitle | true or false; outputs feed title above feed content (see below) |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&displayTitle=true" type="text/javascript"></script> | |
| feedTitle | Any text; appears above your feed content if enabled |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&feedTitle=Your%20Title%20Here" type="text/javascript"></script> | |
| displayExcerpts | true or false; outputs item content according to settings (see below) |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&displayExcerpts=true" type="text/javascript"></script> | |
| excerptFormat | full or plain; outputs item content as full HTML or a plain-text excerpt |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&excerptFormat=plain" type="text/javascript"></script> | |
| excerptLength | Integer (0 means all); number of words to be shown (plain text only) |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&excerptLength=30" type="text/javascript"></script> | |
| displayDate | true or false; outputs item date according to settings (see below) |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&displayDate=true" type="text/javascript"></script> | |
| dateLocation | above or below; positions date above or below item content |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&dateLocation=above" type="text/javascript"></script> | |
| dateFormat | MM/dd/yyyy or MMM d, yyyy or MMM d yyy or d/M/yyyy or M/d/yyyy or MMMM d, yyyy; formats item date |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&dateFormat=MM/dd/yyyy" type="text/javascript"></script> | |
| displayEnclosures | true or false; outputs a link to podcasts or other enclosed media |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&displayEnclosures=true" type="text/javascript"></script> | |
| openLinks | new; opens links in a new window (opens in same window if not new) |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&openLinks=new" type="text/javascript"></script> | |
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:
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&openLinks=new&displayDate=
false&displayEnclosures=true&displayExcerpts=false" type="text/javascript"></script>