Tumblr y Blogger (Parte 2)

Integrar Tumblr a Blogger o a cualquier otro sitio web es bastante sencillo, lo difícil va a ser explicarlo.

Como la característica principal de este servicio es crear entradas de diferente tipo (Text, Photo, Quote, Link, Chat, Audio, Video), las alternativas disponibles son muchas ya que esa diferencia de entradas no es abstracta, cada una de ellas tiene sus propias características y se pueden leer por separado o filtar para no mostrarlas parcial o totalmente.

Supongamos que una entrada es un video ¿Qué mostraríamos en nuestro blog? ¿El video en si mismo? ¿Un enlace? ¿Nada? ¿Mostraremos los textos con formato o sin formato? ¿Qué haremos con los audios? Es imposible generar scripts para todas las variantes así que, este modelo tendrá ciertos limites subjetivos:

• los textos, las citas y los enlaces se mostarán sin formato
• las imágenes, reducidas y sin los textos adicionales
• el audio mostrará un reproductor pero no los textos
• los videos no se mostrarán y serán reemplazados por un enlace
• las entradas de conversaciones (Chat) serán ignoradas
• se cargará una cantidad de entradas y se mostrará una por vez con la posibilidad de navegar entre ellas
  

Se basa en un modelo llamado tumblrBadge que utiliza JSON, y funciona de manera similar a lo que hacemos para leer Twitter.

Para implementarlo, debemos agregar un elemento HTML en la plantilla y allí, colocar el siguiente código:

<div id="contenedorTumblr"> </div>

Nada más; ese, será el DIV contenedor donde lo mostraremos.

El script lo vamos a colocar al final de la página, antes de </body> para que de este modo no interfiera con otros y que comience a cargar los datos cuando nuestra página ya esté visible.

<script type='text/javascript'>
//<![CDATA[

var listaTU=new Array(); 
var maxsTU=0;
var actualTU=0;

function tumblrCallback(obj) {

// --------------- datos a definir usuario ---------------
var usuario = "http://NOMBRE.tumblr.com/"; // la URL de Tumblr (colocar barra final)
var cuantosPosts = 10; // cantidad de posts a leer
// --------------- final datos a definir --------------------


var contarAux=0;
var tumblrs = obj;

for (var i=0; i<cuantosPosts; i++){
elPost= tumblrs.posts[i]; // leer cada uno de los posts

// algunos de los datos, los leeremos como textos planos eliminando los formatos
textoPlano = elPost["regular-body"] || elPost["photo-caption"] || elPost["quote-source"] || elPost["link-text"] || elPost["link-url"] || elPost["video-caption"] || elPost["audio-caption"] || "";

// filtramos los tipos de posts a mostrar
if (/regular|photo|quote|link|video|audio/.test(elPost.type)) {

// y en funcion del tipo de post, leemos el contenido
if (elPost.type === "photo") { // las fotos
photoURL = elPost["photo-url-250"];
contenido = '<div class=\"TumblrPhoto\" ><img src=\"' + photoURL + '\" /></div>'
} else if (elPost.type === "quote") { // las citas
contenido = '<div class=\"TumblrCita\"><span>' + elPost["quote-text"] + '</span>' + textoPlano + '</div>';
} else if (elPost.type === "link") { // los enlaces
contenido = '<div class=\"TumblrLink\"><a href="' + elPost["link-url"] + '">' + textoPlano + '</a></div>';
} else if (elPost.type === "video") { // los videos
contenido= '<div class=\"TumblrVideo\">VIDEO<span>' + textoPlano  + '</span></div>';
} else if (elPost.type === "audio") { // los audios
contenido= '<div class=\"TumblrAudio\">' + elPost["audio-player"] + '</div>';
} else if (elPost.type === "regular") {
contenido = '<div class=\"TumblrRegular\">' + textoPlano + '</div>';
} 

// creamos el codigo de salida
if (contenido) {
// en la parte superior, logo enlaces, feeds y navegacion
salida = '<table class=\"enlacesTumblr\" cellpadding=\"0\" cellspacing=\"0\"><tbody>';
salida += '<tr><td><a target=\"_blank\" href=\"' + usuario +'\"><img src=\"archivo\" /> '; // LOGO TUMBLR
salida += '<a href=\"' + usuario + 'rss\" target=\"_blank\"><img src=\"archivog\" /></a></td>'; // LOGO RSS
salida += '<td style=\"text-align:right;\"><span class=\"navegarTumblr\"><a href=\"javascript:navegaTU();\">siguiente</a></span></td></tr>';
salida += '</tbody></table>';
// luego, el contenido del post a mostrar
salida += contenido;
// por ultimo, el enlace directo a ese post
salida += '<div id=\"verTumblr\"><a target=\"_blank\" href=\"' + elPost.url + '\">ver post</a></div>';
// y lo guardamos en una lista
listaTU[contarAux] = salida;
contenido = "";
salida = "";
contarAux =contarAux +1;
}
}
}
// cuando terminamos de leer, mostramos el ultimo post publicado
maxsTU=contarAux;
document.getElementById('contenedorTumblr').innerHTML = listaTU[0];
}

function navegaTU() {
actualTU=actualTU+1;
if (actualTU==maxsTU) {
actualTU=0;
}
document.getElementById('contenedorTumblr').innerHTML = listaTU[actualTU];
}

//]]>
</script>
<script src='http://NOMBRE.tumblr.com/api/read/json?callback=tumblrCallback&amp;num=10' type='text/javascript'/>

Allí sólo debemos configurar dos datos:

// --------------- datos a definir usuario ---------------
var usuario = "http://NOMBRE.tumblr.com/"; // la URL de Tumblr (colocar barra final)
var cuantosPosts = 10; // cantidad de posts a leer
// --------------- final datos a definir --------------------

lo mismo haremos en el script final que es la llamada a JSON.

Un detalle (uno de tantos) que puede modificarse es cambiar el tamaño de las miniaturas de las entradas de tipo PHOTO:

// pueden ser 75, 100, 250, 400 o 500
photoURL = elPost["photo-url-250"];

Si quisieramos mostrar los videos y no el enlace a estos, deberíamos cambiar esto:

contenido= '<div class=\"TumblrVideo\">VIDEO<span>' + textoPlano  + '</span></div>';

por algo así:

contenido= '<div class="\TumblrVideo\">' + elPost["video-player"] + '</div>';

En el script hay dos imágenes ya alojadas en ImageShack, dos logos que pueden ser cambidos por cualquier otro.

Cada sector creado tiene un ID o una clase CSS para poder personalizar la salida así que podemos agregar el estilo antes de </head>.

<style>
#contenedorTumblr { /* el contenedor en si mismo */
font-size: 11px;
}
table.enlacesTumblr { /* la línea superior con enlaces */
margin: 5px 0;
padding: 0 10px;
width: 100%;
}
.navegarTumblr { /* enlace navegación entre tumblrs */
display: block;
text-align: right;
}
#verTumblr { /* la línea inferior */
margin-top: 5px;
text-align: right;
}
#verTumblr a {
margin: 5px 0;
padding: 0 10px;
text-align: right;
}
div.TumblrPhoto { /* un post de tipo PHOTO */
margin: 0 auto;
text-align: center;
}
div.TumblrCita { /* un post de tipo QUOTE */
margin: 0 auto;
text-align: right;
width: 90%;
}
div.TumblrCita span {
display: block;
font-style: italic;
text-align: center;
}
div.TumblrCita i {
font-style: normal;
font-weight: bold;
}
div.TumblrLink { /* un post de tipo LINK */
text-align: center;
}
div.TumblrVideo { /* un post de tipo VIDEO */
font-weight: bold;
text-align: center;
}
div.TumblrVideo span {
font-weight: normal;
}
div.TumblrAudio { /* un post de tipo AUDIO */
text-align:center;
}
div.TumblrRegular { /* un post de tipo REGULAR */
font-size: 11px;
}

</style>