Cómo añadir la comment box de Facebook en Blogger

Hoy mismo la he añadido al mío. No tengo muchos conocimientos de códigos, html y demás así que tuve que buscar en Google cómo hacerlo para evitar más experimentos de los necesarios. Y, la verdad, no había mucho en español donde se explicara bien y paso a paso. El principal problema que me encontré fue que los tutoriales son antiguos. En estos se decía que había que crear una aplicación en Facebook previamente para luego poder crear la comment box, pues bien, creo que eso está solucionado por medio de Facebook. Ahora no piden una ID para crearla solo hay que poner la url de nuestra web y listo. Sin más complicaciones. Pero no nos adelantemos, paso a paso. Antes que nada, guarden una copia de la plantilla, cosa que tendrían que hacer incluso aunque no trasteen nunca nada.


1_Primero vayamos a la página de plugins de Facebook.

 Aquí es sencillo lo que tenemos que hacer,  simplemente añadir la dirección de nuestra web, el número de comentarios que por defecto queremos sean visibles en la caja y el ancho que deseamos que tenga.

Una vez hecho esto clicamos en "get code".

Y copiamos el código que nos proporciona la ventana emergente.

2_ Vamos al escritorio de Blogger, pestaña de diseño y "edición de html"

Y ahí marcamos en la casilla de "Expandir plantillas de artilugios" y búscamos el código:

<div class='post-footer-line post-footer-line-3'/>

Para ello recomiendo usar el Ctrl+F para desplegar el cuadro de búsqueda del navegador y evitarnos dolores de cabeza. Después de esta línea de código es donde debemos pegar el código que copiamos de la página de Facebool, el de la comment box, si lo hacemos así la caja saldrá justo debajo del pie de la entrada. Considero que es el sitio más adecuado pero, como en todo, es cuestión de gustos. Con esto ya el cuadro quedaría funcionando pero todavía se puede mejorar un poco más. 

Por defecto el código que nos proporciona Facebook tiene este aspecto:


<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=122781876259&xfbml=1"></script><fb:comments href="TU_URL" num_posts="Nº_de_comentarios" width="ancho_en_px"></fb:comments>

Con este plugin es interesante poder moderar los comentarios, para eso Facebook permite la posibilidad de hacerlo añadiendo una línea de código más: 

<meta content='{tu FB ID}' property='fb:admins'/>

Para averiguar nuestro nº de ID en Facebook no tenemos más que ir a nuestro perfil y al poner el cursor sobre la foto que tengamos como avatar veremos que apunta a una dirección url dónde al final pondrá id= y una serie de números. Esa serie de números es el ID que necesitamos añadir al código.  Pues bien, clicamos sobre ella con el botón secundario y le damos a "guardar dirección del enlace" y la pegamos en el código de arriba donde les puse "tu FB ID" y borramos todo lo que sobra de la dirección dejando solo ese número.

Ahora este fragmento lo insertamos en el anterior dejándolo así:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=122781876259&xfbml=1"></script><fb:comments href="TU_URL" num_posts="Nº_de_comentarios" width="ancho_en_px"><meta content='{tu FB ID}' property='fb:admins'/>/fb:comments>

Con esto ya tenemos la posibilidad de moderar los comentarios en la caja. Y ya está bastante completa pero aún se puede mejorar más. Tal cual está la caja es visible tanto desde la página de post como desde la principal, desde mi punto de vista en la principal queda bastante antiestético así que es interesante dejarla visible sólo desde la de post. Eso lo arreglamos añadiendo otra línea de código extra. La que está en rojo tal cual lo indico:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=122781876259&xfbml=1"><b:if cond='data:blog.pageType == "item"'></script><fb:comments href="TU_URL" num_posts="Nº_de_comentarios" width="ancho_en_px"><meta content='{tu FB ID}' property='fb:admins'/></fb:comments></b:if>


 Y ahora sí, con esto la dejé tal cual la tengo. Antes que nada y de guardar la plantilla no olviden asegurarse de que todo está correcto mirando antes en vista previa. No me sean imprudentes :D

Nunca está de más decir que esta fue la única página en español que me fue útil.

Espero les sirva y recuerden que uno no es un experto en esto :P pero me funcionó eso sí :D