Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Creative Coding

Comparte Tus Publicaciones en Facebook con una Imagen Destacada y una Descripción

by
Read Time:4 minsLanguages:

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:

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:

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.

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):


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.

Para escribir el código del metatag en la sección <head> de nuestro blog usamos el hook wp_head para la acción: 

Solucionar Problemas de la Plantilla

Asegúrate de que en el archivo de la plantilla header.php existe lo siguiente: 

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: 

Por ejemplo, si quieres añadir el enlace después del contenido de la entrada:

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.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.