Tutorial: Como adicionar metadados do Twitter no WordPress manualmente

  • Autor Autor Cargando
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
C

Cargando

Épsilon
Estaba aburrido y como nunca había aportado algo al foro decidí hacer este tutorial para agregar los metadatos de Twitter o Twitter Card de forma manual en Wordpress y sin necesidad de plugin.

Para qué sirven las Twitter Card?

Para que aparezca un resumen de la publicación en Twitter, o en e caso de tener una web de imágenes o videos aparece el contenido multimedia (Este tutorial es solo para los Summary Card)

Twitter-Card-wordpress.png


Lo único que necesitan hacer es colocar este código en el header.php
HTML:
<?php
#twitter cards hack
if(is_single() || is_page()) {
  $twitter_url    = get_permalink();
 $twitter_title  = get_the_title();
 $twitter_desc   = get_the_excerpt();
   $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
    $twitter_thumb  = $twitter_thumbs[0];
      if(!$twitter_thumb) {
      $twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
    }
  $twitter_name   = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@libdemvoice" />
<?
  if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
  }
}
?>

En la miniatura se mostrará la imagen que hayan seleccionado como "imagen destacada" en wordpress. Donde está la url de http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75 la reemplazan por la url de la imagen que quieren que se muestre por defecto cuando a la entrada no se le haya seleccionado una imagen destacada.

En esta parte del código <meta name="twitter: site" value="@libdemvoice" /> acuerdate de reemplazar el libdemvoice con tu usuario de Twitter.

Después de tener el código listo y haber guardado los cambios te vas a Enlace eliminado y verificas que aparece todo correcto.

Si no tienes ningún error rellenas este formulario para aplicar: Enlace eliminado

Eso sería todo, cuando hayas rellenado el formulario primero deben aceptar tu cuenta ya que no es automático. (a mi me aceptaron como en 15-20 días)

Dato adicional: Si usas el plugin de Yoast este agrega los metadatos con tan solo marcar la casilla en el plugin, pero igual debes rellenar el formulario.

Nota: De código sé lo mismo que de chino, esto lo compartió el usuario Ryan Cullen (@artesea) on Twitter acá Enlace eliminado
 

Anexos

  • Twitter-Card-wordpress.webp
    Twitter-Card-wordpress.webp
    17,2 KB · Visitas: 125
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Tutorial aprobado, gracias por el aporte.
 
Gran aporte, me gusta la explicación.
 
Cuando me arreglen el ordenador, haré paso por paso el tutorial, por ahora solo dar las gracias.
 
Me sale vacío el excerpt :/
Estaba aburrido y como nunca había aportado algo al foro decidí hacer este tutorial para agregar los metadatos de Twitter o Twitter Card de forma manual en Wordpress y sin necesidad de plugin.

Para qué sirven las Twitter Card?

Para que aparezca un resumen de la publicación en Twitter, o en e caso de tener una web de imágenes o videos aparece el contenido multimedia (Este tutorial es solo para los Summary Card)

Twitter-Card-wordpress.png


Lo único que necesitan hacer es colocar este código en el header.php
HTML:
<?php
#twitter cards hack
if(is_single() || is_page()) {
  $twitter_url    = get_permalink();
 $twitter_title  = get_the_title();
 $twitter_desc   = get_the_excerpt();
   $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
    $twitter_thumb  = $twitter_thumbs[0];
      if(!$twitter_thumb) {
      $twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
    }
  $twitter_name   = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@libdemvoice" />
<?
  if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
  }
}
?>

En la miniatura se mostrará la imagen que hayan seleccionado como "imagen destacada" en wordpress. Donde está la url de http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75 la reemplazan por la url de la imagen que quieren que se muestre por defecto cuando a la entrada no se le haya seleccionado una imagen destacada.

En esta parte del código <meta name="twitter: site" value="@libdemvoice" /> acuerdate de reemplazar el libdemvoice con tu usuario de Twitter.

Después de tener el código listo y haber guardado los cambios te vas a Enlace eliminado y verificas que aparece todo correcto.

Si no tienes ningún error rellenas este formulario para aplicar: Enlace eliminado

Eso sería todo, cuando hayas rellenado el formulario primero deben aceptar tu cuenta ya que no es automático. (a mi me aceptaron como en 15-20 días)

Dato adicional: Si usas el plugin de Yoast este agrega los metadatos con tan solo marcar la casilla en el plugin, pero igual debes rellenar el formulario.

Nota: De código sé lo mismo que de chino, esto lo compartió el usuario Ryan Cullen (@artesea) on Twitter acá Enlace eliminado
 
A mi también me interesa.😛8:
 
gracias, parece muy buen tip tomaré nota.
 
Realmente útil la información proporcionada, sin embargo modifique un poco el código para que no solamente me añadiera el resumen en las entradas principales y en las páginas si no en todo el sitio, así de esta forma cuando envíen un tweet los usuarios con la URL de mi sitio aparezca lo que yo deseo que seria información relevante en general.

Además de esto, solo uno de tus meta datos está desactualizado y es
PHP:
<meta name="twitter:image" content="<?php echo $twitter_thumb; ?>">
que se debe actualizar por
PHP:
<meta name="twitter:image:src" content="<?php echo $twitter_thumb; ?>">

Aquí les dejo el código tal y como yo lo tengo:

PHP:
<!-- Twitter Cards -->
<?php
if(is_single() || is_page()) {
 $twitter_url    = get_permalink();
 $twitter_title  = get_the_title();
 $twitter_desc   = get_the_excerpt();
   $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
    $twitter_thumb  = $twitter_thumbs[0];
      if(!$twitter_thumb) {
      $twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
    }
?>
<meta name="twitter:card" content="summary">
<meta name="twitter:url" value="<?php echo $twitter_url; ?>">
<meta name="twitter:site" content="@USUARIO">
<meta name="twitter:title" content="<?php echo $twitter_title; ?>">
<meta name="twitter:description" content="<?php echo $twitter_desc; ?>">
<meta name="twitter:image:src" content="<?php echo $twitter_thumb; ?>">
<meta name="twitter:domain" content="http://www.misitio.com/">
<meta name="twitter:creator" value="@MITWITTERPERSONAL" />
<?php } else { ?>
<meta name="twitter:card" content="summary">
<meta name="twitter:url" value="http://www.misitio.com/">
<meta name="twitter:site" content="@USUARIO">
<meta name="twitter:title" content="TÍTULO DEL SITIO">
<meta name="twitter:description" content="DESCRIPCIÓN DEL SITIO">
<meta name="twitter:image:src" content="http://www.misitio.com/images/logo.png">
<meta name="twitter:domain" content="http://www.misitio.com/">
<meta name="twitter:creator" value="@MITWITTERPERSONAL " />
<?php } ?>
<!-- Fin Twitter Cards -->
 
Última edição:

Tópicos similares

Voltar
Topo