Cómo incrustar imágenes en un bótón para tuitear

Uno de los elementos que añade valor en un curso con estrategias de gamificación es la posibilidad de socializar (compartir) los logros alcanzados por el estudiante. Estos logros pueden tener forma de insignias (badges), subidas de nivel (level up) o consecución de objetos de inventario. Estos logros los representamos de forma gráfica a través de una imagen o icono, de manera que a la hora de compartirlos a través de una red social como Twitter lo hagamos en forma combinada de texto acompañado de imagen.

En esta entrada explicaremos cómo crear un botón para tuitear una imagen incrustada. Se trata de una traducción libre del siguiente artículo: How to: embed images in 'Tweet this' links

Incrustar una imagen en un botón para tuitear no es tan fácil como se podría esperar. La manera obvia de hacerlo, por ejemplo, sería añadir en el tuit un enlace URL a dicha imagen, pero Twitter en ese caso mostraría el enlace,  pero no la imagen incrustada.

A menos que utilicemos un tipo particular de URL de la imagen.

Cómo encontrar la URL correcta de una imagen para incrustarla en Twitter

Esta URL de la imagen en particular es una generado por el propio Twitter, una vez la hemos tuiteado previamente. Por lo tanto, antes de crear el botón publicamos un tuit con la imagen incrustada.

Una vez hecho esto, abrimos el tuit. Normalmente se puede hacer esto haciendo clic en la fecha o la hora siguiente a la misma.

La URL del tuit tendrá una aspecto parecido a:
https://twitter.com/CITYTIC_MZN/status/717086038074769408

Es importante señalar que la imagen de un tuit tiene dos URLs. Una empieza con pbs.twimg.com y otra comienza con pic.twitter.com. Nosotros necesitaremos la segunda.

Si pulsamos el botón derecho del ratón sobre la imagen y seleccionamos 'Copiar dirección URL de imagen' obtendremos el tipo incorrecto de URL - el que empieza con pbs.twimg.com. Esta no nos sirve.

En su lugar, hay que hacer clic de nuevo en la imagen. Esto debería mostrar el tweet una vez más - sólo que esta vez con la URL pic.twitter.com visible. Copia este enlace para su uso posterior.

Si no puedes ver la URL pic.twitter haz clic derecho sobre el tuit y selecciona Ver código fuente (o similar). Utiliza CTRL + F (find) para buscar pic.twitter y así encontrar la URL de la imagen que copiaremos.

Agregar la URL de la imagen al botón de 'Twitter'.

Ve a la página de recursos de Twitter  para crear un botón de Compartir un Enlace.

1. En el apartado Compartir URL pega la dirección de la imagen incluyendo el prefijo http://.
2. Completa el resto de opciones: texto del tuit, vía, etiquetas,...
3. Selecciona el código html generado y pégalo en vista HTML de la etiqueta o tarea de Moodle correspondiente (o en tu web o blog). Ten en cuenta que al tuitear no aparece todavía la imagen pero si compruebas la línea de tiempo, podrás comprobar su funcionamiento.

Nosotros hemos comenzado a utilizar estos botones para tuitear la consecución de material de inventario consistente en dispositivos digitales que el estudiante consigue cuando alcanza un nivel determinado de puntos.

Se pueden ver ejemplos de su uso por parte de los estudiantes en nuestro perfil de Twitter.