Crear un fotolog con Flickr y Blogger

   En algún momento nos podemos plantear hacer un fotolog en el que iremos subiendo fotos y pequeños textos con algún comentario de las mismas. La manera tradicional de realizar esto puede ser subir las fotos a flickr, copiar las rutas, editar el html a mano desde blogger y finalmente publicar el post.

   Esta opción puede resultar muy tediosa para algo tan sencillo como querer publicar fotos con un pequeño comentario. Una opción mucho más cómoda es utilizar Flickr + Blogger. Desde flickr podemos configurar un blog en el que queramos publicar nuestrar fotos. Para ello necesitamos:

Cuenta de Google y blog de Blogger.

Cuenta de Flickr.

Entramos en Flickr y en el menu You > Your Account seleccionamos la opción Extending Flickr y en la opción Your Blogs configuramos nuestro blog de Blogger.

Seleccionamos la plantilla de publicación que vamos a utilizar.

Volvemos a la vista de las fotos que hemos subido y seleccionamos una. En las opciones que aparecen encima de la foto seleccionamos Blog This, escribimos el título y el texto del mensaje y se realiza la publicación.

Cargamos nuestro blog de blogger y la foto debería aparecer.

   Aquí habríamos terminado. A partir de ahora podríamos subir nuestras fotos a flickr y publicarlas en el blog de una manera rápida y sencilla.

   Obviamente este tutorial no termina aquí porque esto que acabo de contar se puede encontrar en multitud de páginas web. Vamos a ver los inconvenientes y cómo mejorar un poco los posts que se generan.

   Cuando seleccionamos en flickr la plantilla de publicación, por ejemplo 500px, on its own line y vemos el código html que se va a utilizar para publicar en el blog nos encontramos con esto:

<style type="text/css">
.flickr-photo { border: solid 2px #000000; }
.flickr-yourcomment { }
.flickr-frame { text-align: left; padding: 3px; }
.flickr-caption { font-size: 0.8em; margin-top: 0px; }
</style>

<div class="flickr-frame">
   <a href="{photo_url}" title="photo sharing"><img src="{photo_src}" class="flickr-photo" alt="" /></a>
<br />
   <span class="flickr-caption">[[string:by2:<a href="{photo_url}">{photo_title}</a>:<a href="{uploader_profile}">{uploader_name}</a>]]</span>
</div>
    
<p class="flickr-yourcomment">
   {description}
</p>

   He marcado en rojo el código css que se utiliza para formatear los posts. Tal y como está hecho, en cada post se incluye la información para formatearlo por lo que si más adelante deseamos cambiarla tendríamos que editar todos los mensajes uno a uno. Para solucionar este problema lo que hacemos es incluir esa información en la plantilla de blogger (después de modificarla ligeramente para que el texto que escribimos se vea un poco mejor), quedando así:

.flickr-photo { border: solid 2px #000000; }
.flickr-yourcomment { font-size: 1.2em;}
.flickr-frame { text-align: left; padding: 3px; }
.flickr-caption { font-size: 0.8em; margin-top: 0px; }

   Y ahora, después de modificar la plantilla para centrar la foto y eliminar la información innecesaria, tenemos la siguiente plantilla para flickr:

<div class="flickr-frame">
   <center><a href="{photo_url}" title="{title}"><img src="{photo_src}" class="flickr-photo" alt="" /></a></center>
<br/><p class="flickr-yourcomment">
   {description}
</p>
</div>

   Así, hemos conseguido dos cosas. Hemos independizado y aislado el formateo de los posts en un único lugar (la plantilla de blogger) por lo que si posteriormente nos cansamos del aspecto del blog o queremos retorcar algo sólo lo tendremos que modificar un único sitio y servirá para todos los posts. Por otro lado hemos eliminado la información que añade flickr sobre quién y a qué hora subió la foto y cómo se llama el archivo original, que tampoco aporta nada y deja los posts más legibles.

   El resultado de todo esto lo podéis ver en el blog que he creado para mi hija Judith: http://judithlopezb.blogspot.com