lunes, 26 de julio de 2010

Insertar álbumes de Flickr en el blog

Una forma muy eficaz y bonita de incluir imágenes en un blog es subirlas a Flickr y organizarlas en forma de álbum para después insertarlas en una entrada del blog con el reproductor de diapositivas que proporciona Flickr. En una entrada anterior de este blog vimos cómo se hacía lo mismo con álbumes de Picasa, pero el reproductor de Flickr es mejor en algunos aspectos: permite la vista en pantalla completa y despliega las imágenes reducidas. Además, igual que con Picasa, se puede personalizar el tamaño del reproductor. Es una buena opción cuando queremos mostrar muchas fotografías sin ocupar mucho espacio en la entrada del blog; de esta manera, no recargamos la entrada con demasiado peso y proporcionamos a los lectores una forma cómoda de ver nuestras imágenes.

Para conseguir el código HTML que nos permita insertar el reproductor de diapositivas en una entrada del blog, tenemos que ver el álbum en forma de presentación de diapositivas. Después de cargar nuestras imágenes en nuestra cuenta de Flickr y de reunirlas en un álbum, accedemos a la página donde se ve todo el álbum. Antes del nuevo diseño de Flickr, estaba el enlace Slideshow con el que accedíamos a una presentación de las imágenes de un álbum, pero ahora ha desaparecido, con lo cual tenemos que añadir la palabra show a la URL de nuestro álbum, como se indica en el blog tquark. Por ejemplo, para mi álbum, la URL quedaría de esta manera, y he puesto en color rojo las partes que hay que cambiar o añadir según nuestro nombre de usuario y el número de identificación del álbum:

http://www.flickr.com/photos/avalerofer/sets/72157623712218736/show

Entonces, aparece la pantalla de fondo negro con las imágenes ampliadas a página completa. Pero todavía tenemos que hacer otro clic en el enlace Compartir que se ve en la parte superior derecha para obtener el código, y a continuación se abre el siguiente recuadro:


En el primer campo o marco de texto tenemos la dirección URL del reproductor de estas dispositivas, que se muestra en una ventana completa del navegador. Puede ser una buena opción para mostrar nuestras fotografías con un simple enlace en la entrada del blog.

Pero si queremos insertar el álbum en el post con el reproductor incrustado, entonces Flickr nos proporciona el código HTML del reproductor en el segundo marco de texto, que podemos copiar a la memoria del ordenador haciendo clic en el enlace Copy to clipboard para después pegarlo en el código fuente de nuestra entrada. Hay que advertir que este reproductor no funciona en dispositivos móviles, porque está creado con la tecnología Flash, que ya ha sido desechada.

Este código muestra el reproductor con un tamaño de 400 píxeles de ancho (width) y 300 de altura (height), pero podemos cambiar el tamaño personalizando el código si hacemos clic en el enlace Customize this HTML. Veremos entonces una página donde modificar el tamaño:


En la sección 1 se permite Configurar el tamaño del reproductor simplemente haciendo clic en los enlaces de los distintos tamaños o también introduciendo los tamaños en los campos de texto proporcionados, siendo el primero la anchura y el segundo la altura. Conviene dejar activada la casilla de la opción , con la que sólo hace falta cambiar una dimensión para que automáticamente aparezca la cifra proporcional de la otra dimensión.

Ya sólo queda seleccionar todo el código HTML con el cursor del ratón y copiarlo con la opción adecuada haciendo clic en el botón secundario del ratón. Después, lo pegamos en la parte del código fuente del editor de nuestro blog, a la que se accede pulsando el botón HTML. Si queremos centrar el reproductor a lo ancho, podemos usar el siguiente código en azul, que rodea al del reproductor:
<div align="center">[Código del reproductor]</div>
Y ya tenemos nuestras fotografías en formato de pase de diapositivas, que el lector podrá ver en pantalla completa haciendo clic en el icono inferior derecho del reproductor, que se ve al hacer clic en el reproductor para empezar la reproducción:


Por último, hay que indicar que Blogger tiene dos gadgets para insertar un álbum de Flickr o de Picasa en el lateral del blog. Se llaman Flickr Photostream y Picasa Photostream, y se encuentran en la sección Más gadgets de la ventana de gadgets. Parece que el primero de ellos ya no se encuentra entre los gadgets, pero Flickr tiene una página donde se puede crear un módulo parecido, que se puede incrustar en el blog. En la página del generador del módulo se puede elegir entre un módulo en HTML y otro en Flash; aconsejo usar el primero, porque se verá en todos los dispositivos:



Debajo está el botón Siguiente: elegir contenido, donde se establecen cinco pasos para crear el módulo, y al final se consigue un código en HTML, que es el que hay que insertar en la entrada del blog, pero hay que hacerlo en la sección del código fuente que aparece cuando se pulsa el botón HTML del editor.

Anteriormente, cuando existía el gadget Flickr Photostream en Blogger, el procedimiento era el siguiente:
El gadget de Blogger Flickr Photostream

El gadget de Flickr muestra varias opciones de configuración:

Opciones de configuración del gadget Flickr Photostream
Esta personalización del gadget da como resultado lo que se ve en la siguiente imagen, que aparecerá en el lateral del blog:


Flickr también permite insertar una imagen en un blog con la opción Blog this, que se muestra entre los iconos de la parte superior de una imagen cuando se ve en su página de enlace permanente. Como vemos, podemos elegir entre varias opciones para incluir nuestras fotos de Flickr en el blog de Blogger y en otros gestores de blogs.

(Entrada actualizada el 26 de enero de 2014)

30 comentarios:

  1. Hola:

    Vengo siguiendo tu sitio y veo que muchas veces hablas sobre novedades en internet.

    Junto a un amigo acabamos de crear WingedBox (http://wingedbox.com) un servicio gratuito que te da 4Gb para subir ficheros, compartir en internet, hacer backup. Pensamos que podría venirte bien para subir pdfs, videos... cualquier material que quieras compartir en rl blog.


    Nos gustaría que le des una vuelta y, si te gusta, hablases de él en tu web.

    Un saludo y gracias de antemano,
    kikorb

    ResponderEliminar
  2. Muy interesante tu publicación. ¡Mil gracias! Me ha sido de mucha ayuda.

    ResponderEliminar
  3. Gracias por el tuto, y muy buenas tus fotos.

    ResponderEliminar
  4. muchas gracias!!! Me ha sido de gran ayuda!!!

    ResponderEliminar
  5. Se que esta pregunta llega un año después pero supongo que esto de las imagenes no se hace obsoleto. Tengo mis fotos separadas en albumes tanto en flickr como en picasa y ya las he subido como presentación a mi blog en entradas distintas cada album.
    El motivo de esto es que quiero hacer una especie de indice en una página especial para mis galerías de fotos. Quiero poner una foto de muestra de cada album y que esto sea un enlace para cada album dentro de mi blog... cómo puedo hacerlo de un modo estético, que no implique que tenga que escalar cada foto para crear el mosaico? Hay algun modo, dentro de flickr, picasa o cualquier otro programa con el que pueda hacer esto?

    ResponderEliminar
  6. Con las imágenes de Picasa Albums se puede insertar en el blog una imagen que te dirija a su álbum, como explico en mi artículo Insertar álbumes de Picasa en el blog, pero en Flickr no encuentro esa opción, a menos que haya un widget en la Web que lo haga.

    ResponderEliminar
  7. Oye, está padrísima tu explicación. Mega sencilla. ¡Mil gracias!

    ResponderEliminar
  8. MUY BUENA AYUD AME SIRVIO DE A MUCHO GRACIAS

    ResponderEliminar
  9. Necesito hacer lo que hace Flickr Photostream en Joomla. ¿Sabes cómo podría lograrlo?
    ¿Podría pegar el código HTML directamente en algún módulo?
    Gracias

    ResponderEliminar
  10. Hola!! estoy intentando insertar un pase de fotos en mi blog de blogger con el gadget de flickr fhtostream pero me dice :key has expired

    no hay manera. me puedes ayudar?
    solo he conseguido que aparezca en un post pero yo lo quiero en la barra lateral derecha del blog

    www.natscakesandcookies.blogspot.com

    muchas gracias

    ResponderEliminar
  11. ¿En flickr es posible modificar el tiempo que transcurre entre diapositivas? No he encontrado la manera de hacerlo en Picasa.
    Gracias

    ResponderEliminar
  12. Hola tengo un problema, cuando inserto en mi blog el gadget de flickr me dice invalid API key. No se como solucionarlo. Agradezco cualquier ayuda, muchas gracias

    ResponderEliminar
  13. Buenísima la información! Sólo tengo una pregunta: Cómo podría centrar el slideshow? Logré ponerlo en el código HTML y en la vista previa se ve bien pero está alineado a la izquierda y me gustaría centrarlo. Hay alguna manera de hacerlo?

    Gracias!
    Fe.

    ResponderEliminar
    Respuestas
    1. He añadido a la entrada el código que pides, que verás en un marco amarillo.

      Eliminar
  14. muchas gracias muy buena tu informaciòn

    ResponderEliminar
  15. Gracias por la información, fue de mucha ayuda y me sirvió para asesorar mi clase teniendo en cuenta este interesante y muy completo recurso.

    Necesito su gentil colaboración pues tengo un edublog y va a participar en un concurso de blog de aula y necesito asesoría sobre lo que podría poner como entradas y así hacerlo ver interesante y fructífero teniendo en cuenta que está enfocado al área de tecnología.

    Que interesante sería que visitara mi blog y me diera su opinión

    ResponderEliminar
  16. Buenas tardes,a ver si me puedes ayudar!Quiero poner un reproductor para ver los videos en hd,pero no me deja subir más de cien megas,tiene solución.Y otra pregunta,como puedo hacer que el reproductor pase a ser para hd aunque no todos lo videos los sube en ese sistema.No sé si me he explicado bien!!Bueno,ya me dirás y estamos en contacto.un saludo

    ResponderEliminar
    Respuestas
    1. Los problemas con vídeos son complejos y no te puedo solucionar ese asunto.

      Eliminar
  17. Hola, ya no aparece el código de HTM, sólo te da el link. Cómo puedo hacer en ese caso?

    ResponderEliminar
    Respuestas
    1. Acabo de comprobar que siguen dando el código HTML.

      Eliminar
  18. Gracias por los tips que da para blog.

    ResponderEliminar
  19. me sirvió de mucho gracias :)

    ResponderEliminar
  20. Yo tengo un álbum en flickr y no consigo subirlo. En los gagdets ya no existe la opción que dices, y en presentación, pongo mi nombre de usuario y no me encuentra... No sé qué hacer

    ResponderEliminar
    Respuestas
    1. Jorge, los álbumes de Flickr se pueden incrustar en el blog como indico en la entrada, pero ya no existe el gadget de Blogger, que se puede sustituir por un módulo de Flickr, como explico en una actualización que he hecho de la entrada.

      Eliminar
  21. hola!!
    Alejandro, acabo de abrir mi blog, e intentado mostrar mis imagenes de flick ingresando el gadget pero no esta ni Flickr Photostream y tampoco Picasa Photostream, ingrese como html, pero solo se visualiza como dapositiva, como lo ingreso para que quede como la ultima opcion que se propone? me gustaria que se viera mas de una foto.
    muchas gracias.

    ResponderEliminar
  22. ¡hola de nuevo! te escribí en el anterior post, Insertar álbumes de Picassa, como continuo teniendo problemas he optado por utilizar Flickr y he conseguido que se vean los álbumes en el blog indistintamente de quien se conecte.
    Con Flickr tengo alguna duda, quisiera visualizar en mi Blog las carpetas de las fotos de forma horizontal pues las anexa en vertical dejando mucho espacio vacío. Y otra cuestión es, cuando se accede a través del blog para ver las fotos de un álbum cualquiera, no hay forma de que se abran en otra ventana, teniendo que cerrar el blog e ingresar de nuevo poniendo la dirección.
    Si sabes como puedo solucionar estos problemillas, te lo agradecería. Muchas gracias de todos modos por tu Blog.
    Un saludo,
    Yolanda Girón

    ResponderEliminar
  23. Hola Alejandro Que casualidad!! y digo casualidad porque ayer mismo estuve en fliker me registré pero no logré bajar alguna no?? y pensaba que si me traía el portafolio o url del autor que es realmente lo que quiero que parezca el autor en mis fotos pero pude y no luego pensé q mi blog estaría muy pesado con el url de la página asi que desistí... ya .................En realidad vine por favor a que me orientaras como puedo resolver la actualización de mis entradas desde hace dos días no se ven mis actualizaciones y lo otro es que tú pinchas mi nombre y te sale una patalla que dice google error con un robot jajaa bueno uuffff ya de verdad no se que hacer cuando puedas me gustaria saber estuve curiosiando tus archvios pero leo nada de problemas de actualizaciones gracias, un abrazo te dejaré el link no vaya ser que te diga error a ti también y no me puedas ubicar
    http://beaybrillodelmar.blogspot.com.es/

    ResponderEliminar