Instalando los comentarios de Facebook en Blogger (version Escritorio y Móvil)

En estos pase largo rato tratando de instalar la caja de comentarios de facebook en un blog alojado en blogger. Si bien hay unos cuantos tutoriales en la web, no consegui ninguno que hablase de como hacerlo una vez que se ha activado la opción de comentarios de Google+ y mucho menos como hacerlos visibles cuando el blog es visitado desde un dispositivo móvil.

Las especificaciones y el código lo pueden generar directamente en facebook. Por lo que me enfocaré a indicarles donde deben colocarlo. Luego pasar un buen rato revisando la pagina con Firebug (o las herramientas de desarrollo de Chrome), descubrí que los comentarios de Google+ se cargarn en un iframe con una clase cmtfpIframe

Por lo que basta ubicar dentro del template (asumiendo que estas utilizando una plantilla standard) y colocar el codigo dentro del tag: <b:if cond='data:post.allowIframeComments'>

Noten que toca cambiar el 'data-href' original del código generado en facebook por expr:data-href='data:post.canonicalUrl' con la finalidad de incluir la url de especifica de cada post.

Con esto ya deberían poder ver los comentarios de facebook en sus blog.

Y en el Movil?

Fue aquí donde pase mas tiempo, investigando con Firebug la plantilla movil (la cual pueden ver agregando el sufijo ?m=1 a cualquier blog alojado en blogger, ejemplo: http://soymaracaibero.blogspot.ca/?m=1), sin lograr entender porque no lograba que los comentarios aparecieran.

Fue luego de leer este post de la ayuda en Google que tuve mi momento D'OH y caí en cuenta que estaba usando una plantilla móvil predeterminada cuando debía estar usando una personalizada

Una vez hecho este cambio, fue posible ver los comentarios desde el celular. Un detalle que faltaba era el tema del ancho. Hasta poco antes de publicar este post, facebook forzaba tener un ancho fijo, algo no muy conveniente cuando no se tienen idea del tamaño (o la orientación) de la pantalla en la cual el usuario estará ingresando en tu blog . Según lo que puede ahora leer en la página de desarrollo, ahora la versión móvil de los comentarios ignora el parámetro width adoptanto un ancho fluido limitado por el elemento contenedor.

En lo personal no entiendo porque ese comportamiento no se aplica igual para la versión de escritorio (allí aun debes especificar un ancho fijo). Sin embargo, aun es posible obtener un ancho fluido en la versión de escritorio agregando la siguientes lineas de CSS justo antes del tag </head>

<style>
.fb-comments, .fb-comments * {
    width:100% !important;
}
    </style>

Confieso, que también pase unos minutos tratando de solucionar esto por mi cuenta, pero termine acudiendo al oráculo de Stack Overflow (no queria pasar por otro momento D'OH ) y si bien la primera solución no me funcionó, leyendo entre otras respuestas conseguí lo que buscaba.

Links Complementarios: 

• Listado Completo de Tags de Blogger