Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
En este tutorial crearemos un plugin para establecer, para cada artículo de tu blog, una imagen y un breve resumen que se mostrará en Facebook cada vez que dicho artículo sea compartido. Para conseguirlo, usaremos don funciones principales de WordPress: una imagen Destacada para la previsualización de la imagen y el Post Excerpt para la descripción.
Paso 1 Crear el Plugin
Crea un nuevo archivo llamado facebook-share-and-preview.php. Ábrelo en tu editor de texto favorito y pega el siguiente código:
<?php /* Plugin Name: Facebook Share and Preview Version: 1.0 Plugin URI: https://www.studio404.it/ Description: Adds a Share link to every post and set an image and a description for Facebook. Author: Claudio Simeone Author URI: http://www.studio404.it/ */ ?>
Guarda el archivo en tu directorio /wp-content/plugins/ y actívalo desde la página de administración de los Plugins.
Paso 2 Activar las Imágenes Destacadas
Desde la versión 2.9 WordPress te permite establecer una imagen destacada para cada entrada, pero esta útil funcionalidad debe ser admitida por tu tema. Así que, abre la página desde Añadir Nueva Entrada y comprueba si está disponible el cajetín para Imagen Destacada.
Si no ves la caja para Imagen Destacada, añade la siguiente línea en facebook-share-and-preview.php:
add_theme_support('post-thumbnails'); También hemos indicado un tamaño de imagen personalizado. Conforme a las pautas que dicta Facebook:
La anchura de las miniaturas Y su altura debe ser al menos de 50 pixeles, y no puede exceder de 130x110 pixeles.
Una imagen de 90x90 pixeles funcionará bien.
add_image_size('fb-preview', 90, 90, true); Ahora WordPress creará automáticamente una miniatura de Facebook para cada imagen destacada.
Paso 3 Extraer la Imagen Destacada y el Excerpt
Necesitamos dos funciones para obtener la Imagen Destacada (featured Image) y el Extracto de la Entrada (Post Excerpt):
// Get featured image
function ST4_get_FB_image($post_ID) {
$post_thumbnail_id = get_post_thumbnail_id( $post_ID );
if ($post_thumbnail_id) {
$post_thumbnail_img = wp_get_attachment_image_src( $post_thumbnail_id, 'fb-preview');
return $post_thumbnail_img[0];
}
}
// Get post excerpt
function ST4_get_FB_description($post) {
if ($post->post_excerpt) {
return $post->post_excerpt;
}
else {
// Post excerpt is not set, so we take first 55 words from post content
$excerpt_length = 55;
// Clean post content
$text = str_replace("\r\n"," ", strip_tags(strip_shortcodes($post->post_content)));
$words = explode(' ', $text, $excerpt_length + 1);
if (count($words) > $excerpt_length) {
array_pop($words);
$excerpt = implode(' ', $words);
return $excerpt;
}
}
} Paso 3 Añadir las Metaetiquetas a la Página de la Entrada
Ahora escribimos una función que obtiene la Imagen Destacada y el Post Escerpt y los añadimos a la sección <head> de las páginas de las entradas.
Si ni la Imagen Destacada ni el Post Excerpt están establecidos, las etiquetas no se mostrarán.
function ST4FB_header() {
global $post;
$post_description = ST4_get_FB_description($post);
$post_featured_image = ST4_get_FB_image($post->ID);
if ( (is_single()) AND ($post_featured_image) AND ($post_description) ) {
?>
<meta name="title" content="<?php echo $post->post_title; ?>" />
<meta name="description" content="<?php echo $post_description; ?>" />
<link rel="image_src" href="<?php echo $post_featured_image; ?>" />
<?php
}
} Para escribir el código del metatag en la sección <head> de nuestro blog usamos el hook wp_head para la acción:
add_action('wp_head', 'ST4FB_header'); Solucionar Problemas de la Plantilla
Asegúrate de que en el archivo de la plantilla header.php existe lo siguiente:
<?php wp_head(); ?>
antes de la etiqueta </head>. Si no, añádelo.
Paso 4 Añade el Enlace de Facebook para Compartir en la Página de Entrada Única
En tu tema, abre el archivo de la plantilla content-single.php y añade esto en donde quieras que aparezca el enlace:
<a href="https://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo urlencode($post->post_title); ?>">Share on Facebook</a>
Por ejemplo, si quieres añadir el enlace después del contenido de la entrada:
<div class="entry-content"> <?php the_content(); ?> <p><a href="https://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo urlencode($post->post_title); ?>">Share on Facebook</a></p> </div><!-- .entry-content -->
Solucionar Problemas de la Plantilla
En este tutorial haremos referencia a la plantilla predeterminada de WordPress: Twenty Eleven. Como la estructura de cada tema de WordPress puede diferir de un tema a otro, tienes que identificar que archivo se usa para presentar la página de las Entradas Únicas en tu tema.
Puedes encontrar dos páginas útiles en el Codex de WordPress: la Jerarquía de Plantillas y El Loop en Acción. Si todavía tienes dificultades encontrando el archivo correcto, puedes contactar con el autor de tu tema.
Resultado Final
Ahora puedes escribir tu entrada y añadir una Imagen Destacada y un Extracto:
Esta es la entrada publicada a través del enlace Share on Facebook (compartir en Facebook):
Y una vez pulses el enlace Share on Facebook, esta será la ventana de previsualización de Facebook:
Ahora ya tienes algún control sobre como se muestran tus entradas en Facebook cuando tus lectores las comparten. Cuéntanos en los comentarios si lo has encontrado útil.
