Agregar comentarios de facebook en blogger

Les recomiendo la caja de comentarios de DISQUS

Es recomendable que si se van a usar los comentarios desde facebook, se oculten los de blogger desde la configuración y se use solo un método para publicar comentarios.

Lo primero que se debe hacer para poner la caja de comentarios en una entrada a través de facebook es conseguir su código, para ello, deben ir a esta página  Aplicaciones para Facebook Recuerden que todo el procedimiento se debe hacer con una cuenta de usuario (El usuario de la cta de sus páginas de facebook).

Crear el código es muy sencillo, introducen la URL de su página, luego el número de comentarios que quieren que sean visibles, el ancho de la caja de los comentarios, y el color (claro u oscuro), luego hacen clic sobre el botón "Get Code" (Obtener el código) y listo.

Ahora, el que nos interesa es el primero, uno largo, ya que el segundo debemos cambiarlo, porque si lo dejamos como viene nos saldrá un mismo comentario en todas las entradas, y además se agregarán comentarios de otras páginas que se hayan realizado en la fecha en la que se publicó el tema.

El primer código debemos colocarlo debajo de la etiqueta:
------------------------------
  <body>

o

 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
------------------------------

La ruta sería: Plantilla / Editar HTML / Plantilla de formato


Es probable que se presente el siguiente error al momento de agregar el código:

Error al analizar XML, línea 588, columna 62: The reference to entity "appId" must end with the ';' delimiter.

La solución sería seguir con los demás pasos sin llevar a cabo el de el primer código; entonces, colocan el 2º código que está a continuación para publicar la caja de comentarios, agregan el código que está más adelante que lleva los ID de la aplicación creada y de la cuenta de usuario, y luego seguir la solución que está al final de este tema donde reemplazamos el primer código con uno que corrige el error.

Ahora como les comenté anteriormente, vamos a cambiar el segundo código, usen este: [más adelante está con el código ya centrado con un condicional para que la caja de comentarios se muestre solo en las entradas si lo prefieren así].

<div id='comentariosFacebook'>
<div class='fb-comments' data-colorscheme='dark' data-num-posts='5' data-width='500' expr:href='data:post.url'/>
</div>

En amarillo está el color, pueden dejar dark para oscuro o light para claro, en verde está el número de comentarios, y en rojo está el ancho de la caja de comentarios.

Pero debemos agregar un código más para que los comentarios se vean solo en las entradas o temas específicos, ya que si lo dejamos así como está, el código aumentaría el tiempo de carga de la página principal en 1 o 2 segundos. El código final quedaría así:
------------------------------
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='comentariosFacebook'>
<div class='fb-comments' data-colorscheme='dark' data-num-posts='5' data-width='500' expr:href='data:post.url'/>
</div>
</b:if>
------------------------------
Si quieren que la caja de comentarios quede centrada, agreguen al inicio del código anterior <center> y al final </center> quedaría así:

------------------------------
<center>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='comentariosFacebook'>
<div class='fb-comments' data-colorscheme='dark' data-num-posts='5' data-width='500' expr:href='data:post.url'/>
</div>
</b:if>
</center>
------------------------------

Este código debemos colocarlo debajo del código donde se encuentra ubicada la siguiente parte, les muestro varias formas como puede salir su inicio o primera línea, con las imágenes de más adelante se guiarán mejor:
------------------------------
<div class='post-share-buttons'>


<div class='post-share-buttons goog-inline-block'>


<div class='post-share-buttons goog-inline-block' style='padding:0 0 0 1px;margin:0;'>
------------------------------

La ruta sería: Plantilla / Editar HTML / Plantilla de formato

Video tutorial Nuevo diseño Plantilla de Blogger

Pueden colocar en el buscador (Control + F): post-share-buttons
y verán opciones del lugar donde podría estar este código, la mayoría de veces sale en la parte del "quick edit pencil" pero también puede salir en otra, como: <div class='post-footer'> eso depende de la plantilla. Con las imágenes lo entenderán mejor ;)




Si notan que la caja de comentarios queda muy pegada a alguna otra parte ya sea arriba o abajo, para generar un espacio en la plantilla agreguen lo siguiente <br/> ya sea arriba o abajo del código anterior, y las veces que lo consideren necesario.

Ahora, si deseas configurar y moderar la caja de comentarios de facebook tendrás que crear una aplicación, esto hay que hacerlo con la cta de usuario. Ve a esta página: Facebook Developers

Una vez allí, haz clic sobre "Crear nueva aplicación"


Dale un nombre


Escribe las palabras de seguridad


Copia el ID de la aplicación


Y escribe la dirección URL de tu página o blog


Listo, ahora tenemos que vincular está aplicación con la plantilla del Blog, para ello vamos a colocar el siguiente código sobre la etiqueta </head>

La ruta sería: Plantilla / Editar HTML / Plantilla de formato
------------------------------

<meta content='ID DE USUARIO FACEBOOK' property='fb:admins'/>
<meta content='ID DE APLICACIÓN FACEBOOK' property='fb:app_id'/>

------------------------------
El ID de la aplicación ya lo tenemos, para conseguir tu ID de usuario, visita esta URL (reemplaza usuario por el nombre de usuario que usas en tu cuenta)

 http://graph.facebook.com/usuario


Listo, ahora luego de que se realice el primer comentario podrás ver la parte desde donde se configura la caja de comentarios de facebook. En tu cuenta de usuario la aplicación mostrará los comentarios que se realicen en la página, y si haces clic sobre: "Vista del Moderador" verás: "Visit Website" para que puedas ir a la entrada o tema desde donde se hizo el comentario.


Solución a posibles problemas:

1º Si has estado probando los códigos en un blog de prueba enlazando a tu página principal, cuando vayas a usar el código en esa página tendrás que eliminar totalmente el otro código de la página de pruebas para que se sincronice bien la página con tu cta de usuario.

2º No hay ningún problema si eliminas la aplicación y la vuelves a crear siempre y cuando no se te olvide colocar en el código esa nueva ID de la aplicación.

3º Si te sale esto: Error al analizar XML, línea 588, columna 62: The reference to entity "appId" must end with the ';' delimiter. cuando agregas el primer código para la caja de comentarios, y por ende no quedará sincronizada la cta con la aplicación para recibir los avisos cada vez que publiquen un comentario, por favor visita la siguiente página y sigue sus intrucciones Facebook Developers JavaScript De todas maneras agrego aquí el código y su explicación :)

Lo que deben hacer es reemplazar el primer código, el que se coloca debajo de:
------------------------------
  <body>

o

 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
------------------------------
Por este otro y reemplazar lo que está en color rojo, aquí ya agregué el idioma español, pero si lo haces desde la página debes cambiar en_US por es_ES:
------------------------------

<div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '{id de tu aplicación}',
          status     : true,
          xfbml      : true
        });
      };

      (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/all.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    </script>

------------------------------

Cuando guardes notarás que ya no se presenta el error, ya que si te fijas, el ID de la aplicación es el mismo que debe estar en el código que colocaste sobre la etiqueta </head> de tal forma que tendrás la certeza de que la aplicación se sincronizará bien con la página.

------------------------------

<meta content='ID DE USUARIO FACEBOOK' property='fb:admins'/>
<meta content='ID DE APLICACIÓN FACEBOOK' property='fb:app_id'/>
------------------------------

Ahora solo debes ingresar a la parte de Configuración de la caja de comentarios (luego de que se hayan hecho unos dos comentarios ya deberías visualizarla) y en MODERADORES, agrega tu cuenta de usuario de Facebook para que te llegue un aviso cada vez que alguien comente en tu página y puedas moderar la aplicación desde tu cuenta.

Eso sería todo, espero que esta información les sea muy útil.

Gracias.

Solución para Error al analizar XML, línea 588, columna 62: The reference to entity "appId" must end with the ';' delimiter. Cómo colocar los comentarios de facebook en blogger, cómo coloco los comentarios de facebook en mi blog, cómo colocar la caja de comentarios de facebook en mi página, cómo colocar la caja de comentarios de facebook en blogger, cómo hacer que la caja de comentarios solo salga en las entradas, como sincronizo la aplicación de la caja de comentarios con mi cuenta de usuario de facebook, por qué no puedo configurar la caja de comentarios de facebook, error para moderar la caja de comentarios de facebook,