Tutorial para integrar en tu web Flickr usando jQuery

por .

Probablemente si tienes una cuenta en Flickr algún día se te habrá pasado por la mente integrarlo en algún proyecto, la realidad es que hay muchas formas de hacerlo, desde la utilización de librerías PHP que emplean el API de Flickr hasta simplemente unas lineas de código jQuery y la utilización del feed de nuestra cuenta, justamente esta última forma es la que voy a mostrar a continuación.

Antes de comenzar les dejo un enlace al resultado del ejemplo que voy a utilizar para que puedan verlo en funcionamiento y una captura de pantalla:

flickr feed

¿Que necesitamos?

Conociendo la ID del feed de nuestra cuenta de Flickr

Para poder comenzar vamos a necesitar desde Flickr un único dato, el identificador del feed de la cuenta. Para hacer esto tenemos que dirigirnos a nuestra cuenta, específicamente al home de la misma, que tiene una url con la siguiente forma http://www.flickr.com/photos/nombre_usuario/ una vez ahí nos dirigimos al pie de la pagina, y nos vamos a encontrar con lo siguiente enlace:

feed flickr

Ese es el feed de la cuenta, el enlace que obtendrán ahí tiene la siguiente forma (en negrita el id que nos interesa)

http://api.flickr.com/services/feeds/photos_public.gne?id=12674896@N04&lang=en-us&
format=rss_200

Preparando el documento

Ya tenemos el ID de nuestro feed de flickr, ahora vamos a prepara el documento con las bibliotecas necesarias, para hacer debemos colocar el siguiente código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jflickrfeed.min.js"></script>

En la primera linea cargamos jQuery desde Google y en la segunda apuntamos al javascript que descargamos directamente desde jflickrfeed.

El cuerpo del documento HTML es puede ser el siguiente:

<div id="container">
<h1>Ejemplo basico: Flickr Feed + jQuery</h1>
Este es un ejemplo muy básico de utilización del plugin jFlickrFeed.
<div id="marco" class="thumbs"></div>
</div>

Configurando jQuery con el feed de Flickr

Ahora vamos a lo interesante, como configurar para que muestre correctamente las miniaturas de nuestra cuenta de Flickr donde nosotros queramos. El código del ejemplo es el siguiente:

<script type="text/javascript">
$(document).ready(function(){
		$('#marco').jflickrfeed({
			limit: 18,
			qstrings: {
				id: '12674896@N04'
			},

				itemTemplate: '<li><a href="{{link}}" target="_blank">
				<img src="{{image_s}}" alt="{{title}}" /></a></li>'
                   });
});
</script>

Vamos a ver el código por partes.

  • $(‘#marco’).jflickrfeed : Vamos a decirle que selector utilizar para cargar las imágenes, es decir, la función va a buscar dentro del documento una div con id = marco y ahí colocara los datos.
  • limit: 18 : Este es el valor que tenemos que cambiar si queremos variar el numero de miniaturas a mostrar, en mi ejemplo selecciono 20.
  • id: ‘12674896@N04’ : Como se imaginaran, aquí debemos colocar el identificador que conseguimos en el primer paso.
  • itemTemplate : Todo lo que se va a colocar aqui es la forma de la plantilla en que se colocan las imagenes, como se ve en el ejemplo van a ver algunas variables entre doble corchetes, esas son reemplazadas por jQuery por los valores correspondientes a las imágenes.

Un poco de CSS para darle estilo a los resultados

<style type="text/css">
body, html {
margin: 0;
padding: 0;
background: #ccc;
text-align: center;
font-family: arial; }

#container {
width: 550px;
padding: 30px;
background: #f9f9f9;
margin: 10px auto;
text-align: left; }

.thumbs {
margin: 0;
padding: 0;
overflow: hidden; }

.thumbs li {
list-style: none;
float: left;
margin: 5px;
padding: 3px;
background: #eee;

-moz-box-shadow: 0 0 4px #444;
-webkit-box-shadow: 0 0 2px #000; }

.thumbs li a img:hover {
-moz-box-shadow: 0 0 4px green;
-webkit-box-shadow: 0 0 2px green; }

.thumbs li img { display: block; }

.thumbs li a img { border: none;}
</style>

El css es fácil de entender es prácticamente el mismo que utiliza el plugin jQuery. La verdad que acá entra la imaginación para darle un estilo diferente y acorde al estilo de donde estarán integradas las imágenes.

Y listo, eso fue todo. Como podrán ver no es nada complicado integrar el feed de flickr a nuestros proyectos utilizando jQuery, creo que el trabajo pasa mas por el tema de lo estético que lo funcional 😀

Categorizado en: ,