Juan Antonio F.M.

Just Another Freak of Machines

Integar Tumblr en Una Pagina Estatica

La forma facil (pero pobre)

El metodo mas rapido, es incluir en tu pagina un trozo de javascript como este:

<script type="text/javascript" src="http://wakaru44.tumblr.com/js"></script>

Al que luego puedes dar tu estilo con el CSS que quieras. No esta mal si solo quieres un pequeño “feed” de tu tumblr, pero las opciones avanzadas (controles personalizados, metadatos, etc) son escasas o nulas.

La forma buena (y no tan complicada)

El truco magico, viene gracias de nuevo a la API de tumblr, que nos permite recuperar datos en forma de JSON, y con los que luego podemos hacer lo que queramos.

Para ir calentando, un ejemplo sencillito. Pon en el <head> de tu pagina este script, por supuesto cambiando “username” por tu nombre:

<script type="text/javascript" src="http://username.tumblr.com/api/read/json"></script>

lo que creara una variable tumblr_api_read en la que estaran todos los datos de tus posts. Puedes echar un vistazo al formato en la propia salida de mi tumblr.

Luego, alla donde quieras poner enlaces a tu tumblr, solo tendras que agregar algo como:

<script type="text/javascript">
    // The variable "tumblr_api_read" is now set to your tumblr feed.
    document.write(
    '<a href="' + tumblr_api_read['posts'][0]['url'] + 
    '">My most recent Tumblr post</a>'
    );
</script>

o si quieres, un ejemplo un poco mas enrevesado:

<script type="text/javascript">
    // The variable "tumblr_api_read" is now set to your tumblr feed.
    for (var i=0; i < 5; i++){
        link = tumblr_api_read['posts'][i]['url'] 
        title = tumblr_api_read['posts'][i]['slug'] 
        img = tumblr_api_read['posts'][i]['photo-url-75'] 
        document.write(
                '<li><a href="' + link + 
                '">' + title + '</a> <br /><img src="' + img+ '" alt ="' + title + '" /></li>'
                    );
    }
</script>

lo demas lo dejo a tu eleccion ;)

Server side

Y por supuesto, aunque en el titulo ponga en una pagina estatica, mencionare tambien que hay muchas y muy diversas formas de hacerlo con codigo en el lado servidor, basandose en la api de tumblr para recoger el contenido en XML (en ingles), con URL de este estilo:

http://wakaru44.tumblr.com/api/read
http://wakaru44.tumblr.com/api/read?start=0&num=1
http://wakaru44.tumblr.com/api/read?start=0&num=1&type=text