"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.

10 comments:

Harian said...

Wow.. thanks a lot. It's amazing widget

Is said...

Hoctro, welcome back after the long break :) How's your son doing? Hope all in good health. I'd say I'm an avid reader of your blog.

A comparison between WordPress and Blogger, they do have featured articles with tabs. If you go down below/underneath the container, you'll see small portions of their normal posts/articles.

My question is:-

Can you come out with the hack on the above matter as if I want to have my featured articles displayed, I've to place it manually i.e wrap the content between two divs and call AJAX to fetch the content which is quite tedious. It would be a great help if I simply can choose/select from my posts/articles.

Thanks.

Is

Hoctro said...

is:

There is kind of difficult the way you want it, since none of the widget has the ability to come up posts as a table to choose from. I'd think the best way is to weight them into priorities for showing, either as labels #5 to #1, or use the latest "Rate this article" from "Blogger In Draft" to show. I'm already thought of such widget, but it's kind of time-consuming to write, then test such lengthy widget. We'll see.

cheers,

hoctro

proAMATEUR said...

Thank you very much. This is 1 widget great, but if you apply the identical instructions of your blog, it will be my very bad so I customized by inserting the code directly into the template and the result is very much better.
You can visit the http://blogvietshow.blogspot.com to further consultation on this issue agree.

ေမာင္လူေအး said...

Thanks a lot. It's very good widget!

donya kewarasan said...

nice and wonderfull, now i love my blog...thank you Hoctro

suryaden said...

i really like this widget...thanks

donya kewarasan said...

why it cannot run in google chrome?

BIZZNURSE said...

Hi Hoctro..! i really admire your tricks! This one really works ! (all of them works) I just love to drop by and try ur tricks!

yahaya said...

thanks