jueves, 5 de julio de 2007

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

    31 comentarios:

    Vicente Navarro dijo...

    ¡Muy interesante! ¡Me lo apunto para cuando me toque a mí! Me ha encantado la idea del Baby-Blog, ¡de verdad!

    ¡Y oye! ¡La nena guapísima! ¿Se parece a su padre? :-)

    Iván dijo...

    Muchas gracias Super Coco!. Es que con un padre tan geek, algo tenía que hacer... ;-). Además, así no tengo que enviar fotos a la familia, que vayan al blog y que las vean.

    La niña se parece a los dos, a mi y a mi mujer, pero eso es algo que nunca podréis comprobaer... :-P.

    Saludos, Iván.

    Xesús Freire dijo...

    por que cuando me manda a flickr me salen allí todas las opciones de edición (rotar, borrar, etc)? me puedes decir que estoy haciendo mal?
    gracias por los tutoriales
    Xesús

    Xesús Freire dijo...

    Ya lo he resuelto. Gracias
    Xesús

    Iván dijo...

    Bueno Xesús, si ya lo has resuelto tu sólo, eso que me has ahorrado... ;-). Es broma, aquí estamos para ayudar.

    Saludos, Iván.

    DISFRAZADA DE NEGRO dijo...

    ¿Qué tipo de weblog tienes?.........no sé cual tengo que elegir ni tengo ni idea de las opciones que se despliegan en este paso. ¿Puedes aclararme esto?.....estoy intentando colgar una foto en mi perfil de Flickr.
    Gracias y saludos

    Natalia

    Iván dijo...

    Hola Natalia,

    no sé si te he entendido bien. La plantilla que utilicé en flickr es la que comento en el post: 500px, on its own line. Y los pasos que seguí también están explicados. Si pudieras concretar más lo que estás intentando hacer, te podría ayudar.

    Saludos, Iván.

    montericolife360 dijo...

    HERMANO NESECITO TU AYUDA PORFABOR NESECITO PONER MI FLICKR EN MI BLOGSPOT PERO SABES LO MANDO Y NO ME MUESTRA LAS FOTOS SOLO EL LINK si me podes ayudar potter_sk8er@hotail.com

    Iván dijo...

    Hola montericolife360,

    si no específicas un poco más lo que haces, no te podré ayudar. Sigue los pasos del post y dime donde te quedas atascado.

    Saludos, Iván.

    P.D: Por favor, evita escribir todo en mayúsculas, hace daño a la vista.

    montericolife360 dijo...

    jajaja ok ivan gracias por el p.d ok lo que nesecito es poner mis fotos en el blog hago todos los pasos de ....tu cuenta...expandir flikr...luego le doy de flikr a blog...despues diseño . todo lo q falta despues me revise mi blog y solamente aparece el logo de flikr y no me saca las fotos como yo tenia pensado porfabor ayudame con esto te lo agradesco mucho
    P.D. espero q ahora no te molesten tanto punto ......jejeje gracias cuidate

    Iván dijo...

    Hola de nuevo montericolife360,

    según he entendido, lo que ocurre es que después de configurar todo, cuando posteas la foto desde flickr y te vas al blog, sólo aparece el logo de flickr en el blog y no la foto. La verdad es que nunca me ha pasado. Sólo se me ocurre que al subir la foto a flickr no la hayas marcado como pública y por eso no se muestre. Si no es eso, me temo que no voy a poder ayudarte mucho más.

    Saludos, Iván.

    - ◦•¡pāℓi!•◦ -    dijo...

    hola... estoy tratando de subir mis fotos de flickr al blog.. y no funciona.. me aparecen otras fotos menos las mias... ese codigo "html".. lo pongo en templates?.. em... y como se supone que la cosa esta sabria cual es mi usuario de flickr?... =S ojala puedas responder .. =)

    Iván dijo...

    Hola psipol,

    creo que lo estás haciendo al revés. Es desde flickr donde debes configurar tu cuenta de blogger para que puedas publicar automáticamente en tu blog. Cuando configures el blog, flickr te pedirá el usuario y password de blogger para poder postear.

    Saludos, Iván.

    El Freelancer dijo...

    Todo muy bien, muy lindo. Pero... ¿como hago para subir esa galería de flickr a mi blog?
    Alguien me aclara eso por favor?

    Iván dijo...

    Hola El Freelance,

    a qué te refieres con subir la galería de flickr a tu blog?. Lo que cuento aquí es sólo para postear desde flickr sin tener que entrar en blogger para nada.

    Saludos, Iván.

    SweetFran dijo...

    Hola muchas gracias por tu tutorial, el problema es que no puedo hacerlo creo que ya nmo se pueden vincular poruqe me voy a la parte y flickr me tira esto:

    Autorizar la publicación en tu blog en Blogger (beta)
    Si estás usando el nuevo beta.blogger.com, una parte de la configuración de tu blog en Blogger Beta para publicar desde Flickr consiste en iniciar sesión en Google para establecer el permiso.

    Entonces, éste es el proceso:

    Ve a google.com y si aún no has iniciado sesión, te pedirán que lo hagas.
    En la página en la que termines, debes "Conceder acceso” a flickr.com.
    Regresa a Flickr, termina de configurar todo.

    y en blogger no hay ninguna opcion para flick, si me puedes ayudar seria buenisimo, gracias.

    Iván dijo...

    Hola Fran Duarte,

    ya casi lo tienes. Lo que tienes que hacer es iniciar la sesión en blogger y en flickr. Luego, cuando desde flick intentas asociar la cuenta de blogger, debería detectar que ya tienes la sesión iniciada y en la ventana de blogger aparecer un mensaje o algo indicando que una aplicación externa solicita permisos. Aceptas y debería ser suficiente.

    Creo que lo que te ha liado es buscar la opción de flickr en blogger. Esa opción no existe y nunca ha existido.

    Espero que lo consigas.

    Saludos, Iván.

    Javier Ruiz. (Sevennorth). dijo...

    Gracias! Me ha sido muy útil tu post.
    Salud!

    Iván dijo...

    Hola javier ruiz,

    muchas gracias a ti por contármelo.

    Saludos, Iván.

    Anibal dijo...

    Pregunta: Puedo postear en blogger una foto mia alojada en flickr y luego, lograr que cuando se visualice la foto en mi blog no posibilite acceder a la foto original en flick? o sea que cuando miren el blog vean la foto que publique pero que no les permita ir a flick ?

    Iván dijo...

    Hola Anibal,

    creo que sí se podría, tendrías que cambiar la plantilla en flickr para no poner la url de flickr donde puedes elegir los tamaños, sino la url de la foto.

    Saludos, Iván.

    Anónimo dijo...

    Gracias mil. Tenía Flickr, tenía un blog y no era capaz de enlazarlos. Ahora mi pregunta es ¿se pueden publicar fotos en dos blogs diferentes pertenecientes a distintas cuentas de google??. Gracias otra vez

    Iván dijo...

    Hola glauca,

    me alegro de que el post te haya resultado útil. Por supuesto, no debería haber ningún problema, configuras en flickr todos los blogs que quieras y luego al darle a Blog this te saldrá la lista de todos los blogs. Eliges el que te interese y listo!.

    Saludos, Iván.

    pdrolopz dijo...

    buenas tardes,

    una pregunta Ivan

    ¿se puede configurar de salida el tamaño que va a tener la foto en nuestro blog? por ejemplo, me estoy montando mi photoblog y me gustaría que el tamaño siempre fuera, el "extra grande" (según nomenclatura de blogger)

    gracias de antemano

    Iván dijo...

    Hola Pedro,

    sí, no hay problema. Cuando configuras en flickr la plantilla con la que vas a publicar las fotos en blogger, tienes varias etiquetas que puedes utilizar.

    Yo por ejemplo publico las fotos con la etiqueta {photo_src}, pero como indica en el siguiente enlace, tienes para elegir:

    The source URL, in varying sizes:
    {photo_src}
    {photo_src_m}
    {photo_src_t}
    {photo_src_s}


    Tienes más info aquí: http://www.flickr.com/blogs_layout_extras.gne?from=photo.

    Espero que te sirva.

    Saludos, Iván.

    pdrolopz dijo...

    gracias ivan por contestar tan rápido. el caso es que ya lo he probado pero yo ya tengo el código {photo_src}, que es el más grande, y mi pregunta es: ¿hay modo de hacerlo más grande aún?

    muchas gracias

    Iván dijo...

    Hola Pedro,

    ahora mirándolo más despacio es cierto que {photo_src} es el más grande. Lo suyo sería poder poner {photo_src_l} para large, pero no lo permiten. Me temo que al final no se va a poder hacer... :-(

    Saludos, Iván.

    pdrolopz dijo...

    algo que todavía no he probado y que posiblemente funcione, es subir la foto a flickr a un tamaño mayor...

    a ver si tengo un rato esta tarde y lo pruebo.

    muchas gracias

    Wil dijo...

    muy bueno tu blog

    Iván dijo...

    @Wil: Gracias :-)

    Gurre dijo...

    Me ha sido de gran utilidad gracias¡¡¡

    Publicar un comentario