Monday, September 20, 2010

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:

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>

No comments: