Convertir HTML y CSS en imagen para compartir en Facebook

Los que sigan esta página habrán podido comprobar que hay tres cosas de las que suelo hablar bastante. En primer lugar de mi trabajo: programar, diseñar, maquetar… en segundo lugar de fútbol, y en tercer lugar de estadística.

En esta ocasión he querido hacer una de mis comparativas futbolístico-estadísticas, generalmente basadas en la histórica rivalidad Madrid-Barcelona, pero dándole un toque especial de creatividad y frikismo.

El objetivo: BBC vs MSN

Básicamente quería generar una infografía en la que se compararan los números de “la BBC” (Benzema, Bale y Cristiano Ronaldo) y los de “la MSN” (Messi, Luis Suárez y Neymar). También quería poder actualizar esta infografía rápidamente después de cada partido. Lo más sencillo habría sido crear una página con PHP y mostrar los datos en HTML+CSS, pero quería que esta infografía fuese fácil de compartir en redes sociales, whatsapp, etc. y para ello necesitaba que el resultado fuera una imagen.

 

BBC vs MSN en CSS

 

Dificultades iniciales

El principal problema con el que me encontraba era que mantener esta imagen actualizada me supondría abrir un editor gráfico (photoshop, fireworks, gimp, etc.) después de cada partido, modificar los números de cada jugador, calcular los promedios de goles y asistencias por partido, generar la imagen, subirla al servidor… vamos, ¡un coñazo importante!

Lo ideal para mí era utilizar una base de datos MySQL que elaboré en su día para una comparativa similar, en la que añado fácilmente los partidos, goles y asistencias de cada jugador, incluso desde mi teléfono móvil, mediante un pequeño formulario. De ahí podría extraer los datos con una sencilla consulta y calcular los promedios de manera automatizada.

Convertir HTML y CSS en una imagen

El primer paso fue sencillo. Usando HTML y CSS, elaboré el diseño de la infografía, posicionando los círculos de cada jugador, los dígitos dentro de ellos, las etiquetas… y completé el resto de la página. Escogí la tipografía Fjalla One, del repositorio de fuentes de Google, que es bastante estrecha y me permitía meter una buena cantidad de texto en poco espacio.

Infografía 'BBC vs MSN' elaborada en CSS

A continuación utilicé la librería html2canvas para convertir mi HTML+CSS en una imagen PNG. Al cargar la página verán que se produce un pequeño salto. Es debido a que primero se muestra la capa HTML+CSS, y posteriormente se oculta y se muestra el PNG generado, que puede ser guardado como una imagen convencional. Si alguien sabe si se puede generar el canvas desde una capa oculta, le agradecería que me lo dejara en los comentarios.
Infografía 'BBC vs MSN' elaborada en CSS

Diseñar la publicación compartida en Facebook

Por último quería que al compartir la página en facebook, la imagen de la publicación fuese la propia infografía. Esto se consigue fácilmente usando etiquetas OpenGraph. Lo único que tuve que hacer fue una llamada POST para guardar la imagen generada en una ruta fija del servidor, y usar esa ruta en la etiqueta og:image. Además tuve que modificar ligeramente la infografía, para que su tamaño fuese proporcional al que utiliza Facebook para este tipo de publicaciones (482×252 píxels). Para ello añadí el nombre de la web y mi perfil de twitter a los lados.

 

Infografía 'BBC vs MSN' elaborada en CSS

Completé los datos de la publicación compartida añadiendo las etiquetas og:title y og:description, que definen los textos que se muestran como resumen en Facebook.

Aumentar el alcance

Para terminar, haciendo uso de la librería AddToAny, añadí los botones más habituales para compartir contenido. Próximamente tengo planificado aplicar el mismo método para mis comparativas “Cristiano Ronaldo vs Leo Messi” y “Neymar vs Bale“.

Enlace

Infografía BBC vs MSN: http://www.michelacosta.com/estadisticas-futbol/bbc-vs-msn/

2 Responses

  1. Fernando 7 de July de 2015 / 03:10

    Hola que tal? realmente muy bueno tu post. Estoy haciendo una web en la que el cliente me pide muchas de las cosas que tiene tu pagina, es decir, exportar una imagen y poder compartirla en facebook con la marca del cliente. Existe la posibilidad de que me facilites el codigo a utilzar (el fuente)? Si bien entiendo mas o menos el concepto, me vendria bien ver los codigos a utilizar. Muchas gracias!

  2. Gilbert 3 de November de 2016 / 09:45

    Copia oculta:

    var img_global;

    html2canvas($(“#load-images”), {
    onrendered: function(canvas) {
    theCanvas = canvas;
    var img = canvas.toDataURL(“image/png”);
    img_global = img;
    }
    });

    No lo carges en ningún contenedor, lo guardas en una variable y ya.

    Luego si quieres descargar la imagen

    $(‘#guardar’).click(function(){

    var link = document.createElement(‘a’);
    link.href = img_global;
    link.download = ‘imagen.png’;
    document.body.appendChild(link);
    link.click();
    });

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.