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.

    
   <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://feedburner.com" target="_blank">
     <img src="http://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://feedburner.com" target="_blank">
    <img src="http://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>