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="https://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="https://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 🙂