haslo.ch - Guido's Blog » ajax http://www.haslo.ch/blog We believe that people with passion can change the world for the better. Wed, 16 Nov 2011 11:23:50 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 Creating my own little Portal Site http://www.haslo.ch/blog/creating-my-own-little-portal-site/ http://www.haslo.ch/blog/creating-my-own-little-portal-site/#comments Wed, 22 Jul 2009 11:43:15 +0000 haslo http://www.haslo.ch/blog/?p=2810 As you may or may not have noticed, I now have a second blog: haslos Politblog. I decided I’d want to blog about Swiss politics from time to time as well, and with this blog being English only and having a global rather than Swiss target audience, these subjects didn’t really fit in here.

Politblog

Politblog

So I went and started a second blog. Finding a theme and installing WordPress was one thing, but how do you tie those things together? And while we’re at it, why not add stuff like the Twitter feed or Delicious bookmarks? And why not make a mini-tutorial out of it? (That idea actually wasn’t mine, thanks @knowLED!)

When looking at easy ways to create such a mashup for a portal site, I stumbled upon the Google AJAX Feed API, and was amazed. Essentially, it does everything we need, in a format that’s incredibly easy to style with CSS. The higher-level FeedControl class is easy to use, and does exactly what I need: display a collection of feeds in <div> elements.

If you want to use it as well, I suggest you sign up for an API key (although it’s not mandatory). The code that actually fetches the feeds then is simple. Add this to your HTML <head> element…

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

…and then include bits of JavaScript that load the feeds. Since I wanted to be able to style the blog feeds a bit differently from the other feeds, I created two empty <div> elements that they’ll go into in the HTML body, with the ids “blogfeeds” and “otherfeeds”. Empty because they’ll be populated with the AJAX JavaScript goodness.

<div id="blogfeeds"></div>
<div id="otherfeeds"></div>

This is the JavaScript code, populating two FeedControl objects in an array and then rendering them to their respective <div>s. The feed URLs don’t have to be escaped, the escaped bits you see are what the Google API puts in as titles; I wanted those to be links to the respective feed source. Make sure you put it between <script></script> tags, best in the page header:

google.load("feeds", "1");
function initialize() {
  var feedControl = new Array(new google.feeds.FeedControl(), new google.feeds.FeedControl());
 
  feedControl[0].addFeed("http://www.haslo.ch/blog/feed/", "&lt;a href=\"http://www.haslo.ch/blog/\"&gt;Blog&lt;/a&gt;");
  feedControl[0].addFeed("http://www.haslo.ch/politblog/feed/", "&lt;a href=\"http://www.haslo.ch/politblog/\"&gt;Politblog&lt;/a&gt;");
  feedControl[1].addFeed("http://feeds.backtype.com/haslo", "&lt;a href=\"http://www.backtype.com/haslo/\"&gt;BackType&lt;/a&gt;");
  feedControl[1].addFeed("http://twitter.com/statuses/user_timeline/14274896.rss", "&lt;a href=\"http://twitter.com/haslo/\"&gt;Twitter&lt;/a&gt;");
  feedControl[1].addFeed("http://feeds.delicious.com/v2/rss/haslo?count=15", "&lt;a href=\"http://delicious.com/haslo/\"&gt;Delicious&lt;/a&gt;");
 
  feedControl[0].setNumEntries(6);
  feedControl[1].setNumEntries(6);
 
  feedControl[0].draw(document.getElementById("blogfeeds"));
  feedControl[1].draw(document.getElementById("otherfeeds"));
}
google.setOnLoadCallback(initialize);

That’s it, that will populate the <div> elements with the feed data. Unstyled, this does look a bit ugly though, a mere list. So I added some CSS, and used this nice tutorial here for making the footer stick to the bottom. Go and have a look, it’s all explained nicely there. Inside that footer, I styled the elements (with Google’s classes, found easily with Firebug) like this:

.gfc-results {
  height: 460px;
  overflow: auto;
  padding-left: 3px;
}
.gfc-resultsRoot {
  height: 500px;
  float: left;
  position: inline;
}
 
#blogfeeds * .gfc-resultsRoot {
  width: 23%;
}
#otherfeeds * .gfc-resultsRoot {
  width: 18%;
}

Finally, for the title, I made an absolutely positioned <div> at the top, et voilà.

The last step was making Facebook aware of the fact that I now have two blogs. As you may know, you can only add one source of the type Feed/RSS for automatic updates (nice tutorial for adding RSS feeds to Facebook). Which is silly.

But anyway, the way around this involved Yahoo Pipes, or rather, just one rather simple pipe that involves a union of the two feeds, and then a descending sort by date. I made a copy of it public, have a look. They’re nice like that, you can just drag-and-drop elements that you want to use, and connect their outlets (lower end) with other element’s inputs (upper end) until you reach the “pipe output” element, creating a flow diagram that works out of the box.

Portal

Portal

That’s it already, and here’s the result. I hope you can use an element or two out of this post for your own projects :)

]]> http://www.haslo.ch/blog/creating-my-own-little-portal-site/feed/ 4