Como podran observar en el costado derecho de este blog, tengo un BlogRoll (como tienen muchos sitios) con valor agregado ... lo encontraron? 
Bueno... eso lo he llamado Blogroll Dinamico, y usa tecnologia GOOGLE!
-Porque Dinamico? Rta; pues... no es estatico como el resto. Este cambia, dependiendo de los dueños de cada sitio, va cambiando junto a su contenido gracias a los Feeds.
Los sitios que ahora forman parte de mi blogroll son los que leo, algunos ni saben que yo existo, pero bueno... lo he dicho muchas veces, yo no hago esto para hacerme popular ni q la gente me lea y me conozca, lo hago para mi propia satisfaccion ;)
Si algun lector de ReCreando tiene blog (o sitio web), y no esta en el blogroll y desea aparecer, por favor me lo avisa en este post (comentando), y sera agregado a la brevedad.
A continuacion explico como hacer un BlogRoll Dinámico...
Usamos Google Ajax APIs (sitio web)
De ahi vamos a Google Ajax Feed APIs (sitio web)
Ahi podemos ver muchos ejemplos, y articulos, y demases q logran dia a dia en la comunidad de google... pero lo que nos interesa a nosotros, es crear un blogroll, asi que hacemos click en el Wizard.
Pasa a otra pagina donde nos explican que es... y bla bla bla...
Vamos a los bifes!
Click aca:
.../wizards/dynamicfeed.html
Ahi estamos...
Donde dice: "Customize it"
Tienen que elegir si quieren que sea vertical u horizontal... (y google les muestra como queda) ...
En Title: pongan BlogRoll Dinamico
En donde dice "Feeds Expression" borren todo el texto y coloquen:
Infobae, People, E-Online, TMZ, ESPN, NY Times
Hagan click en Preview. (Interesante?)
Hagan click en el paso 2, "Generate Code" ...
Y obtendran un codigo html ... no se asusten, es facil de usar.
El codigo generado es el siguiente, y OJO (NO PUEDEN USAR ESTE CODIGO SIN CAMBIAR EL API-KEY):
<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->
<!--
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
-->
<div id="feed-control">
<span style="margin:10px;padding:4px;">Loading...</span>
</div>
<!-- Google Ajax Api
-->
<script src="http://www.google.com/jsapi?key=notsupplied-wizard"
type="text/javascript"></script>
<!-- Dynamic Feed Control and Stylesheet -->
<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");
</style>
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'Infobae',
url: 'http://www.infobae.com/adjuntos/html/RSS/hoy.xml'
},
{title: 'People',
url: 'http://rss.people.com/web/people/rss/topheadlines/index.xml'
},
{title: 'E-Online',
url: 'http://www.eonline.com/syndication/feeds/rssfeeds/topstories.xml'
},
{title: 'TMZ',
url: 'http://www.tmz.com/rss.xml'
},
{title: 'ESPN',
url: 'http://sports-ak.espn.go.com/espn/rss/news'
},
{title: 'NY Times',
url: 'http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml'
}];
var options = {
stacked : true,
horizontal : false,
title : "BlogRoll Dinamico"
}
new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->
:: Instrucciones :: (sitio oficial)
- Primero, tienen que obtener (si no obtuvieron ya) un Google AJAX Feed API key... eso lo obtienen haciendo click aca.
Una vez que tienen el KEY, tienen que sustituir el KEY en la parte correspondiente, es decir:
<!-- Google Ajax Api--> <script src="http://www.google.com/jsapi?key=notsupplied-wizard"type="text/javascript"></script>
Donde dice: key=notsupplied-wizard ... uds tendran que poner key=(aca el numero)
Es simple! (damn) ...
- Una vez que tienen el codigo generado, con su KEY (de acuerdo al sitio donde lo usen)., copian todo el codigo generado y lo pegan entre el <head> y </head> de su sitio.
- Ahora que ya esta pegadito en su lugar, buscan la parte donde salen los titulos de los sitios, por ejemplo: Infobae, People, etc...
Deben ver que dice:
{title: 'Infobae',
url: 'http://www.infobae.com/adjuntos/html/RSS/hoy.xml'
},
{title: 'People',
url: 'http://rss.people.com/web/people/rss/topheadlines/index.xml'
},
Bueno, simplemente cambien los titulos por los sitios de sus blogrolls, por ejemplo el mio quedaria:
{title: 'ReCreando',
url: 'http://feeds.feedburner.com/ReCreando'
},
{title: 'OTRO SITIO',
url: 'http://EL RSS DE ESE SITIO!'
},
Es muy importante destacar que tiene que ser un feed en RSS. /No he probado otros formatos.
Pueden agregar mas feeds, o eliminar si creen que son muchos.
- Listo? Bien... ahora vamos al body (o donde quieran colocar el blogroll dinamico). [En el caso de ser Blogger; vallan directamente a Elementos de Pagina, y agreguen un HTML/Javascript].
El contenido tiene que ser: <div id="feedControl">Cargando...</div>
Y nada mas! Asi de simple! (no agreguen nada MAS!)
- Listo. Guarden cambios y vean el sitio.
- En la Documentacion de Google hay muchas cosas más para personalizar y hacer mas dinamicos los feeds. Si quieren pueden animarse uds a meter mano. (ver documentacion)
Bueno gente, puede que la adaptacion a BLOGGER.com sea algo complicada, pero NO es siempre asi, depende muchas veces de sus templates, asi que si tienen problemas, me avisan (por comentarios)... y los veo detenidamente a cada caso.
Un abrazo a todos, ReC.
Cuando me decidi "Registrarme" ... aparecio el errorcito (o mejor llamemosle descuido)...
Asi que es eso basicamente... el counter, pero real. Todos con pistolitas de aire comprimido lanzando bolitas de pintura.
