3 min de lectura

Card para Facebook

Cuando compartimos contenidos por medio de facebook, este evalua el contenido del sitio y lo convierte en una “tarjeta de presentación” que normalmente contiene un título, una imágen y una breve descripción, tal como la siguiente imagen.

og1

 

Facebook utiliza la tecnología de Open Graph para lograrlo.

Open Graph en tu sitio

Bien, lo primero es saber que tipo de contenidos debemos especificar:

  • og:title – El título de tu página, en el ejemplo anterior sería “Usar jQuery en sitios que no lo tienen cargado – Michelle Torres”
  • og:type – El tipo de objeto que estamos compartiendo, en nuestro ejemplo sería “website”
  • og:image – URL de la imágen que debe ser mostrada en la tarjeta
  • og:url – La url de nuestro sitio, en nuestro ejemplo sería “https://yosoy.dev/jquery-en-consola/”
  • og:description – Aquí debes poner la descripción que se muestra en la tarjeta

Ahora, pongamos esos contenidos en nuestro sitio web

Depurar el card de facebook

En ocasiones, hacemos cambios en nuestras etiquetas de Open Graph y parece que facebook no actualiza los cambios, para esos casos, debemos ir al depurador: https://developers.facebook.com/tools/debug?q

  1. Escribe la URL
  2. Clic en el botón depurador

Ahi podrás ver la forma en que Facebook esta reconociendo tu sitio, además de que al hacerlo, fue nuevamente obtenido, por lo cual ya no esta en el caché.

Tarjeta en Twitter

Twitter al igual que facebook cuenta con un reconocedor para mostrar los contenidos a modos de tarjetas

Esta es una tarjeta de tipo resumen.

Twitter cards en tu sitio

Primero veamos que tipo de contenido puedes configurar en la tarjeta:

  • twitter:card – En nuestro caso le pondremos que es de resumen, por lo cual su valor será “summary”.
  • twitter:title – Título del sitio de no mas de 70 caracteres.
  • twitter:description – Descripción a mostrar del contenido del sitio. Tiene un límite de 200 caracteres.
  • twitter:image – URL con la imágen a mostrar
  • twitter:creator – Arroba del usuario creador
  • twitter:site – Arroba del sitio

Ahora solo basta con poner las etiquetas en nuestro sitio:

Validación de tarjetas en twitter

Twitter cuenta además con un validador de cards, desde el cual puedes crear tu tarjeta de una manera sencilla.

https://dev.twitter.com/docs/cards/validation/validator

Selection_007
¿Te gustó este artículo?

Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.

Artículos relacionadosMás del autor

9 COMENTARIOS

  1. Hola Michelle es interesante los temas mira tengo que hacer un trabajo y estoy un poco perdida del twitter he obtenido el timeline ahora tengo que graficar los datos en el caso de cuantos tweet por año se han hecho desde la creacion de la cuenta la cosa es que no se como hacerlo se que tengo que contabilizar los mensajes pero no se como trabajar con el arreglo que tema tengo que estudiar antes de que me regresen a estudiar todo un semestre Gracias seguire checando los tutoriales y temas que hay en tu blog haber si me aclara un poco la mente…

    • Any,

      Por lo que comentas me parece que lo único que necesitas es saber bien el uso de arreglos en el lenguaje que estes usando en backend. Por ejemplo si estuvieras usando PHP, este lenguaje tiene poco mas de 100 funciones para manejo de arreglos donde puedes almacenar toda la información que deseas y procesarla.

      Me es difícil poder ayudar mas, pues no queda muy claro como estas haciendo las cosas.

      Suerte!

Deja tus comentarios

This site uses Akismet to reduce spam. Learn how your comment data is processed.