¿Cómo añadir un “widget” de artículos recientes a tu blog de tumblr?

por

image

Entradas recientes en mi blog

Tumblr es un sistema bueno para blogs. Pero no tiene tantas funciones como otros sistemas de blogs como wordpress o blogger. Por ejemplo en Tumblr falta un widget de artículos recientes en donde se muestra las entradas más nuevas de un blog. 

En este widget normalmente se muestra el título de un artículo, un poco de texto, a veces una imagen destacada y un enlace al artículo. 

Este widget es interesante para los usuarios de un blog. A través de este widget pueden encontrar rápidamente las entradas recientes de un blog sin buscar en el archivo o en las categorías. Esto es especialmente interesante cuando los internautas entran a una entrada antigua de un blog a través de Google. 

Además el widget con los artículos recientes puede ser bueno para el posicionamiento web. Los enlaces a los artículos recientes ayudan a los motores de búsqueda para encontrar el contenido de un blog. 

En la web encontré una página interesante donde se describe como añadir un widget con artículos recientes a un blog de Tumblr:
http://tumblr.skindy.com/post/2645139824/how-to-create-a-tumblr-recent-posts-list  

Un widget con artículos recientes como Feed de RSS

En el artículo se describe una forma de colocar un widget de artículos recientes como un newsfeed. Con la ayuda del Google Feed API puedes mostrar tu propio RS Feed de tu Tumblr en forma de artículos recientes en tu blog.

En el artículo se dice que necesitas un Google API Key para el “Google loader”. Pero está ya no es correcto. Google cambió su servicio. Ahora este “key” no es necesario para realizar el widget con las entradas nuevas.

Entonces este es el código que debes copiar al código de html e tu blog, antes se cierra el head </head>:

«<script type=»text/javascript» src=»https://www.google.com/jsapi»></script>»

Este código debes copiar antes la etiqueta de “</body>” o antes la etiqueta de “</head>” dentro tu código:

«<script type=”text/javascript«>// Grab, Parse, Displaygoogle.load(“feeds”, “1”);function OnLoad() {var feedControl = new google.feeds.FeedControl();//Number of EntriesfeedControl.setNumEntries(4);feedControl.addFeed(“http://url-de-tu-blog/rss”);
feedControl.draw(document.getElementById(“recentPosts”));
}
google.setOnLoadCallback(OnLoad);

</script>”

Debes cambiar “http://url-de-tu-blog/rss” por tu propio url/rss.

Para el SEO y la velocidad de tu blog de Tumblr es mejor colocar el código antes de </body>. Es para el código de javascript se carga al final y no antes de tu contenido.

Con “feedControl.setNumEntries(4);” puedes determinar cuantas artículos recientes se muestra en tu widget (en este caso 4).

Finalmente debes insertar este código en la posición en donde quieres tener los artículos recientes, por ejemplo en el primer lugar de tu “sidebar”:

“<h4>Entradas recientes</h4>
<div id=”recentPosts”><p>Loading…</p></div>”

Claro, no es necesario utilizar la etiqueta de “<h4>

</h4>”. También puedes utilizar otras etiquetas como “<h3></h3>” o “<p></p>”

Con un poco de css en tu código puedes cambiar la apariencia de “recentPost”, directamente en el código de tu Tumblr (dentro de “<style type=”text/css” media=”screen”> </style>”) o a través de “personalizar tema/avanzadas/añadir css personalizado.

El widget de los artículos recientes para Tumblr y el SEO

Para tus usuarios este widget con los artículos recientes es muy práctico. Pero para el posicionamiento web el widget no (casi) vale nada. Esto es porque solo es un código e javascript que los motores de búsqueda no pueden leer.

En tu código solo parece “<h4>Tumblr Posts</h4>
<div id=”recentPosts”><p>Loading…</p></div>” Claro, puedes cambiar el texto “Tumblr Posts” y “Loading” por un texto que contiene tus palabras claves.

Update: esto es el código con los “saltos en línea” correctos:

<script type=”text/javascript”> 

// Grab, Parse, Display

google.load(“feeds”, “1”);

function OnLoad() {

var feedControl = new google.feeds.FeedControl();

//Number of Entries

feedControl.setNumEntries(4);

feedControl.addFeed(“http://www.seo-quito.com/rss”);

feedControl.draw(document.getElementById(“recentPosts”));

}

google.setOnLoadCallback(OnLoad);

</script>

Como imagen:

entradas recientes en tumbrl - el código