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)
Pues no las conocía, pero me pondré a ello porque me parecen súper útiles. Voy a entretenerme un rato en toquetear a ver qué pasa. Un besote
No tenía ni idea, pero me surjen muchas dudas…
Para cada post que quieras "promocionar" hay que crear una tarjeta diferente?
besos Ana!
Si quieres puedes dejar el codigo en la plantilla e ir personalizando los campos de titulo, descripcion y url de la imagen. Sino cada vez que compartas en twitter te saldra la misma tarjeta. Un besito.
Felicitaciones!… excelente post!… gracias por compartir.
Una pregunta, las imagenes que usas par las Twitter Cards, las haces tu! .. que programas usas?
Gracias de nuevo!
Son las imagenes de promocion de cada post. Aunque suelo incluir mas imagenes en mis post siempre la primera es la de presentacion y la que comparto en rrss. Al principio la diseñaba con picmonkey pero hace tiempo que solo utilizo photoshop. Tengo un curso basico gratuito en mi blog sobre ese programa. Un saludo.
Son las imagenes de promocion de cada post. Aunque suelo incluir mas imagenes en mis post siempre la primera es la de presentacion y la que comparto en rrss. Al principio la diseñaba con picmonkey pero hace tiempo que solo utilizo photoshop. Tengo un curso basico gratuito en mi blog sobre ese programa. Un saludo.
..ah, y otra inquietud, de que tamaño pueden o deben ser las imágenes para las Cards con imagen grande?
De nuevo, muchas gracias!
Twitter no te pide un standar para estas images. Como consejo y no ocupar espacio en tu almacenamiento gratuito de google, te recomiendo subir imagenes sobre unos 600 px. Las de mi blog son todas de 640px porque me gusta que ocupen el ancho completo de mis post. Un saludo.
Hola Ana María
Acabo de leer este post y me parece un trabajo muy interesante!!
Enhorabuena!!
Estoy buscando las "Sumary card with a large image" para implementarlas en mi wordpress, para que se vean cuando comparto con twitter un post, pero no encuentro donde tengo que insertar los meta que describes arriba…
estaría ,uy agradecido si pudieras ayudarme o dirigirme a alguna web
mi contacto: epedraza cordente@gmail.com
muchas gracias
Mi tuto esta basado en blogger. Los que tebeis wp lo teneis mas facil. En la version gratuita basta con ir a ajustes y conectar con twitter. En la version de pago lo puedes hacer desde el plugin Seo by yoast. Si buscas en el blog ayudawp tienes toda la info detallada. Un saludo.