Guía: crea y comparte una lista de tus gustos con Riffs
Como se puede ver en el lateral derecho de este blog, hay dos objetos, “Que escucho ahora” y “Visitas al cine”, que generan imagenes de portadas de discos y películas automáticamente, y se actualizan a menudo. ¿Que cómo se hace?, vamos a ello…
Que es Riffs
Riffs es un sitio donde poder recomendar y opinar sobre libros, música, webs, películas y todo tipo de objetos, ya existentes o creados por el usuario.
Una vez te das de alta tienes una página personal, donde ves entre otras cosas, tus “Raves” o votaciones, y tus “Riffs” u opiniones. Para añadir tus objetos recomendados/favoritos, sólo tienes que buscarlos y, o bien escribir una breve opinión sobre él, o simplemente pulsar el icono 
para dar un voto positivo, o 
para uno negativo. Arriba a la derecha, puedes poner un tag al objeto, lo cual es muy útil para luego realizar la lista. Yo por ejemplo, a toda la música le pongo de tag “music”, a las películas “films”, y así sucesivamente.
Crear la lista para colocar en mi web personal o blog
La lista de tus votados, comentados u objetos favoritos, puedes ponerla en tu página mediante un script que genera la propia página.
Para ello, debemos ir al apartado “Riff Roll”: Show your rants and raves on your blog! (imagen que encabeza esta entrada) que se encuentra en la sección “my page”.
Una vez allí tenemos a la izquierda una serie de casillas con datos a cambiar y una previsualización de cómo va a quedar a la derecha. Vamos a ver las casillas más importantes a cambiar:
- Riff-roll type: raves only muestra sólo los objetos a los que has votado y tag only muestra sólo los objetos que tengas bajo el “tag” que marques. Ojo por que si no le has puesto “tag” a ningún objeto aún, no mostrará la lista de “tags” disponibles.
- Skin style: images and text muestra imágenes y texto, images only sólo imágenes y text only para sacar solo la lista con texto.
- picture size: puedes marcar que tamaño quieres para las imágenes, en caso de que las lleve.
Luego puedes darle color, número de columnas y filas, … puedes ir tocando hasta ajustarlo al diseño de tu página.
Cada vez que hagamos un cambio podemos ver como va quedando pulsando “Update”.
Una vez creamos lo tenemos listo, sólo nos queda copiar el código que se muestra un poco más abajo y pegarlo en nuestra página personal.
Yo por ejemplo, tengo un código de sólo imágenes, de 3x3, con el tag “music”, y otro igual pero con el tag “films” ;). Y le asocio el siguiente código CSS:
.riffs img {
text-align: left;
margin: 0 0px 0px 0;
width: 50px;
height: 50px;
display: inline;
}
