Cómo integrar Facebook Comments

Cómo integrar Facebook Comments

Para integrar los comentarios de Facebook en nuestra Web o blog, lo primero que debemos hacer es ir a la página de Facebook Developers.

neo 2.0 - Cómo integrar Facebook Comments - 1

Introduce la URL de la página donde deseas integrar los comentarios de Facebook, el número de comentarios a mostrar, el ancho de la caja y el color.

neo 2.0 - Cómo integrar Facebook Comments - 2

Ahora haz clic en 'Get Code'.

neo 2.0 - Cómo integrar Facebook Comments - 3

Copia y pega el código siguiendo las indicaciones:

  • Introduce el código del cuadro (1.) justo después de la etiqueta <body>.
  • Añade el código del punto (2.) antes de la etiqueta <head>.
  • Por último, añade el código del punto (3.) donde quieras mostrar el cuadro de comentarios de Facebook en tu página.

Pero seguramente quieras añadir este plugin en todas tus páginas, por lo que deberás identificar dinámicamente sus URLs para mostrar sus respectivos comentarios; de lo contrario se mostrarán en todas las páginas los comentarios de la URL indicada al generar el código.

A través del siguiente código PHP podrás realizarlo, copia y pega el código al inicio de tu documento PHP:

<?php function PageURL() { $pageURL = 'http'; if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";} $pageURL .= "://"; if ($_SERVER["SERVER_PORT"] != "80") { $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"]; } else { $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; } return $pageURL; } ?>

Reemplaza en el código del punto (3.) data-href="http://example.com" por href="<?php echo PageURL();?>". De esta forma, cada página tendrá sus propios comentarios.

En la próxima entrada veremos la forma de moderar dichos comentarios a través de la creación de una Aplicación.

Publicar un comentario

12 Comentarios

  1. Hola: he seguido este metodo pero las url dinamicas las hago tomando los datos de mi base mysql como en toda la web y en cuanto lo subo al servidor, el robot de facebook no deja de entrar y me consume el ancho de banda. ¿será por generar yo las miles de url?
    Y no me sale la configuración de adminsitrador a pesar de que subo el meta

    ResponderEliminar
    Respuestas
    1. Hola Mr. Euribor; ¿has probado a obtener las URls como te indicaba en el ejemplo? Si estás trabajando con un gestor de contenidos tipo WordPress, deberás añadir el código PHP en tu template.

      Para moderar los comentarios, no deberías de tener ningún problema siguiendo los pasos de este post: http://goo.gl/1FIe4w o siguiendo la explicación de Facebook: http://goo.gl/EbwPrW

      Si quieres, puedes enviarme el link de tu página para que la revise.

      Muchas gracias. Un saludo.

      Eliminar
  2. si ponemos en la balanza el beneficio de mostrar cuantos comentarios tiene una noticia /post vs el ancho de banda consumido a nuestro servidor en el caso de php, o la velocidad de carga para el cliente si lo hacemos colocando las etiquetas html de facebook, me parece que no encontramos muchos beneficios en ello.

    ResponderEliminar
    Respuestas
    1. Hola Sebastián; como bien indicas podría afectar a la velocidad de carga de una página, como cualquier otro elemento: un vídeo de YouTube o un iframe de Google Maps.

      Sin embargo, en todos los proyectos donde he integrado esta funcionalidad he podido comprobar que no ha aumentado el tiempo de carga de forma notable.

      Imagino que también afectará el número de comentarios que configures para mostrar de una vez, es decir no es lo mismo tener que mostrar los 5 últimos comentarios a mostrarlos todos de una vez.

      Gracias por compartir tu opinión. Un saludo.

      Eliminar
  3. Y en html como seria? ya que no trabajo con php, para poner coments en distintas paginas, gracias!! Andrés

    ResponderEliminar
    Respuestas
    1. Me temo que si quieres implementarlo en una página cuyos documentos son todos .html tendrás que añadir la URL en cada una de las páginas; es decir en el punto (3) donde comentaba que había que modificar: data-href="http://example.com" en tu caso no tendrías que modificarlo.

      Espero haberme explicado correctamente.

      Un saludo.

      Eliminar
  4. Exacto Juan Ignacio, uso todos documentos html, soy un anticuario que usa DW CC, osea que debería escribir a mano (ej http://misitio.com/noticias/hola.html) en el punto 3 cada vez que cree un nuevo documento el nombre de la pagina?? Uffff

    ResponderEliminar
    Respuestas
    1. Me temo que sí, yo también uso DW ;)

      De todas formas intentaré indagar alguna solución que se adapte a lo que necesitas y te cuento.

      ¿Cuántas secciones tiene la Web donde quieres implementarlo? ¿Está ya publicada o aún estás trabajando en ella?

      Saludos.

      Eliminar
    2. Finalmente, tirando de Google he encontrado la siguiente solución; en el punto (3) escribe reemplazando [ ] por < > para que funcione; ya que los comentarios no admite determinado código:

      [div id="fbcomments"][/div]
      [script]
      var elemDiv = document.getElementById("fbcomments");
      var markup = '';
      markup += '[fb:comments href="' + location.href + '"][/fb:comments]';
      elemDiv.innerHTML = markup;
      FB.XFBML.parse(elemDiv);
      [/script]

      Eliminar
  5. Muchas Gracias Juan Ignacio, funciona perfecto!! Saludos, Andrés.

    ResponderEliminar
  6. Hola buenos días. Se que ha pasado mucho tiempo de este tema, pero al implementarlo el log me arroja un error y es el siguiente: Undefined index: HTTPS in ...(la url de mi web)... on line 1 donde la linea 1 contiene toda esta parte:
    Seguramente es algo sencillo, pero no logro hacer que no me arroje ese error. Agradecería tu comentario. Un cordial saludo!

    ResponderEliminar
    Respuestas
    1. Hola Alberto, reemplaza este código:

      < ?php function PageURL() { $pageURL = 'http'; if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";} $pageURL .= "://"; if ($_SERVER["SERVER_PORT"] != "80") { $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"]; } else { $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; } return $pageURL; } ? >

      Por este otro:

      < ?php
      $URL = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
      ? >

      Y en el último paso del post, dónde decía "Reemplaza en el código del punto (3.) data-href="http://example.com" por href="< ?php echo PageURL();? >" ahora quedará como data-href="< ?php echo $URL ? >".

      Fíjate, que he tenido que dar un espacio entre las etiquetas de apertura y cierre de php en el comentario, de otro modo no se mostraría el código. Debes eliminar esos espacios ;)

      Prueba y me cuentas si así te funciona.

      Eliminar