Como mostrar con Google Feed API artículos y noticias de otros sitios web

En un artículo anterior indicábamos cómo es posible mostrar en las páginas web de un sitio las publicaciones más recientes usando AJAX o insertándolas directamente mediante PHP.
Todo lo anterior es sin usar ningún servicio exterior lo que nos permite un control total y personalizar los elementos a nuestro gusto.
Otra opción más fácil y sencilla es usar la API para Feed que proporciona Google.
Por supuesto que también se usa AJAX, pero en este caso en los servidores de Google se almacena en cache los archivos del archivo RSS solicitado y devuelve el resultado en texto plano o con un estilo incluido.
Hay varias formas de usar el servicio, en el panel de Code Playground hay varios ejemplos y podemos obtener el código necesario.

Código para mostrar las publicaciones recientes de nuestro sitio

De forma simple podemos usar el siguiente código para mostrar en cualquier página las últimas publicaciones de nuestro sitio.
No es necesario poseer una clave API de Google para esta opción.
De forma predeterminada se muestran 4 entradas, pero podemos especificar otra cantidad usando el parámetro "feed.setNumEntries(n);".
Es posible usar distintas opciones para personalizar que necesitamos mostrar la lista de publicaciones.
Usa el siguiente código, sustituye la dirección de nuestro feed de noticias.
Las publicaciones se muestran en el lugar exacto donde se sitúe el contenedor "rss01".
Se incluye el estilo CSS que usamos pero que puedes modificar a tu antojo.
<style type="text/css"> #rss01{width:300px;border-radius:8px;padding:10px;background-color:white;border:2px solid #d4eefd;margin-bottom:1em;margin:6px 0 12px 0;font-size:0.8em;line-height:18px;} #rss01 a{color:#666666;font-weight:bold;} .rss0l {padding:0 0 8px 0;text-align:left;} </style> <script type="text/javascript"> google.load('feeds', '1'); function initialize() { var feed = new google.feeds.Feed("http://norfipc.com/rss.xml"); //feed.setNumEntries(10); //mostrar 10 publicaciones feed.load(function(result) { if (!result.error) { var container = document.getElementById("rss01"); var html = ''; for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; html += '<div class="rss0l"><a href="' + entry.link + '">' + entry.title + '</a></div>';} container.innerHTML = html;}});} google.setOnLoadCallback(initialize); </script> <div id="rss01"></div>
Un ejemplo funcionando:

Código para mostrar las últimas publicaciones de varios sitios

Otro método mediante el cual se puede mostrar las publicaciones de varios sitios.
En el ejemplo incluimos dos RSS.
Se muestran todo el contenido del feed, pero lo limitamos con "feed.setNumEntries" a solo 3 en cada RSS.
En este caso no es posible modificar el formato predeterminado.
Se muestra el título, la fecha/hora y la descripción de cada una.
<style type="text/css"> #rss02{border-radius:8px;padding:10px;background-color:white;border:2px solid #d4eefd;margin-bottom:1em;margin:6px 0 12px 0;font-size:0.8em;line-height:18px;} </style> <script type="text/javascript"> google.load('feeds', '1'); function OnLoad() { var feedControl = new google.feeds.FeedControl(); feedControl.setNumEntries(3); feedControl.addFeed("http://norfipc.com/rss.xml", "NorfiPC"); feedControl.addFeed("http://norfipc.com/amor/feed/rss2/", "Blog del amor"); feedControl.draw(document.getElementById("rss02")); } google.setOnLoadCallback(OnLoad); </script> <div id="rss02"></div>
El código anterior funcionando:

Código para mostrar publicaciones RSS de forma dinámica

Esta es la forma más compleja, pero más atractiva.
Es necesario en este caso usar una clave personal de la API de Google (para servidor), que se puede obtener gratis.
Lee como obtenerla: Como obtener una clave de la API de Google
<script src="https://www.google.com/jsapi?key=XXXXXXXX"></script> <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script> <style type="text/css"> @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css"); #feedControl {margin-top:20px;width:400px;font-size:16px;color:#9CADD0;padding:12px;} </style> <script type="text/javascript"> function load() { var feed ="http://norfipc.com/rss.xml"; var options = {numResults : 8} new GFdynamicFeedControl(feed, "feedControl", options); } google.load("feeds", "1"); google.setOnLoadCallback(load); </script> <div id="feedControl">Cargando...</div>
Un ejemplo: