Friday, March 4, 2011

Feeds in your Blog with Google Ajax Feed API

Put RSS Feeds in your WordPress blog without extra plugins or jQuery



I started using the Google Ajax Feed API and i really like it, so I decided to write a WordPress plugin that will use the API to place rss or xml feeds on your wordpress blog. There are plugins out there already that allow you to put feeds on your blog, and one of them actually uses the Google API, it's called jQuery Google Feed Plugin but as the name suggests it also uses jQuery. jQuery is a wonderful JavaScript library but sometimes I use prototype and I don't want to load both libraries. Actually, I don't want to load any extra library, and after looking at the simplicity of implementing this, I decided that writing a wordpress plugin for this is a waste of time. Anyone can insert feeds inside their wordpress blog with just a couple quick steps:

First, get your own free Google API key and insert this javascript in the header.php file right between the <head> and </head> tag:

[sourcecode language="javascript"]
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-GOOGLE-API-KEY-HERE"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg");
feedControl.addFeed("http://feeds.feedburner.com/Techcrunch", "TechCrunch");
feedControl.setNumEntries(10);
feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(initialize);
</script>

[/sourcecode]

Now, go anywhere in your blog where you want the feeds to appear and create the div where you want the results to be displayed:

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

This feed technique will allow you to insert as many feeds as you want into your blog and configure the titles, number of entries, and the style via css.

feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg"); - Here the feed url is http://www.digg.com/rss/index.xml and feed title is Digg, you can change these or add another feed using the same format.

feedControl.setNumEntries(10); - The number 10 here represents how many entries you want to display, change it if you want to show less or more than 10 entries per feed.

If you don't like this technique and still want to insert feeds into your WordPress blog, you can try these plugins:

1 comment:

  1. Hey. Is there a working example to look at? Does this include images? I see you have another post that is for only images... I'm hoping to make it work with one image per title. Is that possible? It is kind of you to answer my questions. (this is not for a public website... I've always hoped to find a way to make a "start page" for myself, with headlines+one image from my favorite websites).

    ReplyDelete