I wanted a quick and easy way for my portfolio page to show a dynamic list of what I've been blogging about on CreatingCode. Google makes this extremely easy by offering an API that does all of the behind the scenes work for you. They even have a feed control wizard that will generate the code for you.
Here is a snippet of what the feed control wizard generated for this site.
<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->
<!--
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
-->
<div id="feed-control-creatingcode">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>
<!-- Google Ajax Api
-->
<script src="http://www.google.com/jsapi?key=notsupplied-wizard"
type="text/javascript"></script>
<!-- Dynamic Feed Control and Stylesheet -->
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
</style>
<script type="text/javascript">
function LoadDynamicFeedControlCreatingCode() {
var feeds = [
{title: 'CreatingCode',
url: 'http://www.creatingcode.com/?feed=rss2'
}];
var options = {
stacked : true,
horizontal : false,
title : "CreatingCode"
}
new GFdynamicFeedControl(feeds, 'feed-control-creatingcode', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControlCreatingCode);
</script>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->