“Flickr badge” que valida contra W3C

Quería poner un flickr badge en la columna lateral derecha, pero me encontraba con que el código está lleno de errores y no hay manera de que valide.

Al final me puse manos a la obra, hasta que lo he conseguido. Son tres simples pasos: obtener el script, modificar el HTML, y modificar el CSS. Me he basado en la idea de este post (en inglés). Así que aprovechamos el script de flickr (desechamos las tablas y demás basura) y le ponemos un CSS bonito:

  1. Generamos un flickr badge con nuestras preferencias.
    Del bloque de código que nos ofrece, sólo nos quedamos con la línea del script. Lo demás es basura: tablas anidadas, CSS empotrado, tags mal cerrados… puajj puajj, porquerías que hacen saltar varios errores contra el validador del W3C.
    La línea del script también es inválida, ya que usa "&" donde tiene que usar "&". Así que sustituimos cada & por &
    <script type="text/javascript" xsrc="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=6&display=random&size=s&layout=v&source=user&user=XXX&">
    </script>

    (donde XXX son distintas opciones;)
  2. Incluimos este fragmento en nuestro código HTML. Yo lo he puesto en la columna de la derecha (sidebar.php):
    <div id="flickr">
    <script type="text/javascript" xsrc="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=6&display=random&size=s&layout=v&source=user&user=XXX&">
    </script>
    </div>

    (con eso saldrían mis fotos. Para que salgan las tuyas, usa la línea del “script” que he nombrado antes que has generado desde flickr badge)
  3. Y también le metemos mano al CSS. He añadido:
    #flickr {
    width:200px;
    height:250px;
    padding:5px 0 0 50px;
    }

    #flickr img {
    float:left;
    margin:0 0px 8px 8px;
    background:#888;
    padding:1px;
    width:75px;
    height:75px;
    }

    (aquí puedes personalizar bordes, colores, distancias, tamaños, etc…, para adaptarlo a la apariencia de tu blog)
  4. Profit!

Con esto conseguimos un bonito badge con unas nuestras fotos de flickr, elegidas al azar. Y lo más importante, que valida contra el W3C, por lo que el blog seguirá siendo accesible y no sufrirá penalizaciones en los buscadores.

A disfrutar 🙂

6 thoughts on ““Flickr badge” que valida contra W3C

  1. Pingback: meneame.net

  2. CH

    Excelente truco. Es de llamar la atención lo cuidadoso que sos por cumplir con los estándares en la web.

    Saludos

  3. Andrés

    Buen post.

    ¿podrías publicar también (o enviarme al mail) el script que utilizas en “Comentarios recientes”? ¿Valida?

    Salud, Andrés.

  4. David Arcos

    Gracias CH. Los estándares web son muy importantes, y a parte de las ventajas “éticas” (accesibilidad, no-dependencia de un solo navegador, compatibilidad, etc) tenemos las “prácticas” (mucha gente no puede visitar tu web por problemas de visualización, los spiders de los buscadores no interpretan bien una página defectuosa, Google resta PageRank a las páginas “defectuosas”, etc)

    Andrés, los “Comentarios recientes” los hago con el plugin de WordPress “Recent Comments que puedes descargar en http://blog.jodies.de/archiv/2004/11/13/recent-comments/
    La instalación es muy fácil, y tiene muchas posibilidades de configuración: que muestre trackbacks, que muestre los gravatars, formato, etc.
    Por supuesto que cumple el estándar, si tienes algún problema al configurarlo puedes escribirme un correo.

  5. leon

    que tal
    muy interesante, pero no entiendo la parte que dice:

    “Así que sustituimos cada & por &”

    saludos

  6. David Arcos

    Ooops, problema de codificación de cuando cambié de hosting la última vez.

    Lo que dice es que hay que cambiar “&” por “& amp;” (sin espacio), ya que es una secuencia reservada.

    Gracias por el aviso.

Comments are closed.