TecnoPensamiento: Potencia tu web o blog en Redes Sociales I (Twitter Cards)
No sé si os habréis fijado de que en twitter hay ciertos enlaces que aparecen con una fotografía. Seguro que si has intentado imitarlo te has encontrado que desde la aplicación o desde la web no aparece ninguna opción para que la imagen se inserte. En Internet hay varias páginas que te explican paso a paso cómo hacerlo, pero cuando yo lo implanté ninguna de sus opciones me sirvieron.
Las twitter cards se relacionan con alguna web y hacen que cualquier usuario cuando postee un enlace de la misma automáticamente aparezca una imagen. Es una solución que consigue que nuestros tuits se vean mejor, asimismo está demostrado que cuando un enlace está acompañado de imagen es más probable que se pulse en él.
En 2015 pude asistir al Festival @agathachristie celebrado en TFN y organizado por @CITPuerto Esta es mi crónica:https://t.co/nxhJbfKAu7— RedDePensamientos (@RedPensamientos) 15 de septiembre de 2016
Hay diferentes tipos de Twitter Cards (para enlaces con imagen larga o pequeñas, para apps, para Youtube), yo os voy a hablar de las que yo utilizo que son las de enlace con imagen grande y os enseñaré como las inserto en páginas creadas con blogger. Como veréis es mucho más sencillo de lo que parece.
1. Para empezar tienes que ir a diseño / editar plantilla.
2. Busca dentro de la plantilla esta línea: <b:includable id='post' var='post'>
3. Debajo de la anterior pegas esto:
<meta content='@TwitterdelaWeb' name='twitter:site'/>
<meta content='@TwitterdelAutor' name='twitter:creator'/>
<meta content='enlace a vuestro web o blog' name='twitter:domain'/>
<b:if cond='data:post.firstImageUrl'>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
</b:if>
</b:if>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:post.snippet' name='twitter:description'/>
<b:else/>
</b:if>
Solo tendrías que cambiar lo que está en rojo por tus datos. En verde el tipo de twitter card solo hay que modificarlo si la quieres poner de otro tipo.
4. Guardas la plantilla.
5. Entras en el Validador de las Twitter Cards e introduces un enlace a la web o blog en el que hayáis introducido el código superior.
6. Si no has cometido ningún error en las proximas horas verás como aparece la imagen automáticamente. Ten en cuenta que la imagen que se visualiza es la primera que aparezca en la entrada del enlace.
1. Para empezar tienes que ir a diseño / editar plantilla.
2. Busca dentro de la plantilla esta línea: <b:includable id='post' var='post'>
3. Debajo de la anterior pegas esto:
<meta content='@TwitterdelaWeb' name='twitter:site'/>
<meta content='@TwitterdelAutor' name='twitter:creator'/>
<meta content='enlace a vuestro web o blog' name='twitter:domain'/>
<b:if cond='data:post.firstImageUrl'>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
</b:if>
</b:if>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:post.snippet' name='twitter:description'/>
<b:else/>
</b:if>
Solo tendrías que cambiar lo que está en rojo por tus datos. En verde el tipo de twitter card solo hay que modificarlo si la quieres poner de otro tipo.
4. Guardas la plantilla.
5. Entras en el Validador de las Twitter Cards e introduces un enlace a la web o blog en el que hayáis introducido el código superior.
6. Si no has cometido ningún error en las proximas horas verás como aparece la imagen automáticamente. Ten en cuenta que la imagen que se visualiza es la primera que aparezca en la entrada del enlace.
