¿Cómo instalar comentarios de Facebook con contador?

El primer paso es validar tu ID de Facebook Developers como lo explico en un post anterior, a diferencia de muchos post que he leído por internet a mí si me cobraron por realizar la validación.

CREAR UNA APLICACIÓN EN FACEBOOK

Accede a https://developers.facebook.com/apps y crea una “Nueva Aplicación” (botón arriba a la derecha) especificando que se integra con Facebook como “Sitio Web” e indicando el “Site Domain” y la “URL del sitio” correctos. Ponle un nombre que te sirva a ti para saber qué aplicación es, pero no tiene visibilidad para nada.

Tras crear la aplicación apúntate su App ID/API Key (el “código secreto de la aplicación no lo vas a necesitar).

WIDGET DE FACEBOOK COMMENTS

Accede a http://developers.facebook.com/docs/reference/plugins/comments/ y crea tu widget seleccionando:

  • número de comentarios
  • ancho del bloque
  • diseño (solo hay claro u oscuro)

Tras clicar en “Get Code” debes elegir la App que has creado en el paso 1 y el Formato XFBML. Verás una pantalla parecida a:

Guárdate los códigos que aparecen en la primera y la tercera caja (yo la segunda la he ignorado y me funciona).

 

MODIFICAR EL CODIGO OBTENIDO

Es necesario adaptar el código de la caja 3 para que asigne correctamente los comentarios a la URL de la entrada del blog. Sin hacer este cambio, todos los comentarios contarían en la “Home” de tu blog.

El código modificado es:

<fb:comments href="<?php echo get_permalink(); ?>" num_posts="10" width="610" notify="true"></fb:comments>

OBTENER LOS METATAGS Y ADAPTARLOS A TU BLOG

Este fué el paso que más me costó encontrar y fue gracias a la herramienta de depuración que ofrece el mismo Facebook:http://developers.facebook.com/tools/debug. Usándola para comprobar si todo estaba correcto me daba algunos fallos e investigando logré averiguar que era necesario incluir unos metatags de la API de Facebook.

Estos metatags, ya adaptados a WordPress son:

<!-- Tags Facebook -->
2 <meta property="og:title" content="<?php the_title(); ?>" />
3 <meta property="og:type" content="Website" />
4 <meta property="og:url" content="<?php echo get_permalink(); ?>" />
5 <meta property="og:site_name" content="Nombre del Site" />
6 <meta property="fb:admins" content="ID Usuario Facebook" />
7 <meta property="fb:app_id" content="ID App" />
8 <!-- End Tags Facebook -->

 

Modifica “Nombre del Site” con el de tu blog, “ID Usuario Facebook”  con el de tu usuario de Facebook y “ID App” con el número que te apuntaste en el paso 2 de este manual.

El ID de Usuario de Facebook es difícil de encontrar. Un truco es ir a “Crear un album de fotos” y apuntar el id que aparece en la URL.

 

INSERTAR LOS CODIGOS EN TU PLANTILLA DE WORDPRESS

Nos acercamos al final de esta integración. En realidad solo nos queda insertar todo el código que hemos obtenido hasta ahora en diferentes archivos de la plantilla de nuestro blog y verlo funcionar.

  • El código de la caja 1 debes insertarlo después de la etiqueta <body>, normalmente en el fichero header.php de tu plantilla
  • El código de la caja 3 modificado (paso 4) debes insertarlo donde quieras que aparezcan los comentarios, en el fichero single.php de tu plantilla
  • Los metatags modificados (paso 5) debes insertarlos antes del cierre de la etiqueta </head>, también en el fichero header.php
CONTADOR DE COMENTARIOS
Si quieres puedes añadir un contador que indica el número de comentarios que tiene una URL (o una entrada en nuestro caso) solo hay que añadir este código donde quieras que aparezca el número de comentarios de la entrada en el fichero single.phpde tu plantilla (yo lo puse justo encima de donde están los comentarios).
1 <fb:comments-count href=<?php echo get_permalink(); ?>></fb:comments-count> comentarios

Milenial amante de la fotografía, los viajes y del amor · LCC · Colaboro donando fotografías en Pixabay y Unsplash.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

subir