Embedding Feed Gadgets in Google Sites

Today, I spent a few hours re-organizing waveprotocol.org to be easier to navigate. As part of that re-org, I wanted to also make it clear to people visiting the site that the protocol is in active development by showing them the activity from our discussion group and code repository. Since both the group and project offer ATOM feeds, I figured I could just embed a gadget to show the latest posts from the feeds.
After spending a good half hour trying to find a gadget that would do just that, I gave up and wrote one myself. And now you can use the gadget yourself if you're in a similar situation. :)

Using the Gadget

Here's how you can actually embed the gadget on your site:

1. Put the target page in editing mode. Open the "Insert" menu and select the final "More gadgets" option.
2. Select "Add gadget by URL" in the sidebar of the dialog.
3. Enter this URL in the input box:
   http://pamelafox-samplecode.googlecode.com/svn/trunk/feedgadget/feedgadget.xml
4. Enter the URL to your feed in the "Feed" input box in "Setup your gadget". The feed must be either an ATOM or RSS feed.
5. Customize the width, height, and title as desired.

Tip: If you want to embed multiple gadgets next to eachother, change your page layout to a multi-column view and stick a gadget in each column.

Finding Feeds

Here are some tips for finding feed URLs for various Google properties:

• Blogger: Scroll to the bottom of the blog and click "Posts (ATOM)" link. Here's an example blogger feed URL:
  http://otherfancystuff.blogspot.com/feeds/posts/default
• Google Groups: Click the orange "XML" image at the bottom of the group home. You can pick from various feeds - the "15 new messages" ATOM feed works well in my experience. Here's an example group feed URL:
  http://groups.google.com/group/wave-protocol/feed/atom_v1_0_msgs.xml
• Google Code Projects: Click the "Feeds" link on the sidebar of the project front page. You can pick from various feeds, depending if you want to show all activity or limit to just issues/downloads/etc. Here's an example project feed activity URL:
  http://code.google.com/feeds/p/wave-protocol/updates/basic
• Google Sites: Each site has an associated feed for recent updates. There's not a good way to find the link to that feed, but you can construct it easily by adding "activity.xml" to the site URL. Here's an example site updates feed URL:
  http://www.waveprotocol.org/activity.xml

About the Gadget

For developers, here's some information about how the gadget works.

The gadget uses the AJAX Feeds API and the google.feeds.FeedControl class, and of course, it uses the gadgets API. It's actually a nice example of how to write a simple gadget that uses a Google API and user preferences:

<Module>
    <ModulePrefs title="Feed Control" height="400"/>
    <UserPref name="feedurl" display_name="Feed" default_value="https://groups.google.com/group/wave-protocol/feed/atom_v1_0_msgs.xml"/>
     <Content type="html"><![CDATA[ 
     <div id="feed" style="font-size: small;"></div>
     <script type="text/javascript" src="http://www.google.com/jsapi"></script>
     <script type="text/javascript">
     google.load("feeds", "1");
   

     function initialize() {
       var prefs = new gadgets.Prefs();
       var feedControl = new google.feeds.FeedControl();
       feedControl.addFeed(prefs.getString("feedurl"), "");
       feedControl.draw(document.getElementById("feed"), {});
     }
     google.setOnLoadCallback(initialize);
     </script>
     ]]>
    </Content>
</Module>