Integrar Facebook Comments en tu web

Voy a explicar cómo integrar Facebook Comments en una web.

Al comenzar un nuevo proyecto web nos puede surgir la duda de que sistema de comentarios vamos a usar, hay gran variedad de sistemas de comentarios para webs y blogs pero ahora vamos a centrarnos en Facebook Comments.

Otros post interesantes sobre Facebook son:

Obtener el código de Facebook Comments

Accedemos a la página oficial de Facebook Comments. Nos encontraremos con los pasos a realizar bien ordenados.
Y nos encontramos con los campos básicos a rellenar que pongo en la siguiente imagen:
Rellenamos en cada campo:
- URL: Pondremos la url de la página, siendo la url el identificador para agrupar los comentarios por página. Es decir, que los comentarios que se hagan en una página solo saldrán en esa.
- Anchura: Fijamos el ancho de la caja de comentarios en píxeles, Por defecto se adapta.
- Número de comentarios: Número de comentarios que aparecerán en el listado. Las contestaciones no cuentan.
- En la pestaña de ordenar comentarios elegimos el tipo de orden.
- Pulsamos obtener código y nos saldrá la siguiente ventana.
No hay opción de código html5, solo de Java Script. Cogemos el código de la primera caja y lo colocamos lo más próximo que podamos a la apertura del tag <body>, y el código de la segunda caja lo colocamos donde queramos que aparezca la caja de comentarios de facebook.

Configuración de Facebook Comments

Una vez obtenido el código podemos configurar un poco más nuestro sistema de comentarios, ordenarlos por diferentes facetas, poner moderadores o incluso sacar el número de comentarios de la página.

Obtener ID de usuario de Facebook:
https://graph.facebook.com/?ids=anerbarrenaweb
Sustituímos «anerbarrenaweb» por el usuario de Facebook que queramos que sea moderador. Tu usuario lo verás en la url de tu perfil de Facebook cuando te conectas. Necesitaremos este ID en caso de que queramos añadir moderadores tal y como se explica en el punto 2.
Añadir moderadores:
Se pueden añadir varios moderadores al sistema de comentarios, solo hay que poner el id de usuario de facebook en el código de abajo y lo pegamos dentro de la etiqueta <head>. Si queremos varios moderadores repetiremos el código inferior por cada uno adicional.

XHTML

<meta property="fb:admins" content="{ID de USUARIO de FACEBOOK}"/>

1

<meta property="fb:admins" content="{ID de USUARIO de FACEBOOK}"/>
Obtener el número de comentarios:
Si queremos mostrar el número de comentarios de la página, se puede meter el código siguiente sustituyendo la url de HREF=miURL.com por la url de nuestra página.

XHTML

<span class="fb-comments-count" data-href="http://miURL.com/"></span> awesome comments

1
2

<span class="fb-comments-count" data-href="http://miURL.com/"></span>
awesome comments
App ID:
Si vamos a interactuar mucho con las APIs de Facebook, será mejor que nos creemos un App ID en esta url: https://developers.facebook.com/apps. Pero el problema de crear una App ID es que para crearla tienes dejar tu móvil o tu tarjeta de crédito, algo incómodo la verdad…

Código de ejemplo de Facebook Comments para poner en tu web

Aquí os dejo un código de ejemplo para que os valga de base para vuestras páginas. Y también una demo de ejemplo de Facebook Comments para que comprobéis su funcionamiento.

<html>

<head>
<title>Facebook Comments</title>
<meta property="fb:admins" content="103274683141059"/>
</head>

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.7&appId=270775685307";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
	
<br><br>

<span class="fb-comments-count" data-href="https://www.anerbarrena.com/demos/2013/01-facebook-comments.php"></span>
comentarios 

<br><br>
CAJA COMENTARIOS
<br><br>
<div class="fb-comments" data-href="https://www.anerbarrena.com/demos/2013/01-facebook-comments.php" data-numposts="6"></div>

</body>
</html>

<html>

<head>

<title>Facebook Comments</title>

</head>

<body>

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.7&appId=270775685307";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

</script>

comentarios

CAJA COMENTARIOS

</body>

</html>

Ventajas

Evitamos en gran medida que troleen la web, ya que solo se puede comentar si tienemos cuenta en facebook, el que aparezca el nombre del autor en cada comentario hace que los comentarios sean menos atacantes.
Menos spam. Incluso si entraran comentarios spam siempre podemos bloquear una cuenta de facebook para que no haga comentarios en tu web. Tiene fácil moderación.
Ahorro de ancho de banda y BBDD. Los comentarios siempre se cargarán desde servidores externos, es decir los comentarios siempre se guardarán en Facebook Comments.
Fácil configuración del plugin, podemos ordenar los comentarios cronológicamente, por popularidad… También se puede dar permisos de moderador a otras cuentas de Facebook…
Posibilidad de hacer una blacklist con las palabras que no quieras que aparezcan en tu web.
Aumento de visitas, notoriedad en Facebook, por defecto al realizar un comentario, este también se comparte en la cuenta del usuario, y a no ser que lo desactive todos sus amigos lo verán y puede que alguno clicke y ganes una visita.
El diseño de los comentarios se adapta al dispositivo en el que se visualicen… pudiendo ser desde un PC o un móvil.

desventajas

Hacemos pasar por el aro a todo el mundo que quiera comentar, es decir, obligamos a tener una cuenta en facebook para poder comentar.
Poca interactuación con las APIs para poder hacer rankings de comentarios.