"Latest Headlines" Widget

Dear Friend,

Google tools are just so amazing and innovative. Two years ago I started on my quest of having an AJAX & JSON library for myself to load feeds, now they have it as an Application Programming Interface (API), and then some.

I'm going to show you how to modify the Google Ajax Feed Widget sample to your blog, with three simple steps:

1. Get the key grom Google:

http://code.google.com/apis/ajaxfeeds/signup.html

2. Next, follow the instructions from this article Hacking Technique: How To Modify and add Widget to the Template, in particular section B.4.

Add this code to the header, right in front of the </head> tag. Remember to replace YOUR-KEY text with the new key.

<script src='http://www.google.com/jsapi/?key=YOUR-KEY' type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>

<style type='text/css'>
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
}
.gfg-title {
color : #612e00;
background-color: #FFF3DB;
}
.gfg-title a {
color : #612e00;
}
.gfg-root {
border: 1px solid #956839;
font-family: "Georgia", sans-serif;

}
</style>
<script type='text/javascript'>
function load() {
var homeUrl = "<data:blog.homepageUrl/>";
var feed = homeUrl + "feeds/posts/default";
new GFdynamicFeedControl(feed, "feedControl",
{numResults : 4});
<h6>Widget by <a href='http://hoctro.blogspot.com/2008/09/google-ajax-feed-widget.html'>Hoctro</a></h6>

}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>

3. Create a new "HTML/JavScript" widget, then add this line to the content:

<div id="feedControl">Loading...</div>

You can see the new widget on my blog at the moment, in front of the post area.

To change font, color, etc. modify the CSS styles. I override several the default CSS styles to match those of my blog.

.gfg-title {
color : #612e00;
background-color: #FFF3DB;
}
.gfg-title a {
color : #612e00;
}
.gfg-root {
border: 1px solid #956839;
font-family: "Georgia", sans-serif;

}

Good luck and have a nice day.

Hoctro
9/23/08

---

Update: 10/5/08

To place more than the default of 4 items, look for this line, at the end of step 2,

new GFdynamicFeedControl(feed, "feedControl",
{numResults : 4});

then modify it to become:

new GFdynamicFeedControl(feed, "feedControl",
{numResults : 25});

The maximum value you can put in is 25.