Las Twitter Cards En Blogger

Este post es de http://www.lascronicasdelcesar.com/2015/08/como-instalar-las-twitter-cards-en.html




Introducción

Las Twitter Cards nos pueden ayudar mucho a la hora de compartir un link ya que gracias a ellas podemos hacer mas vistoso el tweet que enviamos a ojos de las personas que lleguen a ver nuestro tweet e incrementa las posibilidades de que interactúen con nuestro tweet y le den clic a el link compartido y así enviarlo a nuestro blog o página.





Concepto Básico

Podemos resumir que las Twitter Cards son diferentes maneras en las que un tweet con link se presenta dentro de Twitter.



Tipos de Twitter Cards

Resumen. En donde encontraremos el Titulo, Descripcion, Vista en Miniatura y la Cuenta de atribución.



Resumen con Imagen Grande. Similar a la de Resumen pero con una Imagen más Grande.



App. Para detallar una app para movil con link a descarga.



Reproductor. Para adjuntar un video/audio/multimedia.



En este link puedes ver más a detalle cada tipo de Twitter Card.



El tipo de Twitter Card que vamos a instalar es el de Resumen con Imagen Grande.

Post Relacionado

Pasos Para Instalar En Blogger

1.Tienes que accesar a blogger y elegir en blog en donde quieres instalar el código para las Twitter Cards.



2.Elegir "Plantilla" y despues "Editar HTML".

Buscamos la etiqueta </head> y justo antes de la etiqueta insertamos el siguiente código:

Dar clic para ver en grande

No te preocupes que el código te lo dejo mas abajo para que puedas copiar y pegar.



¿Cómo Modifico El Código Para Utilizarlo A Mis Necesidades?

En la primera parte del código (en la imagen) se muestra la un comentario que especifica que a partir de ahí hacia abajo inician el código de las Twitter Cards (este pedazo de código es opcional ya que solamente es un comentario).



La siguiente linea especifica el tipo de Twitter Card que vamos a querer, en este caso el de Resumen con Imagen Grande (summary_large_image)



La tercera y cuarta linea se especifica la cuenta en Twitter del sitio al que pertenece el link y la cuenta de la persona que escribió el post que estamos compartiendo. Como yo no tengo una cuenta aparte para éste blog (uso mi propia cuenta) la cuenta a especificar del sitio (twitter:site) es la misma que la del creador (twitter:creator). Estas 2 últimas lineas las puedes cambiar con tu cuenta de Twitter.

En la segunda parte del código se usa una etiqueta de condición de blogger para saber si el link que se esta compartiendo es el Index (la pagina principal del blog) o si es algún post u otra página.



Si es el index, lo que hace es poner como Titulo (en Twitter), el texto "Las Crónicas Del César". Como descripción (en Twitter), pone "No soy un adepto escribiendo, pero lo haré......". Pone una imagen para compartir que es ésta. Y en URL, pone la principal del blog. De aquí lo que puedes cambiar es el Titulo, la Descripción y la Imagen. La URL de tu blog la pone automáticamente.



Pero si no es el Index (por ejemplo una publicación o página estatica) hace lo siguiente:

Pone como URL la del post que estamos compartiendo. En titulo pone la del post que estamos compartiendo. Y en imagen pone la primera imagen que publicamos en nuestro post. De aquí no te recomiendo cambiar nada porque pone automáticamente la URL, Titulo e Imagen de tu publicación.

Dale clic para ver en grande

En la última parte del código se pregunta si el post tiene descripción (esto no se ve en el post actual, son etiquetas para el buscador de Google).



Si tiene, pone como descripción (en Twitter) la descripción que pusiste a la hora de escribir un post que esta situado en la parte derecha de tu editor para escribir post (ver imagen aqui).



Si no tiene, pone una descripción que tu hayas puesto, en este caso yo puse una descripción genérica: "Mira el post completo. Si te gusta.......", lo puedes cambiar por tu propia descripción genérica para tus publicaciones.

Dale clic para ver en grande

Una vez hecho esto procedemos a la validación en Twitter en el siguiente link:

https://cards-dev.twitter.com/validator



Pegamos nuestra dirección del blog en la caja para validar. En nuestra dirección hay que cambiar .mx por .com y volverlo a validar para que sin importar cual compartamos (con .mx o .com) nos aparezcan las Twitter Cards en la timeline.

Esta es la vista previa del link en Twitter:

Y de un link en Twitter:

Código para copiar y pegar.









Referencias:

https://dev.twitter.com/cards/overview

https://dev.twitter.com/cards/getting-started

http://blogger-hints-and-tips.blogspot.mx/2013/09/how-to-set-up-twitters-view-summary.html





Si te gusto el post, dale +1, Tuitealo, Like y Compartelo en tus redes sociales, de verdad me ayuda mucho. No olvides comentar en la sección de abajo.