Twitter o el reino de los 140 caracteres. Reconozco que nunca fui gran fan del pajarito pero poco a poco le voy cogiendo el gustillo. Cuando empecé con el blog me cree una cuenta que tenía medio abandonada porque me daba una pereza horrible explicarme como en un telegrama. Gracias a mi querida Bienvenidamama empecé a descubrir el mundo twitter con su post como mi Invitada con Estrella. Después poco a poco, me fui interesando por seguir y aumentar mis seguidores. Pero sin duda lo que termino de convencerme fue la entrada en mi vida de las twitter cards.

¿Qué son?

Unas tarjetas en forma de código Html que debes añadir en la plantilla de tu blog. Las hay de distintas clases dependiendo del tipo de contenido que quieras promocionar:

  • Summary Card o tarjeta resumen compuesta de un imagen pequeña y un texto más amplio.
  • Sumary card with a large image: lo mismo que la anterior pero se le da mucha más importancia a la imagen.
  • App card: es una forma ideal de presentar app en twitter con botón directo de descarga.
  • Player card: muestra vídeos, audio y multimedia.

Yo las únicas que he utilizado son las dos primeras dependiendo de si quiero dar más o menos importancia a la foto.

Como crearlas

Nada más oír hablar de ellas, empecé con mi búsqueda de tutoriales. Algunos no me funcionaron, otros me perdía en la mitad o me dirigían a una página de pago. Empecé a creer que había que pagar por ellas pero no señores, son gratis. Al final entre los tutos y mi intuición, conseguí aprender como crearlas, No se si es la única manera de hacerlas pero es la mía y a mi me funciona.

Para usuarios de wordpress: Si usáis la versión gratuita y tenéis conectado al blog a twitter, el aspecto al compartir será algo más completo que un tweet normal aunque sin llegar al nivel de una twitter card.  Para los usuarios de wordpress.org podéis descargaros este plugin.

Primero tenéis que ir a la página de Twitter Developers (mejor si allí os registráis como usuario) y os encontraréis con la breve descripción de la tarjetas que quedan vigentes y que ya os comente antes. Aunque en la columna de la izquierda veréis otros tipos de tarjetas, algunos de ellos han sido descatalogados hace poco. Si le dais clic en cualquiera de las 4 existentes, veréis un ejemplo de las mismas y un código tal que así:

Código tarjeta resumen:
<meta name=»twitter:card» content=»summary» />
<meta name=»twitter:site» content=»@tu nombre de usuario twitter» />
<meta name=»twitter:title» content=»Título tu post» />
<meta name=»twitter:description» content=»Descripción del contenido del post» />
<meta name=»twitter:image» content=»url de la foto» />

Código tarjeta resumen con imagen grande:
<meta name=»twitter:card» content=»summary_large_image»/>
<meta name=»twitter:site» content=»@tu nombre de usuario en twitter/»>
<meta name=»twitter:creator» content=»@usuario creador de la imagen»/>
<meta name=»twitter:title» content=»título del post»>
<meta name=»twitter:description» content=»pequeño resumen del contenido del post»/>
<meta name=»twitter:image» content=»url de la imagen»/>

*Para conseguir la url de la imagen de un post, solo tenéis que ir a la visión html del dicho post y localizar la imagen en cuestión.

Una vez elegida la tarjeta que os conviene, la copias en el bloc de notas y allí la personalizais con vuestros datos (texto de color azul). Después la copias y vais a vuestro escritorio blogger→plantilla→editar plantilla y copias el código dentro de la sección <head>….</head>. Comprobais que no hay ningún error dando a vista previa y guardáis la plantilla. Recuerda siempre hacer una copia de seguridad de la plantilla antes de toquetearla por si las moscas.

Este es un ejemplo de como quedo mi ultima twitter summary con imagen grande que es la que más uso.

<!–TWITTER–>
<meta name=»twitter:card» content=»summary_large_image»/>
<meta name=»twitter:site» content=»@frikymama»/>
<meta name=»twitter:creator» content=»@frikymama»/>
<meta name=»twitter:title» content=»Consejos para una buena organización bloguera»/>
<meta name=»twitter:description» content=»¿Eres blogger y te cuesta llegar a casi todo? Bienvenida al club. Aunque tengo que decirte que todo tiene solución.
Aquí tienes una buena tanda de consejos, recursos y herramientas»/>
<meta name=»twitter:image» content=»http://1.bp.blogspot.com/-XRNnUZG5oIQ/VYBPGsSJgWI/AAAAAAAAQxw/upCgzfDiK8Y/s640/organizacionbloguera.jpg»/>

Así quedaría en la plantilla:

Después entrar en Card Validator para validad nuestra tarjeta y escribir la url del blog donde pusiste el código.

En la columna de la izquierda según anuncia el recuadro verde mi twitter card ya fue probada así que al introducir la url de mi blog, si todo esta bien, podremos ver la vista previa de la tarjeta.

Si es la primera vez que creáis una twitter card  deberéis rellenar un pequeño formulario que os aparecerá en lugar de mi rectángulo que apunta la flecha. En un plazo corto ( a mi me tardo dos días), twitter me confirmo vía email que mi solicitud de twitter card había sido acepada. A partir de ahora podrás crear la tarjetas de deseas sin tener que repetir esta solicitud. Solo tendrás que ir variando el código html de la tarjeta en tu plantilla.

IMPORTANTE→Debes tener en cuenta que cada vez que compartas cualquier post en twitter, saldrá la twitter card que tengas personalizada en tu plantilla en ese momento (url, descripción e imagen). Por lo tanto si quieres compartir post antiguos mejor será que la quites de tu plantilla y solo la pongas
personalizada con cada nuevo post que quieras compartir.

Mi truco: Dejar este código permanente en la plantilla

  <!– Metas para Twitter –>
<meta content=’summary’ name=’twitter:card’/>
<meta content=’@Frikymama‘ name=’twitter:site’/>
<meta content=’http://www.frikymama.com/‘ name=’twitter:url’/>
<meta content=’frikymama.com‘ name=’twitter:domain’/>
<meta content=» name=’twitter:title’/>
<meta content=» name=’twitter:description’/>
<meta content=’http://i61.tinypic.com/2wmi59c.jpg’ name=’twitter:image’/>

  • La parte rosa como ya sabéis la cambiáis por vuestros datos.
  • La url azul yo le tengo puesto el logo de mi blog

Si os fijáis los campos » de title y description están vacíos . Si queréis que al compartir salga un post específico deberéis rellenar estos campos con la título y descripción de post. Lo mismo podéis hace con la url de la imagen o dejar la del logo.

Dicho todo esto al compartir vuestros post en twitter, esta sería su apariencia. Si hacemos clic en Ver resumen visualizaremos la twitter card. Os he puesto dos ejemplo como quedaría un post de wordpress.com (1) sin twitter card pero con una miniatura simple y como quedaría una twitter card de un blog en blogger (2).

Si hacemos clic en Ver resumen (2) twitter nos devuelve esta imagen:

¿Qué os han parecido las twitter cards? ¿Las utilizabais ya? Si tenéis alguna duda o pregunta, me las podéis dejar en los comentarios y compartir la entrada si la consideráis útil para otros bloggers. Un besito y nos vemos por las redes.

 

¿Te ha sido de utilidad el artículo?
(Votos: 0 Promedio: 0)

Pin It on Pinterest