martes, 6 de diciembre de 2011

Agregar la caja de comentarios de Facebook en Blogger

Uno de los temas más solicitados es cómo poner la caja de comentarios de Facebook en el blog, y es que a veces se vuelve más fácil comentar desde Facebook pues la mayoría está conectado a esa red social todo el tiempo, además no necesitamos ingresar con nuestros datos de Google para poder comentar en un blog que contenga este tipo de comentarios.

Este método lo vi en Vagabundia, donde explican cómo agregar el Plugin de comentarios de Facebook de manera que cada entrada tenga su propia caja de comentarios y sea independiente a las demás.

Antes de empezar asegúrate de tener los comentarios debajo de las entradas, pues el plugin lo pondremos en esa área así que es necesario tener los comentarios incrustados debajo de los posts.

Ahora sí, como primer paso entra en la Edición HTML del blog y marca la casilla Expandir plantillas de artilugios, luego busca la etiqueta:
<body>
Si usas una plantilla del Diseñador entonces la encontrarás como:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Debajo de cualquiera de ellas agrega esto:
<div id='fb-root'/>
<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 = &quot;//connect.facebook.net/es_LA/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
Después busca esta parte:
</b:includable>
<b:includable id='status-message'>
Y justo arriba de ella pega esto:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>
</b:if>

Con eso ya tendrás la caja de comentarios de Facebook en tus entradas (recuerda que debes ingresar a un post para poder verla).
La caja estará arriba de los comentarios de Blogger. Si quieres que esté debajo del formulario de comentarios entonces el código del plugin ponlo justo arriba de este código:
</div>
<b:if cond='data:post.includeAd'>

Dentro del código que añadimos veremos estos parámetros:
data-num-posts='5'
data-width='500'
data-colorscheme='light'
El primero es el número de comentarios que se mostrarán; el segundo el ancho del formulario; y el tercero el color del formulario, puedes cambiar light por dark

Hasta ahí ya tenemos el CommentBox de Facebook; si deseas personalizarlo un poco puedes colocar antes de ]]></b:skin> algunos estilos, por ejemplo:
#comentariosFacebook {
background:#F2F2F2; /* Color de fondo del contenedor */
width:520px; /* Ancho del contenedor */
padding:10px;
margin-top:0px; /* Cámbialo por -180px si lo has puesto debajo de los comentarios de Blogger */
}

Si quieres que cada vez que alguien haga un comentario te llegue una notificación de Facebook, y puedas moderar los comentarios, será necesario que crees una aplicación. Pero para ello es necesario tener verificada la cuenta de Facebook.

Si es así, entra a Facebook Developers y haz click en el botón Crear nueva aplicación.


Ahí escribe el nombre de la aplicación, acepta los términos y click en Continuar.


En la siguiente pantalla haz click en Sitio web, ahí escribe la URL de tu blog donde lo pondrás; también copia el número que está en App ID.


Ahora entra de nuevo en la Edición HTML de tu blog y pega antes de </head> esto:
<meta content='ID de USUARIO' property='fb:admins'/>
<meta content='ID de APLICACIÓN' property='fb:app_id'/>
En la ID de aplicación agrega la serie de números que copiaste. Y en ID de usuario agrega tu ID de Facebook, sino lo conoces ingresa a este enlace:
http://graph.facebook.com/usuario
Cambia donde se indica tu nombre de usuario y da click, ahí verás cuál es la ID de tu usuario de Facebook (Gracias a Siniestro por el tip).

Una vez hecho eso ingresa a una entrada para ver tu caja de comentarios y dale click en Configuración. Ahí verás varias opciones del plugin; en donde dice Moderadores, agrega tu nombre y guarda los cambios.


Una vez habiendo hecho todo lo anterior podrás moderar los comentarios y recibirás las notificaciones en tu cuenta de Facebook cada vez que alguien haga un comentario. Sino lo haces podrás seguir teniendo tu caja de comentarios de Facebook pero sin estas opciones.

Al final de la entrada he puesto una para que puedas probar el resultado, pero cualquier duda sobre el tema déjala en los comentarios de Blogger ;)

No hay comentarios:

Publicar un comentario