Des de que Google va obrir als programadors web l'API de la seves aplicacions més populars (des del cercador a Picasa, tot passant per Blogger, Google Calendar i altres serveis web), que aquesta s'ha convertit en una eina bàsica de treball per a molts dissenyadors i programadors web que han deixat de trencar-se el cap creant complexes aplicacions i scripts per a passar a utilitzar solucions que Google distribueix gratuitament.



Una de le més populars eines de Google Code (directori on Google publica la seva API de manera oberta) és la Google API Feed: bàsicament, un framework javascript per a integrar fonts RSS externes en les nostres pàgines i personalitzar-ne l'aspecte mitjançant CSS.







El funcionament de la API és senzill, només necessiteu un codi que us donara Google en aquest enllaç: http://code.google.com/apis/ajaxfeeds/key.html i que haureu d'integrar en el "head" de la vostra web.



Seguidament, haureu de invocar el javascript en el "head" de la manera següent:

<script type="text/javascript">
      
      google.load("feeds", "1");

      function initialize() {
        var feedControl = new google.feeds.FeedControl();

        feedControl.addFeed("FEED", "TITLE");

        feedControl.addFeed("FEED", "TITLE");

        feedControl.draw(
          document.getElementById("feedControl"),
          {
            drawMode : google.feeds.FeedControl.DRAW_MODE_LINEAR
  });
      }
      google.setOnLoadCallback(initialize);

    </script>

Recordeu de substituir els camps FEED i TITLE per la ruta RSS i el títol de la Font RSS. Podeu afegir fonts RSS, afegint línies iguals a les indicades.



Finalment, allà on volgueu que aparegui, simplement enganxeu-hi el següent:

<div id="feedControl"><img class="loading" src="http://hipertextos.googlepages.com/loading.gif" style="width:24px;" /></div>

Podreu personalitzar l'aspecte dels resultats mostrats a través de CSS, seguint l'estructura següent:

/* ---------------------------------------------------
   RSS Google API  
------------------------------------------------------ */
#feedControl {

  }
#feedControl .gfc-resultsRoot {

}
#feedControl .gf-snippet {


}
#feedControl .gf-author {

}
#feedControl .gf-spacer {

}
#feedControl .gf-relativePublishedDate {

}
#feedControl .gfc-results {

}
#feedControl .gfc-result {

}
#feedControl .gfc-title {

}
#feedControl .gf-title {


}
#feedControl a:hover {

}
#feedControl a:visited {

}
#feedControl img.loading {

}
#fontsRSS {

}
#fontsRSS p {

}
#fontsRSS li {

}
#fontsRSS a:hover {

}