Insertar galería de imágenes de Flickr en WordPress

Quería insertar en el blog las galerías de fotos que tengo publicadas en Flickr, pero que no fuesen siemples enlaces, sino que pudiesen verse directamente en el blog sin necesidad de cargar la web de Flickr y demás.

Inicialmente, Flickr ofrece soporte para enlazarse con blogs de WordPress, basta con elegir una galería o una imagen,  sobre la opción “Compartir” seleccionar “Compartir esto por:” y pulsar “WordPress”. En este momento, nos pedirá el usuario y password de administración del blog, ya que va a publicar una nueva entrada y una vez dados los datos, ahí está, una nueva entrada en nuestro blog con la galería de Flickr. Del estilo …

atentosreflex2caminoreflexalbert_dockthe_beatles
holy_bibleprinces_streethall_townradio_citybeatles_story

LVP – MCH – CHT, un álbum en Flickr.

Pero esto no me terminaba de convencer. Básicamente incluye unas miniaturas de las imágenes, que no dejan de ser enlaces a la original publicada en Flickr. Yo quería una galería funcional y sin la necesidad de abandonar el blog. Veamos cómo:

Utilizaremos el contenedor de código gigya, con el cual podremos embeber objetos flash en WordPress. La sentencia a colocar en cualquier entrada será:

gigya src=”http://www.flickr.com/apps/slideshow/show.swf?v=71649″ width=”%SIZE%” flashvars=”offsite=true&lang=en-us&page_show_url=/photos/USERNAME/sets/ID NUMBER/show/&page_show_back_url=/photos/USERNAME/sets/ID NUMBER/&set_id=ID NUMBER&jump_to=” allowFullScreen=”true” 

*  El código debe ir dentro de [ ]

Donde USERNAME y ID NUMBER  se extraen del enlace de la galería de Flickr

http://www.flickr.com/photos/USERNAME/sets/ID NUMBER/

Y de este modo se obtiene una galería tal que así:

About these ads

71 thoughts on “Insertar galería de imágenes de Flickr en WordPress

  1. ¿Y no se puede coger directamente el html que genera flickr cuando dices que quieres insertar la presentación de un álbum en una web? Lo digo porque eso es lo que yo estaba intentando y no he podido :P

    • Hola Carlos, no puedes embeber flash en WordPress.com. Desconozco si en las instalaciones propias está permitido, pero en los blogs alojados en wordpress.com me temo que no. Con el código anterior, lo que haces es recubrir ese reproductor flash con código valido para wordpress. Si te gusta el resultado, basta con seguir los pasos anteriores y publicar tu entrada, si no, siempre puedes utilizar la funcionalidad “Publicar en WordPress” de Flicker.

      Un saludo

  2. Hola Amigo, a esta Galería
    http://www.flickr.com/photos/64555739@N06/sets/72157629000464617/show/
    Le puse en los widgets de mi Blog de WordPress este código:

    [gigya src=”http://www.flickr.com/apps/slideshow/show.swf?v=71649″ width=”%SIZE%” flashvars=”offsite=true&lang=en-us&page_show_url=/photos/64555739@N06/sets/72157629000464617/show/&page_show_back_url=/photos/64555739@N06/sets/72157629000464617/&set_id=72157629000464617&jump_to=” allowFullScreen=”true”]

    pero la respuesta es embed_shortcode: ”http://www.flickr.com/apps/slideshow/show.swf?v=71649″ is not a valid URL

    Bueno, necesito ayuda: te dejo el blog asi lo ves SIN GALERIA JAJAJA: http://laberintosur.wordpress.com/, espero tu respuesta

    • Hola,

      Prueba con:

      [gigya src="http://www.flickr.com/apps/slideshow/show.swf?v=71649" width="600" flashvars="offsite=true&lang=en-us&page_show_url=/photos/64555739@N06/sets/72157629000464617/show/&page_show_back_url=/photos/64555739@N06/sets/72157629000464617/&set_id=72157629000464617&jump_to=" allowFullScreen="true" ]

      Un saludo

      • Hola Tupakamaru….mis simpatías para con ti nick y con aquél originario líder de la mayor rebelión anticolonial en América. Sabés que tu código anduvo de lujo, sin embargo no logro igualar el SLIDE que tenía ahi (lo cambio porque SLIDE cierra) porque me quedó grande… entonces donde el código decía 600 le puse 260 que es el espacio que tengo y se achicó bien de ancho pero no de alto… sabrás com ayudarme?… en ese mismo blog abajo tengo funcionando otro SLIDE y anda bien…sabés porque se reproduce sin drama y las otras como flick y picassa dan tanto drama en wPress?
        GRACIAS compadre. Daniel

  3. Hola Tupakamaru….mis simpatías para con ti nick y con aquél originario líder de la mayor rebelión anticolonial en América. Sabés que tu código anduvo de lujo, sin embargo no logro igualar el SLIDE que tenía ahi (lo cambio porque SLIDE cierra) porque me quedó grande… entonces donde el código decía 600 le puse 260 que es el espacio que tengo y se achicó bien de ancho pero no de alto… sabrás com ayudarme?… en ese mismo blog abajo tengo funcionando otro SLIDE y anda bien…sabés porque se reproduce sin drama y las otras como flick y picassa dan tanto drama en wPress?
    GRACIAS compadre. Daniel

  4. Hola!!!!

    a mí no me funciona….

    [gigya src=”http://www.flickr.com/apps/slideshow/show.swf?v=71649″ width=”%SIZE%” flashvars=”offsite=true&lang=en-us&page_show_url=/photos/76942897@N08/sets/6901032492/show/&page_show_back_url=/photos/76942897@N08/sets/6901032492/&set_id=6901032492&jump_to=” allowFullScreen=”true”]

    Lo pongo en cualquier entrada pero nada de nada…

  5. Hola!!! he probado a poner el siguiente codigo, pero no me funciona…

    Al previsualizar me aparece el mismo codigo.

    [gigya src=”http://www.flickr.com/apps/slideshow/show.swf?v=71649″ width=”%SIZE%” flashvars=”offsite=true&lang=en-us&page_show_url=/photos/76942897@N08/sets/6901032492/show/&page_show_back_url=/photos/76942897@N08/sets/6901032492/&set_id=6901032492&jump_to=” allowFullScreen=”true”]

    • Hola, la galería que estás intentando enlazar parece que no existe (http://www.flickr.com/photos/76942897@N08/sets/6901032492), te lo he adaptado a otra galería de ese mismo usuario para que veas cómo funciona.

      Recuerda cambiar %SIZE% por la anchura que deseas que tenga la presentación, así como meter entre corchetes [] el siguiente código.

      gigya src=”http://www.flickr.com/apps/slideshow/show.swf?v=71649″ width=”600″ flashvars=”offsite=true&lang=en-us&page_show_url=/photos/76942897@N08/sets/72157629744076617/show/&page_show_back_url=/photos/76942897@N08/sets/72157629744076617/&set_id=72157629744076617&jump_to=” allowFullScreen=”true”

      • Gracias por tu ayuda, pero sigue sin funcionarme.
        Interpreta el codigo como texto. Es necesario algun plugin?

        Al cargar la pagina, lo que aparece es esto:

        [gigya src=”http://www.flickr.com/apps/slideshow/show.swf?v=71649″ width=”600″ flashvars=”offsite=true&lang=en-us&page_show_url=/photos/76942897@N08/sets/72157629744076617/show/&page_show_back_url=/photos/76942897@N08/sets/72157629744076617/&set_id=72157629744076617&jump_to=” allowFullScreen=”true”]

        Me parece muy muy extraño. Simplemente texto

      • El problema viene de la codificación que está haciendo wordpress con los comentarios. Está insertando caracteres extraños en el código.

        gigya src=”http://www.flickr.com/apps/slideshow/show.swf?v=71649" width=”600" flashvars=”offsite=true&lang=en-us&page_show_url=/photos/76942897@N08/sets/72157629744076617/show/&page_show_back_url=/photos/76942897@N08/sets/72157629744076617/&set_id=72157629744076617&jump_to=” allowFullScreen=”true”

  6. Pingback: Guardiola cerró la era más exitosa de la historia del Barcelona con un título

    • Hola,

      En los blogs alojados bajo WordPress.com, esta extensión está habilitada por defecto. Basta con pegar el código tal y como comento en el post. Si mantienes tu propia instalación de WordPress, supongo que tendrás que instalar el plugin para que entienda el código gygya

  7. ¡¡Muchas gracias por tu post, me ha movido a la acción y eso me ha encantado!! He seguido tus pasos, luego he tenido en cuenta las sugerencias de los anteriores comentarios (creo), pero aún sigue sin estar correcto, pues resulta que el código aparece también en el texto, como le ocurría a kusuco y creo que no reconoce el tamaño que le doy :(
    ¡Muchas gracias de nuevo¡ :)
    http://goo.gl/GTKgm

    • Hola Manuela, me alegro que te haya ayudado. Para evitar que te aparezca el texto, comprueba que no tiene ningún formato (es sólo código). Según he podido comprobar en tu blog, aparece en cursiva el texto “gigya”

      Un saludo

  8. Pingback: Insertar una galería de imágenes desde Flickr | Las TIC y su potencial para transformar la pedagogía

  9. Muchas gracias por el post, soy bastante novata y me gustaría realizarte una pregunta, se actualiza automáticamente, es decir, cada vez que subo una nueva foto a flickr aparecerá en la presentación del blog. Lo digo porque a mi no me lo hace.

    • Hola. Pues la verdad es que no es un caso que haya probado, pero si la foto está en tu galería de Flickr, debería aparecer en la presentación.
      Puedes comprobar si los valores que has configurado en el código insertado en WordPress han cambiado tras subir una nueva foto, lo que indicaría que Flickr crea una “nueva” galería cada vez que haces alguna modificación.

  10. Pingback: Resumen 2012 | tUpaKamaRu

    • Hola!

      Prueba con el siguiente código, el problema estaba en las comillas dobles, quizás por copiar/pegar en algún editor de texto.

      gigya src=”http://www.flickr.com/apps/slideshow/show.swf?v=71649″ width=”500″ flashvars=”offsite=true&lang=en-us&page_show_url=/photos/29678738@N07/sets/72157624324582105/show/&page_show_back_url=/photos/29678738@N07/sets/72157624324582105/&set_id=72157624324582105&jump_to=” allowFullScreen=”true”

      Recuerda incluirlo entre [ ]

      Un saludo

      • Cuando estés editando la entrada, asegúrate que estás en modo Texto para que no aplique ningún formato

        También, borra las comillas dobles que has copiado y escríbelas tú explicitamente (las que hay encima del 2)

  11. Perdona que te pregunte por aquí, no sé cómo mandarte “un privado”
    Es que he observado que das la opción a que la gente seleccione ser avisado por mail de las nuevas entradas. Esto me lo han pedido varios seguidores de mi blog ¿qué tengo que hacer para incluir esta opción? gracias

    • Hola, supongo que te refieres a la opción “Seguir”.

      Para activarla, en el portal de administración, despliega la opción Ajustes, en la parte inferior activa la opción “Show follow button to logged out users.”

      Ahí podrás configurar también el texto que quieras que se envíe en el email.

      Un saludo

      • Está visto que no hay suerte, tampoco encuentro esta opción. De todas formas mi worpress está en español. Madreeee que lío….

  12. Hola! Gracias por el post! No consigo que funcione, he borrado las comillas y las he cambiado y todo eso, pero todo el rato me añade un amp; despues de cada & del código. Me lo deja así:
    [gigya src="http://www.flickr.com/apps/slideshow/show.swf?v=71649″
    width="600"flashvars="offsite=true&lang=en-us&page_show_url=/photos/nuriasan/sets/72157633190773731/show/&page_show_back_url=/photos/nuriasan/sets/72157633190773731/&set_id=72157633190773731&jump_to=" allowFullScreen="true"]
    Y no hay manera de que eso no me aparezca… ¿me faltará algo?

      • Hola!! no entiendo nada… lo he repasado letra por letra y es exactamente lo que yo ponía… y lo ponía en text, igual que ahora, lo juro. Y copio el tuyo, lo pego y funciona! ¿Como puede ser? jajjajajaja esto es como cuando llega el técnico y lo que sea deja de fallar. No lo entiendo, pero muchas gracias!! :)

      • Me alegro que al fin te funcione.

        Pero te aseguro que “algo había”. La informática afortunadamente solo son 0′s y 1′s :)

  13. Amigo tengo un problema intento colocar una galería según como dice tu post y cuando edito la entrada me dice: (No tienes autorización para editar esta entrada.)
    El código es el siguiente:
    [gigya src="http://www.flickr.com/apps/slideshow/show.swf?v=71649″ width="%size%" flashvars="offsite=true&lang=en-us&page_show_url=/photos/94773474@N05/sets/72157633201353478/show/&page_show_back_url=/photos/94773474@N05/sets/72157633201353478/&set_id=72157633201353478&jump_to=" allowFullScreen="true"]

    Espero me ayude necesito darle una visualización diferente a mis imágenes en el blog, gracias..

    • El problema no viene del código insertado, sino que estas intentando editar una entrada para la cual no tienes permisos de edición. Es un blog compartido?

      Saludos

      • Pues soy algo nuevo en esto.. trabajo con páginas Web y es mi primera vez que manejo un blog. entonces le pido el favor que me ayude a solucionar el problema que tengo, ya que es de vital importancia.. Le agradezco muchooo..
        Necesito que por favor me diga como agregar una galería en mi WordPress es el punto.
        Saludos y Éxitos…

  14. Hola!! Felicidades por el post y por la entrega que tienes con las dudas.
    Aquí te presento la mía: inserto el código después de haber resuelto mil dudas (que es este) y aún así nada de nada: ¿que es lo que esta mal?
    [gigya src="http://www.flickr.com/apps/slideshow/show.swf?v=71649" width="600" flashvars="offsite=true&lang=en-us&page_show_url=/photos/biziklautak/sets/72157632736650484/show/&page_show_back_url=/photos/biziklautak/sets/72157632736650484/&set_id=72157632736650484&jump_to="allowFullScreen="true" ]
    GRACIAS!

  15. Hola, he seguido todos los comentarios sobre este tema de insertar una galería de Flickr y he repasado posibles errores. Aún así, cuando inserto este enlace en una entrada del blog:

    [gigya src=”http://www.flickr.com/apps/slideshow/show.swf?v=71649″ width=”%SIZE%” flashvars=”offsite=true&lang=en-us&page_show_url=/photos/35357321@N02/sets/72157621873404207/show/&page_show_back_url=/photos/35357321@N02/sets/72157621873404207/&set_id=72157621873404207&jump_to=” allowFullScreen=”true”]

    el resultado es el siguiente:

    embed_shortcode: ”http://www.flickr.com/apps/slideshow/show.swf?v=71649″ is not a valid URL

    ¿Puedes decirme dónde está el problema?

    Gracias!

  16. Vuelo a la carga.
    Anteriormente me había rendido porque no conseguía la dichosa galería. Pero me he armado de paciencia y he vuelto con ello.
    He empezado de cero, siguiendo paso por paso tus intrucciones e intentando aprender de los errores de otros. Pero está visto que tienes un don porque yo no lo consigo, no tengo idea de lo que hago mal. Te paso el link de mi blog y de mi puñetero código.

    [gigya src="http://www.flickr.com/apps/slideshow/show.swf?v=71649″ width="%600%" flashvars="offsite=true&lang=en-us&page_show_url=/photos/29678738@N07/sets/72157622898863461/show/&page_show_back_url=/photos/29678738@N07/sets/72157622898863461/&set_id=72157622898863461&jump_to=" allowFullScreen="true"]

    http://photoedurne.com/?page_id=28

    Por cierto, que sepas que te estas ganando el cielo, el nirvana o lo que sea con este post. Está visto que tu paciencia no tiene límites, no sabes cómo te envidio. :P

      • Pues nada, coge la mochila y vente!!!

        Chico no hay forma.
        He pensado que puede que en mi blog haya algo que no esté activado.
        También que puede que, como tengo todos los derechos reservados en mis galería, esto puede afectar.
        En fin, que ni idea pero no funciona.

      • Creo que no tiene nada que ver con el tema de derechos, en una entrada de prueba en mi blog lo veo sin problema.

        Siento no poder ayudarte más … :(

  17. No me rindo….
    Hola tupakamaru.
    He estado hablando con el que me ha ayudado a crear el blog. Un preguntita ¿tengo que instalar y activar el pluging de Gigya? A ver si es eso….
    Otra cosa, ¿eliges el album en concreto que quieres exponer o expone la galería completa?

    • Hola,

      No recuerdo haber activado ningún plugin, y creo que los demás compañeros tampoco. Es un código que interpreta el propio WP,

      Cuando construyes la URL, le pasas los identificadores de la galería de imágenes que desees incluir.

      Un saludo

  18. Pingback: Galería de imagenes | ateneadecolores

  19. Joder!!!

    Tras un buen rato, lo he conseguido!! He partido desde el enlace que le habías dejado a Edurne, y tras varios ensayo/error lo he conseguido!! Madre del amor hermoso!

    Gracias!

    • Me alegro que lo hayas conseguido.

      La verdad es que es algo lioso. En mente tengo hacer un pequeño formulario que os de el código automágicamente.

      Saludos

      • ¿y algo que lo inserte sólo y que funcione del tirón? :(
        Será por ponerle ganas… eres un encanto.

        Me da pena no poder tenerlo…. jooooo :(

  20. Pingback: Flickr-eko albumak WordPress-en? | KiliKiliBat

  21. I’m impressed, I must say. Seldom do I encounter a blog that’s both educative and amusing,
    and without a doubt, you have hit the nail on the head. The issue is something that too few people are speaking intelligently about.
    Now i’m very happy I stumbled across this in my hunt for something concerning this.

  22. Hola. Muchas gracias en primer lugar por la entrada. LLevo todo el día intentando insertar el album de flickr en una entrada y no hay manera. He probado ya todas las opciones y no sé que es lo que hago mal.
    Cambio el Username y el ID, el Size y pongo los corchetes, asi como introduzco mi link… y al introducirlo en wordpress aparece un cuadro en blanco y me dice que la URL no es valida.
    Muchas gracias de antemano.

  23. Hola Tupukamaru.. He intentado toda la mañana resolver la galería de flicker con tus explicaciones pero no sé que hago mal.
    Esta es el cógido que pongo
    [gigya src=”http://www.flickr.com/apps/slideshow/show.swf?v=71649″ width="500" flashvars=”offsite=true&lang=en-us&page_show_url=/ photos/travellingforyou/sets/72157638577375935
    /show/&page_show_back_url=/ photos/travellingforyou/sets/72157638577375935
    /&set_id= photos/travellingforyou/sets/72157638577375935 &jump_to=” allowFullScreen=”true” ]
    Pero me dice que el embed code no es válido aqui
    http://travellingforyou.com/2013/12/12/discovering-barcelona/

    Te rogaría q me ayudaras a conseguir el código de esta galería
    http://www.flickr.com//photos/travellingforyou/sets/72157638577375935/show/?embed=1

  24. Buenas. Llevo un rato intentando mostrar la galería y no hay manera.

    gigya src=”http://www.flickr.com/apps/slideshow/show.swf?v=71649″ width=”600″ flashvars=”offsite=true&lang=en-us&page_show_url=/photos/diegomorde/sets/7215763479970544/show/&page_show_back_url=/photos/diegomorde/sets/7215763479970544/&set_id=7215763479970544&jump_to=” allowFullScreen=”true”

    Utilizo ese código entre [ ] pero carga un rectángulo negro con nada dentro.

    Agradecería una ayuda para intentar solucionarlo.

    Un saludo

  25. Buenas… impresionante web… me encanta… y sobre todo las contestaciones, da gusto con gente asi.
    Me pongo en contacto contigo para ver si a alguien mas le pasa… consigo insertar el codigo y todo perfecto… ningun error, pero me sale en negro siempre el recuadro… no aparecen fotos, ni nada.
    Te dejo la direccion para que puedas verlo… un abrazo y gracias por tu ayuda…
    http://aventuralicante.wordpress.com/2013/11/04/barranco-dels-bessons/?preview=true&preview_id=27&preview_nonce=17f672c888&post_format=image

  26. Pingback: Publicar una galería de imágenes desde Flickr | Aprender y Compartir

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s