Agregar el Comment Box de Facebook a Blogger

Así como es fácil colocar el botón de Me Gusta de Facebook en cualquier sitio web, agregar alguno de los otros plugins requiere un poco más de trabajo.

Enrique Nava preguntaba específicamente por uno llamado Comments Box que permite a los visitantes, comentar de manera directa desde nuestro blog.

El problema fundamental para incluir esto es que debemos crear una aplicación; debemos entrar en la página de Desarrolladores de Facebook y crearla,dándole un nombre cualquiera

Hecho eso, la siguiente ventana puede resultar apabullante pero lo fundamental es copiar los dato que nos dan en la pestaña Básico

Id. de aplicación xxxxxxxxxx
Clave API xxxxxxxxxxxxxxxxxxxx
Secreto xxxxxxxxxxxxxxxxxxxx

Luego, haremos click en la pestaña Connect y allí, en el campo Conecte la pagina web, colocaremos la URL de nuestro sitio

Y eso es todo, en principio, no necesitaríamos hacer otra cosa que guardar y listo.

Para agregar el plugin en Blogger, lo mejor es ir a la página de Comments Box donde podemos probar si funcionará. Allí, debemos pegar en el campo Unique ID, la ID de la aplicación que hayamos creado y, si todo es correcto, inmediatamente veremos la previsualización a la derecha.

Number of Comments permite configurar la cantidad de comentarios a mostrar (por defecto 10) o podemos poner cero si no queremos que se muestren y que el plugin sólo permita agregarlos.
Width es el ancho en pixeles (550 por defecto) y es bastante flexible ya que parece admitir cualquier valor.


Decidido esto, hacemos click en Get Code que nos dira algo así:
<fb:comments xid="000000000000000" width="valor"></fb:comments>
¿Qué hacemos con eso? Vamos a la plantilla de Blogger e inmediatamente luego de <body>, agregaremos la llamada al Graph API de Facebook que es la forma más simple de incluir cualquiera de los plugins. Es un script muy simple:
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>
Eso, nos permitirá agregar los distintos códigos de Facebook directamente en nuestro blog así que, por último colocaremos el código que nos dieron ahí donde se nos ocurra mostrar la caja de comentarios; por ejemplo, en un elemento HTML de la sidebar:
<fb:comments numposts='10' width='550' xid='000000000000'/>
O en el footer de las entradas y, en ese caso, sugeriría condicionarlo para que solo se vea en las páginas individuales:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fb:comments numposts='10' width='550' xid='000000000000'/>
</b:if>

0 comentarios:

Publicar un comentario