Charl van Niekerk » Blog: Google AJAX Feed API Muti Example

Main

Latest

Google AJAX Feed API Muti Example

Here is an example of how you can build a fancy Muti.co.za "widget" using the Google AJAX Feed API.

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Google AJAX Feed API Muti Example</title>
  <link rel="stylesheet" type="text/css" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css">
  <style type="text/css">
   body {
    margin: 40px;
    padding: 0;
    font: 0.8em verdana, arial, sans-serif;
   }
   h1 {
    margin: 20px;
    padding: 0;
    font: 2em verdana, arial, sans-serif;
    text-align: center;
   }
   #muti-feed {
    margin: 0 auto;
    max-width: 500px;
   }
   #muti-feed .loading {
    margin: 10px;
    padding: 4px;
    color: #676767;
   }
  </style>
  <script src="http://www.google.com/jsapi?key=notsupplied-wizard" type="text/javascript"></script>
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
  <script type="text/javascript">
   function LoadMutiFeed() {
    var feeds = [
     {title: "What's Hot", url: "http://muti.co.za/hot?output=rss"},
     {title: "Latest Submissions", url: "http://muti.co.za/new?output=rss"},
     {title: "Web Development", url: "http://muti.co.za/hot?tags=webdev&output=rss"},
     {title: "My Submissions", url: "http://muti.co.za/by?name=charlvn&output=rss"}
    ];
    var options = {
     stacked: true,
     horizontal: false,
     title: "Muti.co.za Social Bookmarks",
     numResults: 5,
     linkTarget: null
    };
    new GFdynamicFeedControl(feeds, "muti-feed", options);
   }
   google.load("feeds", "1");
   google.setOnLoadCallback(LoadMutiFeed);
  </script>
 </head>
 <body>
  <h1>Google AJAX Feed API Muti Example</h1>
  <div id="muti-feed"><span class="loading">Loading...</span></div>
 </body>
</html>

I have this up on a temporary URI. I say "temporary" not because I'm planning to remove it but because I can't guarantee its persistence. Yes, that is definitely not a cool URI. :)

This intends to support HTML 5.

Main

Latest

Archives

Google AJAX Feed API Muti Example

0 Comments