(Update: The original bug has now been fixed. I also noticed Johnny K figured out the code required to remove the styling. However, I prefer the output and options offered by FeedBurner so I’m going to stick with my method).

When I started using Google Reader I saw a really nice feature that I was keen to use; Shared Items. For each news item Google Reader provides a “share” button that when clicked adds the item to a public page belonging to the user. For example, here’s mine. Users may create multiple pages for different categories and share their pages with family and friends. They may also incorporate the these items on their own pages by including Google-provided JavaScript.

It was this last feature that I was most interested in. Before now, items in my “Shared News” list have been manually created using mini-blog entries with a special category and some custom code. I thought that by switching to Google Reader’s Shared Items I would save myself a great deal of time - while reading feeds it would only take a single button click to publish items of interest to my shared page. Cool!

However; Although it was easy to use the JavaScript provided by Google Reader to display my shared items, giving them a look and feel consistent with the rest of my main page proved to be virtually impossible.

Google Reader offers several pre-canned color options for published news items. Amongst these is a ‘none’ option that, I assume, is intended to emit the list of items using only HTML tags. Unfortunately selecting this option has no effect on the JavaScript that’s generated, and attempting to manually tweak the code to use the ‘none’ style results in the list of items failing to display. While it’s possible to modify aspects of the provided styles via CSS and judicious use of the ‘!important’ tag, others style attributes seem impossible to change.

Luckily there’s an easy workaround using FeedBurner and only a little effort. In about 10 minutes you’ll be able to include Google Reader’s Shared Items on your site with any CSS you desire.

1. Add the RSS Feed from your Shared Items to a new or existing FeedBurner account.
2. Within FeedBurner, from the ‘Publicize’ menu select BuzzBoost and choose the display options you desire.
3. Paste the JavaScript from BuzzBoost into your webpage and use the provided guide to customize the appearance. Wrapping the items in a specific div and modifying the header and ul/li tags takes care of most of the work.
4. Should you wish to hide the FeedBurner icon at the bottom of the list, simply add the ‘display:none;’ attribute to the img tag within your Shared Items div.

Voila!