Tutorial: Como utilizar las Twitter Cards(Twits con super diseño)

Adan Najera · 10 Jun 2016

Bueno despues de tanto tiempo me he tomado un poco de tiempo para realizar este tutorial que en su momento bastante gente me lo ha pedido...
Así que empecemos 🙂

Que son las Twitter Cards? pues son twits mas llamativos, no se la definicion correcta je... aqui les adjunto algunos ejemplos:

Asi como este se puede poner videos o ajustar el diseño de diferente forma... YO no soy un EXPERTO asi que solo pondre de ejemplo los que manejo, pero les dejo aqui la url de la documentacion para que vean otras formas en que lo puedes aplicar:

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

Empecemos...

Necesitan en su pagina ya sea html o blogger (Wordpress existe un plugin especial llamado twitter card para evitar todo este rollo) y usaran el siguiente codigo:

HTML:

<meta name="twitter:card" content="summary"><!--Este es el tipo de twitter card, ya sea imagen grande, video imagen chica, etc-->
<meta name="twitter:url" content="http://URL.com"><!--La URL de tu contenido-->
<meta name="twitter:title" content="El titulo"><!--El titulo de tu contenido-->
<meta name="twitter:description" content="La descripcion"><!--La descripcion de tu contenido-->
<meta name="twitter:image" content="Url de imagen"><!--URL de imagen de tu contenido y si es video pues es diferente... mirar documentacion-->
<meta name="twitter:image:width" content="600"><!--Tamaño de la imagen-->
<meta name="twitter:image:height" content="335"><!--Tamaño de la imagen-->

Este codigo lo colocaran dentro de las etiquetas <head></head> de su pagina web y en blogger es algo diferente....

En web html se tiene que ver algo asi, claro con sus datos correspondientes:

HTML:

<html>
<head>
<title>Plantilla basica jeje</title>
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://URL.com">
<meta name="twitter:title" content="El titulo">
<meta name="twitter:description" content="La descripcion">
<meta name="twitter:image" content="Url de imagen">
<meta name="twitter:image:width" content="600">
<meta name="twitter:image:height" content="335">
</head>
<body> Tu contenido </body>
</html>

En blogger vamos a realizar una nueva entrada-->

No pongo imagen por que es algo sencillo

Creamos todo el contenido de la entrada-->

Y cuando tengamos ya todo el contenido y estemos seguros de que no modificaremos nada nos dirigimos a vista HTML-->

Y hasta arriba colocamos el codigo de las twitter cards--> MODIFICANDO LAS PARTES CORRESPONDIENTES POR NUESTROS DATOS

Tienes que agregar el codigo hasta el final debido a que si lo colocas primero y sigues realizando cambios puede que blogger te borre el codigo ya que estas usando metas fuera del head... ya me ha pasado varias veces... no es que te lo borre si no que simplemente no los toma en cuenta esas metas...

Publicamos y listo 🙂

Ahora lo que sigue es opcional... ya que si estas seguro que colocastes las metas correctamente te puedes saltear este paso...

Nos dirigimos a esta pagina:

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

Colocamos la url de nuestra entrada(en caso blogger) o nuestra web(en caso html)
Y damos clic en vista previa: Y nos tiene que aparecer algo parecido a esto...

Quiere decir que colocamos las etiquetas metas de forma correcta...
ahora un ejemplo pero con las imagen chica:

Como pueden ver es otro diseño...
Debajo de la vista previa aparece un Debbug en el que les dice si salio bien o no, en caso de que no les dice el problema para que ustedes lo arreglen...

Ahora como publico en twitter?
Pues simplemente colocas el link ya sea acortado o no, pones el texto que quieras y publicas
NOTA: En twitter no aparece vista previa como en facebook asi que veras los cambias hasta que publiques y recarges la pagina...
Ejemplo:

Publicado

Despues de actualizar

Como pueden ver desaparece la URL del twit y en cambio aparece la vista previa

Bueno aqui les dejo el codigo de los diferentes tamaños que son los unicos que yo se usar:

Imagen extraLarga:

HTML:

<meta name="twitter:card" content="summary_large_image">

Imagen Pequeña:

HTML:

<meta name="twitter:card" content="summary">

Y esto es todo, Espero que el tutorial les sea de su ayuda y pues dejen su Me agrada si creen que me los valgo....
Y perdon por haber tardado tanto en realizar el tutorial xD

Saludos y gracias 🙂😛8:😛8:😛8:

NOTA: Se que el codigo no deberia ir en cada entrada si no en la plantilla... Pero no se como se hace para que la meta detecte la imagen requerida de la entrada, el titulo pues es facil, pero imagen pues no jeje... quien sabe como se hace... y si son varias imagenes pues ese es el problema ya que twitter no te da la opcion como en facebook de elegir la imagen deseada.... aparte que pues lo puse en blogger por que fue el que mas me pidieron... yo solo me preocuper por que funcionara lo que me pidieron xD

Saludos

crazysebas · 10 Jun 2016

Muy buen aporte :encouragement::encouragement::encouragement:

IGNACIO · 10 Jun 2016

[MENTION=134323]Adan Najera[/MENTION] está mal hecho el tutorial, las twitter cards se pueden sumar al código de la plantilla y hacerlo andar por defecto en blogger, no hay para que estar editando a mano en cada entrada :topsy_turvy:

Adan Najera · 10 Jun 2016

IGNACIO dijo:
[MENTION=134323]Adan Najera[/MENTION] está mal hecho el tutorial, las twitter cards se pueden sumar al código de la plantilla y hacerlo andar por defecto en blogger, no hay para que estar editando a mano en cada entrada :topsy_turvy:

Si tienes razon en eso... pero en este caso lo realice asi ya que no se como hacerle para que la meta detecte la imagen que deseo de cada entrada... ya que en una entrada se puden poner varias imagenes...

Es por eso que lo realice de esa forma.... y funciona 🙂
No es que ese mal hecho el tutorial si no que yo lo vi de otra manera jeje si sabes el codigo o la forma para que detecte la imagen deseada de cada entrada aun teniendo mas de una por favor de compartirla...
Saludos 😛8:

unaprendiz · 20 Jul 2016

IGNACIO dijo:
[MENTION=134323]Adan Najera[/MENTION] está mal hecho el tutorial, las twitter cards se pueden sumar al código de la plantilla y hacerlo andar por defecto en blogger, no hay para que estar editando a mano en cada entrada :topsy_turvy:

Hola, perdona la molestia pero podrias ayudarme para realizarlo sin tener que estar editando cada entrada por favor?

Goodchild · 20 Jul 2016

Gracias por compartir .. 😛8:

beatriz03 · 20 Jul 2016

Voy a probarlo...y esperando la otra técnica más práctica... Gracias por este aporte. :encouragement:

Norlan30 · 23 Jul 2016

IGNACIO dijo:
[MENTION=134323]Adan Najera[/MENTION] está mal hecho el tutorial, las twitter cards se pueden sumar al código de la plantilla y hacerlo andar por defecto en blogger, no hay para que estar editando a mano en cada entrada :topsy_turvy:

HTML:

<!-- ETIQUETAS META TWITTER -->
      <meta content='summary_large_image' name='twitter:card'/>
      <meta content='<USUARIO DE TWITTER CON @>' name='twitter:site'/>
      <meta content='<USUARIO DE TWITTER CON @>' name='twitter:creator'/>   
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
           <!-- SI ES LA PÁGINA HOME --> 
           <meta content='<NOMBRE DEL BLOG' name='twitter:title'/>
           <meta content='<DESCRIPCION DEL BLOG' name='twitter:description'/>
      <b:else/>
      <!-- SI NO ES LA HOME (POST, PAGINA, ETC.) -->
           <meta expr:content='data:blog.url' name='twitter:url'/>
       <meta expr:content='data:blog.pageName' name='twitter:title'/>
       <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
       <b:if cond='data:blog.metaDescription'>
           <!-- SI EL POST TIENE DESCRIPCION (SEARCH DESCRIPTION)  -->
        <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
           <b:else/>
                 <!-- SI EL POST NO TIENE DESCRIPCION (SEARCH DESCRIPTION)  -->
         <meta content='Lee el post completo. Retwittealo si te gusta y compártelo en las redes sociales' name='twitter:description'/>
       </b:if>
      </b:if>
<!--FIN DE ETIQUETAS META TWITTER-->

creo que esta es la manera correcta de colocarlo en blogger . 😛8: poner antes de <b:skin>... saludes funciona al 100%

Tutorial: Como utilizar las Twitter Cards(Twits con super diseño)

Adan Najera

crazysebas

IGNACIO

Adan Najera

unaprendiz

Goodchild

beatriz03

Norlan30

Temas similares