¿Los artículos de tu blog publicados aquí? ¡Propón tu blog!

Twitter Cards: Cómo configurarlas paso a paso

Publicado el 01 abril 2014 por Javiercerezo @javiercerezo

Una de las múltiples funcionalidades que ofrece Twitter a usuarios con sed de exprimir esta red son las Twitter Cards o Tarjetas de Twitter, un formato de tweet enriquecido que permite previsualizar, del mismo modo que Facebook o también Pinterest, una serie de detalles al compartir un enlace.

Esta herramienta está pensada principalmente para editores de contenidos, desarrolladores de aplicaciones o tiendas online que quieran dar mayor presencia al contenido de su página web en la red de microblogging y de paso medir su impacto. De esta forma, cada vez que cualquier usuario comparte algún enlace del sitio web en Twitter, automáticamente se incluye información complementaria del contenido enlazado que posteriormente podemos analizar.

Las tarjetas funcionan tanto en la versión de escritorio como en la versión móvil de Twitter, y según el tipo de contenido que generemos desde nuestra página, existen diferentes tipos de Twitter cards que podemos configurar:

  • Resumen
  • Resumen con imagen grande
  • Producto
  • Aplicación
  • Imagen
  • Galería de imágenes
  • Reproductor de video

Las tarjetas pueden configurarse en cualquier página web añadiendo unas líneas de código o instalando un complemento dependiendo del gestor de contenidos utilizado. En esta entrada veremos las opciones para instalar las Twitter Cards en las dos principales plataformas de blogging: Blogger y WordPress.

En ambos casos, una vez implementamos las Twitter Cards en nuestra web, debemos comprobar que funcionan correctamente a través de la herramienta de validación que ofrece Twitter, para ello probaremos cualquier enlace de nuestra página web y por último solicitaremos a Twitter su uso para nuestra web lo que puede tardar entre 5 y 10 días.

Twitter Cards en WordPress

Si utilizamos la versión hospedada de WordPress (.org) tenemos dos opciones para incluir las tarjetas.

Plugin _ Dificultad baja
Uno de los plugins más recomendados para usar las tarjetas es JM Twitter Cards Plugin. A continuación detallo los pasos de instalación y configuración del plugin:

  1. Accede al panel de control de WordPress.
  2. En la barra lateral izquierda, selecciona “Plugins > Añadir nuevo”.
  3. En el buscador escribimos “JM Twitter Cards” y pulsamos “Buscar”.
  4. Hacemos clic en “Instalar” en el resultado “JM Twitter Cards”.
  5. Si has instalado correctamente el plugin, en la barra lateral izquierda aparecerá una nueva opción denominada “JM Twitter Cards”.
  6. Al acceder al plugin, debemos completar los siguientes apartados:
    • Tipo de Twitter Card.
    • Usuario de Twitter personal.
    • Usuario de Twitter del sitio web.
    • Etiquetas meta asociadas a la cuenta de Twitter.
  7. Guarda los cambios.
  8. No olvides probar y validar tu blog en Twitter.

Manualmente _ Dificultad alta
Si tenemos conocimientos de código, podemos incluir las Tarjetas de Twitter en unos sencillos pasos para que funcionen correctamente al compartir una entrada, una página o una categoría.

  1. Accede al panel de control de WordPress.
  2. En la barra lateral izquierda, selecciona “Apariencia > Editor”.
  3. Una vez en el editor HTML localiza el archivo “header.php” y dentro de él busca la etiqueta </head>.
  4. Justo encima de esta etiqueta copiamos y pegamos el siguiente código, modificando únicamente los apartados en negrita por tus datos de Twitter y del blog:

    5. <meta name="twitter:card" content="TipoTwitterCard" />
    <meta name="twitter:site" content="@UsuarioTwitter" />
    <?php if ( is_category() ) { $cat = get_query_var(‘cat’); $metacat= strip_tags(category_description($cat)); $current_page_URL = $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]; ?>
    <meta name="twitter:url" content="<?php echo esc_url($current_page_URL);?>" />
    <meta name="twitter:title" content="<?php single_cat_title();?>" />
    <meta name="twitter:description" content="<?php echo $metacat;?>" />
    <?php } ?><?php if (is_single() || is_page() ) : if (have_posts() ) : while (have_posts() ) : the_post(); ?>
    <meta name="twitter:description" content="<?php echo get_the_excerpt(); ?>" />
    <meta name="twitter:url" content="<?php the_permalink(); ?>" />
    <meta name="twitter:title" content="<?php the_title(); ?>" />
    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘single-post-thumbnail’ ); ?>
    <meta name=’twitter:image’ content='<?php echo $image[0]; ?>’ />
    <?php endwhile; endif; elseif (is_home() ): ?>
    <meta name="twitter:url" content="<?php echo home_url();?>" />
    <meta name="twitter:title" content="<?php bloginfo(‘name’);?>" />
    <meta name="twitter:description" content="<?php bloginfo(‘description’); ?>" />
    <meta name="twitter:image:src" content="@EnlaceImagenBlog" />
    <?php endif; ?>

  5. Guarda los cambios.
  6. No olvides probar y validar tu blog en Twitter.

Twitter Cards en Blogger

En la plataforma Blogger, tenemos una única opción para incluir las tarjetas de Twitter que nos obligará a editar la plantilla HTML, puedes comprobar el resultado en mi blog de publicidad Ideacreativa.

  1. Accede al panel de control de Blogger.
  2. En la barra lateral izquierda, selecciona “Plantilla > Editar HTML”.
  3. Una vez en el editor HTML, buscamos la etiqueta </head>.
  4. Justo encima de esta etiqueta copiamos y pegamos el siguiente código, modificando únicamente los apartados en negrita por tus datos de Twitter y del blog:

    5. <meta content="TipoTwitterCard" name="twitter:card"/>
    <meta content="@UsuarioTwitter" name="twitter:site"/>
    <b:if cond="data:blog.url == data:blog.homepageUrl">
    <meta content="@EnlaceImagenBlog" name="twitter:image"/>
    <meta expr:content="data:blog.metaDescription" name="twitter:description"/>
    <meta expr:content="data:blog.pageTitle" name="twitter:title"/>
    <meta expr:content="data:blog.url" name="twitter:url"/>
    <b:else/>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <meta expr:content="data:blog.postImageThumbnailUrl" name="twitter:image"/>
    <meta expr:content="data:blog.metaDescription" name="twitter:description"/>
    <meta expr:content="data:blog.pageName" name="twitter:title"/>
    <meta expr:content="data:blog.url" name="twitter:url"/>
    </b:if>

  5. Guarda los cambios.
  6. No olvides probar y validar tu blog en Twitter.

Una vez hayas configurado correctamente las tarjetas y tu sitio web haya sido validado por Twitter, podrás medir el alcance de todos los tweets que compartan un enlace del sitio a través de analytics.twitter.com.

Si te pareció interesante esta entrada, también puedes aprender cómo implementar los pines enriquecidos en WordPress pulsando en el siguiente link.

Twitter Cards: Cómo configurarlas paso a paso ha sido publicado originalmente en Brandalismo. Puedes seguirnos también en Twitter, Facebook y Google+.