Insertar caja de comentarios de Facebook en Blogger

La caja de comentarios de Facebook en Blogger es muy pedida por varias personas, ya que mucha gente no se anima a comentar en los blogs porque necesitan llenar campos o algo por el estilo, pero ahora con esta caja de comentarios, los visitantes de tu blog podrán comentar tus entradas porque la mayor parte del tiempo están en su cuenta de Facebook.

Para añadir la caja, ve a Diseño > Edición de HTML > Expandir plantillas de artilugios y después de <data:post.body/> agrega lo siguiente:

<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1'/>
<div><br/><br/><fb:comments expr:href='data:post.url' num_posts='3' width='500'/></div>

Eso hará que después de cada entrada se pueda ver la caja de comentarios de Facebook, pero incluso en la portada se mostrará y tal vez no desees eso, de modo que en lugar de usar el código anterior, deberás usar este:

<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><fb:comments expr:href='data:post.url' num_posts='3' width='500'/></div></b:if>

Guarda los cambios y listo.

Efecto zoom con rotación en los avatares

Si quieres hacer más elegante los comentarios en tu blog, este efecto podría hacer que se vea más elegante, ya que con que pases el cursor sobre el avatar de un comentario, este efecto hace que se haga una rotación y una ampliación al avatar.


Aquí hay un ejemplo de cómo quedaría un comentario al agregar el efecto:


Como ves, es un gran efecto y sólo se logra mediante CSS sin agregar scripts ni nada por el estilo que pondrían más lento tu blog.
Para agregar el efecto, entra a Diseño > Edición de HTML y antes de ]]></b:skin> agrega lo siguiente:

.avatar-image-container:hover {z-index:999999;border: 4px solid white;-webkit-transform: rotate(-5deg) scale(1.4) skew(1deg) translate(0px);-moz-transform: rotate(-5deg) scale(1.4) skew(1deg) translate(0px);-o-transform: rotate(-5deg) scale(1.4) skew(1deg) translate(0px);-moz-transition: 0.8s;-webkit-transition: 0.8s;-o-transition: 0.8s;transition: 0.8s;}

Guarda los cambios y listo. También puedes cambiar lo siguiente (lo más importante se podría decir):

border: 4px - Es el anchor del borde que rodea el avatar.
white - Es el color del borde que rodea la imagen.

Mostrar los últimos comentarios y últimas entradas en la sidebar

Este "truco" se basa en usar la dirección sindicación de los comentarios y las entradas que todos los blogs de Blogger tienen, las cuales son las siguientes:

Comentarios: http://tu-blog.blogspot.com/feeds/comments/default 
Entradas: http://tu-blog.blogspot.com/feeds/posts/default


Donde dice tu-blog.blogspot.com tienes que cambiarlo por la dirección de tu blog.


Ahora sólo hay que ir a Diseño > Añadir un gadget > Feed

Cuando selecciones el gadget, tendrás que poner el url de comentarios o entradas, según lo que quieras y podrás modificar el título, número de entradas o comentarios, si se muestran o no la fecha en que se comentó o publicó, el autor que publicó la entrada o comentó y si se abren en una nueva ventana o no. También podrás ver en la parte de "Vista previa" como quedará.

Si agregas los dos, se verá así:

Volver al sistema de comentarios previo a las reply

En esta entrada veremos cómo volver al sistema de comentarios previo a las reply (sistema de respuestas en comentarios) ya que hay una que otra cosa que explicaremos más adelante que se necesitará tener el antiguo sistema de comentarios.


Bueno, para desactivar los comentarios con respuestas, tienes que hacer lo siguiente:


Entra a Diseño > Edición de HTML y expande los artilugios.


Después busca threaded_comments y en todos los lugares donde salga eso, sustituye esa parte por comments, por ejemplo:

Y así tendría que quedar cuando termines:

Al guardar los cambios, podrás ver en cualquier entrada que ya no está la opción responder.