Cómo implementar las Twitter Cards en Blogger

Hace poco mostrábamos como implemntar esta nueva función de Twitter en los blog de Wordpress, y ahora lo haremos con el caso de Blogger. Para quien no lo conoce todavía las Twitter card es el nuevo modo de mostrar contenido en los tweets, de un modo más atractivo. Cuando el usuario hace click para expandir el tweet que contiene un enlace a nuestra página o blog, se podrá ver el titulo del post, una descripción, un thumbail, el usuario de twitter y el usuario del autor del post. Esta es una función todavía bajo desarrollo, y puede que no funcione del todo bien, pero es bueno irse preparando para ello.

Aquí te mostramos un ejemplo:

Cómo implementar las Twitter Cards en Blogger fb.me/2C2kkM16q
— Blogarizate (@Blogarizate) 26 de marzo de 2013

Hay 3 tipos de Twitter Cards: Resumen, fotos y reproductor de video. El de resumen es el que nos interesa por ahora, dado que es el más útil para quienes tenemos blogs o páginas web.

Ahora a lo que nos importa. Ya dentro del escritorio de Blogger, nos vamos a la pestaña "Plantillas" de nuestro blog. Ahí hacemos click en "Editar HTML" y expandimos los artilugios. Ahora (con las teclas control+F o F3), buscamos el código, y justo antes de ello vamos a colocar el siguiente código:

<meta content='summary' name='twitter:card'/>
<meta content='@Blogarizate' name='twitter:site'/>
<meta content='@tuusuario' name='twitter:creator'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhieEPbqAz3erJGRSkhYI1xe2jwzSFj16qVgStPctkLDf0wlwNWdI8TPFP10GYUBPOPt3aDrhvYPuquSNPi99ERjEFofMom92uUZbRzpvgvfWFz-1d_r-W85mJ5fBSo_Xxt-j7-f72NECM/s1600/favicon.ico' name='twitter:image'/>
</b:if>

Lo único a modificar sería lo que se encuentra en color rojo. Donde dice "Blogarizate", sólo ingresa la cuenta de Twitter de tu página, mientras que en "tuusuario", tu cuenta personal de usuario en Twitter. Si no deseas o no necesitas mostrar esas 2 cuentas distintas de Twitter, sólo borra la línea:

<meta content='@tuusuario' name='twitter:creator'/>

Y listo. En cuanto a la última parte en rojo, esa es la dirección de tu favicón, sólo en caso de que tu post no tenga un thumbnail o imagen en miniatura.

Es importante resaltar, que para ésto pueda funcionar, dentro de cada a post a publicar debemos añadir siempre una descripción en la pestaña "Descripción de búsqueda", tal como lo muestra la siguiente imagen:

Si eso no se cumple, es muy probable que el Twitter Card empiece a dar errores. Puedes insertar el texto que desees, pero por lo general lo recomendable sería copiar y pegar el primer párrafo de tu post.

Pero todavía no terminamos, para ver si todo anda como debe ser, debemos ir a la vista previa de Twitter Card (te pedirá tu usuario y claves de Twitter). Solo insertas la URL de un post (que ya contenga la "Descripción de búsqueda" incluida), y si todo sale bien, le pedimos a Twitter que nos permita participar en Twitter Cards por aquí. Sólo te pedirá algunos y datos, y en unos cuantos días, te avisarán cuando ya estés participando.

Para más info sobre las Twitter Cards, en especial para los otros tipos de ellas, puedes acceder a su página de documentación.

Plantilla de Noticias