Publicar imágenes de Flickr en un gadget de Blogger: Ejemplificación

Mediante un módulo de Flickr se muestra en la barra lateral del blog un gadget con una selección de tus fotos.

Resultados esperados:

El código se obtiene a partir de la URL de Flickr: 

http://www.flickr.com/badge.gne

Pasos a seguir:

1. Elige el tipo de módulo: HTML o bien Flash. 
2. Elige mostrar contenido público de tu álbum. 
3. Tus colores.
4. Obtén el código para copiar y pegar en tu sitio Web.

1. Elige el tipo de módulo: HTML o bien Flash.
   

clic para ampliar las imágenes

Obtén el código para copiar y pegar en tu sitio Web.

Éste es el código que necesitas...
Lo único que debes hacer es copiar este código y pegarlo en tu sitio Web/ blog donde quieras que aparezca tu módulo.

Los pasos a seguir dentro de blogger:

1. Una vez en el panel de administración de tu blog en Blogger. En la columna izquierda haz clic en Diseño.
2. En la columna lateral haz clic en el enlace Añadir un gadget.
3. Necesitas un tipo de gadget HTML/Javascript.
4. En el cuadro de diálogo Configurar HTML/Javascript introduce un texto como por ejemplo "Publicar Flickr en Gadget Blogger"
5. En el cuadro contenido haz clic derecho y selecciona Pegar. De esta forma se pega el código que antes has copiado desde Flickr.
6. Clic en el botón Guardar.

Jose Ángel Laredo

Publicar presentación de Flickr en Blogger: ejemplificación.

Se trata de realizar un ejemplo de como se publica una presentación de Flickr en Blogger.

• Si no estás autentificado en Flickr debes hacer clic en el enlace Iniciar sesión e introduce tus credenciales Yahoo!.
• En la barra de menús de Flickr selecciona Tú > Tus álbumes.
• A continuación haz clic sobre el álbum a publicar.
• Una vez dentro del álbum observa que existe un botón con el título Presentación. Si se hace clic en este enlace se mostrará una presentación con la secuencia de fotografías que forman parte del álbum.

• Durante la visualización de la presentación haz clic en el enlace Compartir situado en la esquina superior derecha de la presentación. Esta acción mostrará el cuadro Compartir esta presentación.

Existen dos formas de integrar una presentación de fotos de Flickr en una página de tu blog:

Opción I: Dirección URL: insertar en el artículo un enlace a la URL de la presentación.

Opción II Visor de Flash: insertar en el artículo el visor de Flash que ofrece el propio servicio Flickr.

Vamos a utilizar ambos métodos a modo de ejemplo.

Opción I: Dirección URL: insertar en el artículo un enlace a la URL de la presentación.

• Para seleccionar la dirección URL haz clic en el botón Copiar en el portapapeles y la pegas directamente en tu blog o como enlace a Flickr.

http://www.flickr.com//photos/luanco/sets/72157629411183976/show/

Opción II: Visor de Flash: insertar en el artículo el visor de Flash que ofrece el propio servicio Flickr.

<object width="400" height="300"> <param name="flashvars" value="offsite=true&lang=es-us&page_show_url=%2Fphotos%2Fluanco%2Fsets%2F72157629411183976%2Fshow%2F&page_show_back_url=%2Fphotos%2Fluanco%2Fsets%2F72157629411183976%2F&set_id=72157629411183976&jump_to="></param> <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=109615"></param> <param name="allowFullScreen" value="true"></param><embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=109615" allowFullScreen="true" flashvars="offsite=true&lang=es-us&page_show_url=%2Fphotos%2Fluanco%2Fsets%2F72157629411183976%2Fshow%2F&page_show_back_url=%2Fphotos%2Fluanco%2Fsets%2F72157629411183976%2F&set_id=72157629411183976&jump_to=" width="400" height="300"></embed></object>

clic para agrandar la imagen

• En el cuadro de texto, selecciona el código HTML y haz clic con el botón derecho del ratón para copiar al portapapeles. Recuerda que este código inserta el visor Flash que muestra la presentación de fotografías dentro del artículo de este blog.
• Si haces clic en el enlace Personalizar este código HTML se accede a la página mostrada en la imagen, donde es posible elegir el tamaño del visor (pequeño, medio, grande, etc) y en función de la elección se ofrecerá el código HTML a copiar.
• Una vez en la edición de la entrada en tu blog, haz clic en el botón HMTL para acceder al código del artículo. Clic derecho al final del artículo y elige Pegar para pegar el código HTML copiado.

Este es el resultado: Ejemplo de como se publica una presentación de Flickr en Blogger. (tamaño pequeño 400x300)

Este es el resultado: Ejemplo de como se publica una presentación de Flickr en Blogger. (tamaño medio 500x375)

Este es el resultado: Ejemplo de como se publica una presentación de Flickr en Blogger. (tamaño grande 700x725)

Este enlace nos proporciona un recorrido virtual a través de Google Maps.

Jose Ángel Laredo

Uso de diferentes opciones para los tamaños de imágenes.

Ejemplificación de inclusión en Blogger de una foto alojada en Flickr. 

Uso de diferentes opciones para los tamaños de imágenes.

Se trata de una foto alojada en Flickr con un tamaño de 1024x768 px y con un de archivo de 696 KB.

Original de Jose Ángel Laredo

Para añadir la fotografía a esta entrada utilizamos la opción de Flickr: compartir > html, que nos proporciona su código para copiar y pegar en la pestaña HTML:

<a href="http://www.flickr.com/photos/luanco/6889944264/" title="Nacimiento Marinero Luanco 2011 (24) por joselaredogarcia2, en Flickr"><img src="http://farm7.staticflickr.com/6098/6889944264_286dfbfc80_z.jpg" width="640" height="480" alt="Nacimiento Marinero Luanco 2011 (24)"></a>

Observe que las medidas elegidas en el código son width="640" height="480"  [ 640x480 píxeles ]. Podríamos haber elegido otros tamaños.

Pero a su vez hemos usado la opción "imagen grande" cuando subimos el archivo a esta entrada.

El resultado es una imagen de 640px × 480px (escalado a 400px × 300px).

¿Qué hubiese sucedido si usamos la opción "Tamaño original" en lugar de "Grande"

 

En este caso la imagen tendría su propio tamaño, es decir el proporcionado por el código:  640 x 480 píxeles.

Este sería el resultado:

Original de Jose Ángel Laredo en Flickr

Jose Ángel Laredo