Cómo integrar Facebook Open Graph con WordPress

El protocolo Open Graph de Facebook le permite compartir el contenido de su blog no solo con sus lectores, sino también con sus amigos de Facebook. La mejor parte es - cada vez que alguien gustó Su contenido (s), será publicado en su perfil de Facebook. Pero eso no es todo, Open Graph te permite explorar formas más interesantes de interactuar y relacionarte con tus lectores. En última instancia, si se hace correctamente, aumenta su marca y aumenta el tráfico de su sitio..

En el post de hoy, vamos a estudiar cómo integrar Facebook Open Graph con un WordPress auto-alojado en una guía detallada paso a paso. Será necesario editar los temas de WordPress existentes y crear una aplicación de Facebook (si no tiene una).

Listo? Vamos a encender el navegador y su editor de código favorito. Guía completa después del salto..

Paso 1. Crear una aplicación de Facebook

Necesitaremos un ID de aplicación y para conseguirlo, deberás crear una aplicación de Facebook. Si ya tiene uno, continúe con el paso 2.

Crear una aplicación es fácil, esto es lo que haces:

1. Inicia sesión en Facebook, ve a la página del desarrollador.
2. Haga clic enConfigurar una nueva aplicaciónbotón "en la esquina superior derecha.
3. Dame un nombre a tu nueva aplicación, de acuerdo a los términos de Facebook, pulsa Crear aplicación.
4. Ir Sitio web pestaña, llenar Sitio URL y Dominio del sitio.
5. Anote el valor de ID de aplicación en algún lugar y pulsa el "Guardar cambiosbotón ".

¡Eso es todo! Siempre puedes volver más tarde para completar el resto de la información..

Paso 2. Reemplazar Etiqueta

Abre el archivo de cabecera de tu tema (header.php) en tu editor favorito. Mantenga siempre una copia de seguridad en caso de que algo salga mal..

Busque la siguiente línea de código, o una que comience con >

Reemplácelo con:

Mantenga header.php abierto, lo necesitaremos para el tercer paso.

Paso 3. Insertar OG etiquetas

Pega el siguiente código justo después etiqueta, o antes etiqueta.

       "/>          

Estos son algunos de los valores que necesitarás modificar:

• Línea 3: Reemplazar tu_fb_app_id con el ID de aplicación del paso 1.
• Línea 4: Puedes conseguir tu_fb_admin_id debajo de tu página de Facebook Insights, (Más información). Haga clic en el "Insight para su sitio web"botón verde, agarre toda la cadena de código y reemplace la Línea 4.
• Línea 12: esta línea determina la imagen que representa tu publicación. Si su tema es compatible con WordPress Publicar miniaturas, debería funcionar bien. Pero si no lo hace, fallará con gracia sin una imagen. Echa un vistazo a Paso 3a para una solución alternativa.
• Línea 19: Reemplazar logo.jpg Con una url al logo de tu blog. Se mostrará cuando se comparta una página sin publicar en su blog en Facebook.

Paso 3a - Cuando falla "wp_get_attachment_thumb_url"

Cuando wp_get_attachment_thumb_url () no funcionó, es probable que vaya a un atributo de contenido sin valor, como se muestra a continuación:

Una solución simple será reemplazar la Línea 12 con el siguiente código:

A continuación, abre funciones.php e inserte el siguiente código:

function catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ coincidencias); $ first_img = $ coincidencias [1] [0]; if (vacío ($ first_img)) // Define una imagen predeterminada $ first_img = "/images/default.jpg";  devuelve $ first_img; 

Este código de reemplazo intenta usar una llamada de función catch_that_image () para agarrar y generar la URL de la primera imagen que se encuentra. Reemplace la línea 10 con URL a una imagen predeterminada si la función no puede encontrar su primera imagen.

Paso 4. Insertar Facebook Javascript SDK

El siguiente Javascript le permite acceder a todas las funciones de Graph API y Dialogs. También le permite integrar complementos sociales de Facebook como el botón Me gusta, Facepile, Recomendaciones, etc. con facilidad..

Colocarlo en header.php, justo después de

Reemplazar tu_fb_app_id en la línea 4 con ID de aplicación del paso 1 anterior.

Paso 5. Vamos a probarlo.!

Hemos terminado de integrar Facebook Open Graph al blog de WordPress. Hagamos un par de pruebas para asegurarnos de que hemos hecho las cosas correctamente..

Prueba # 1 - Ver código fuente

Echa un vistazo a los códigos fuente de una de las publicaciones del blog, debes tener algo como esto:

Compruebe las propiedades y sus valores, asegúrese de que sean correctos.

Prueba n. ° 2: instalar una caja similar

Si no ha instalado un botón de "Me gusta" de Facebook, es probable que sea el momento de obtener uno. Coloque el siguiente código en cualquier lugar (preferiblemente antes del contenido o después del contenido) dentro de single.php:

A continuación, consigue un amigo para Me gusta eso. Deberías ver algo similar en su perfil de Facebook:

Extra: Plugin de WordPress

Si de alguna manera no pudo instalar los códigos o necesita que esto se haga de manera rápida y fácil, hay un complemento de WordPress para eso.

Facebook Open Graph Meta en WordPress es un complemento de WordPress que agrega metadatos de Facebook para evitar problemas con las miniaturas, el título incorrecto, la descripción incorrecta, etc..