Tutorial Blogger – Mejorar sistema de comentarios con Disqus

Tweet

La verdad el sistema por default de Blogger de comentarios me parece muy poco práctico y visualmente, para ponerlo en palabras más elegantes: chafísima.

Para eso llegó Disqus, un sistema donde puedes centralizar los comentarios de tus sitios en una sola cuenta, configurarlos y administrarlos todo desde un solo lugar! Los que comentan pueden hacerlo con su perfil de Facebook, Twitter, OpenID, etc. y además tiene todo lo que esperas de un sistema de comentarios hoy en día: Likes, Replies, control de Spam, etc.

Vamos entonces a hacerle un upgrade a los comments que tanto nos gustan a los que hacemos posts! Este tutorial está dedicado a Blogger, pero Disqus se puede poner prácticamente en cualquier plataforma de blog: Wordpress, Tumblr, etc.

1. Registrarnos en Disqus

Este paso es sencillo simplemente vamos a Disqus.com y nos hacemos una cuenta.

2. Agregamos un sitio

Simplemente presionamos el botón +Add y registramos un sitio nuevo

 

3. Configuramos nuestro sitio

Aquí puedes elegir las opciones que sean más convenientes para ti, por ejemplo si quieres que se permitan comentarios anónimos, que puedan hacer login con Facebook o Twitter,

4. Elegimos nuestra plataforma

En este caso será Blogger

5. Instalamos el sistema

En esta parte debemos asegurarnos de algunas cosas:

• Tener los comentarios activados (duh! :P)
• Tener activado el “diseñador de plantillas” (casi todos los blogs ya lo tienen activado por default)

Ahora solo hacemos click en el botón de “Add site X to Blogger”

6. Traemos los comentarios anteriores de regreso

¿Qué creíste, que se te iban a borrar todos los comentarios que ya tenías? Disqus puede importar todos los comentarios que ya habían hecho en tu blog al nuevo sistema, ¡super útil!

Solo debes ir a tu cuenta en Disqus, en la parte de Admin, ve a la pestaña de Tools y después a la sección de Import/Export elegimos Blogger.

Existe una opción muy interesante que es la de Mantener sincronizados los comentarios originales de Blogger y los de Disqus (por si un día quitas el sistema, no perderás lo que se hicieron a través de Disqus, de nuevo, ¡muy útil!). NOTA: debes tener activada la opción de que cualquiera puede comentar desde Blogger o los comentarios de Disqus aparecerán como hechos por el dueño del blog.

Solamente concedemos el acceso cuando nos lo pida¡ y listo!  Ya tenemos un sistema de comentarios de primera. Espero que hayan podido seguir el tutorial, no es algo muy complicado pero quise documentar el proceso de poner el sistema aquí para demostrar lo sencillo que es.

¡Prueba el sistema y comenta! :P Ya no hay excusas para no comentar ;)

Tweet

Tutorial Blogger: Botón oficial de Twitter en los posts de mi blog (Blogspot)

Tweet

Es re-bonito el botón de Twitter, qué no? Blogger ya trae su propio botoncito para compartir por Twitter, pero la ventaja de este es que puedes saber cuántas personas le picaron al botón, y en general se ve más pro. Vamos a aprender a usarlo para un blog de blogger, es muy sencillo y no tienes que saber mucho, solo seguir estas instrucciones:

• En el panel de administración de tu blog, ve a Diseño / Edición de HTML

• Activa la opción "Expandir plantillas de artilugios” (sí suena horrible “artilugios” como traducción de “widgets”, pero yo no traduje esta cosa xD)

• Busca (CTRL+F) este texto:

</head>

• Exactamente antes de eso, pega este código:

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

• Ahora busca (CTRL+F) este texto:

<data:post.body/>

• Ya que tengas ubicado eso debes tomar una decisión: ¿Quieres poner el botón arriba del post o abajo?
• Si lo quieres en la parte de arriba, pega este código justo antes del rollo de <data:post.body/> que acabamos de encontrar. Si lo quieres abajo, pégalo después:

<!-- boton twitter --> <div><a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' expr:data-counturl='data:post.url' href='http://twitter.com/share'>Tweet</a></div>

• Hemos terminado :D

 

Si todo salió bien, dale Guardar Plantilla y tendrás un bonito botón de “Tweet” (como el que ves en este post).

Hay varias cosas que puedes cambiar y opciones para aprovechar, por ejemplo si quieres que sea una caja con números grandes cámbiale el atributo de data-count a vertical:

Si quieres configurar tu botón con más detalle, te recomiendo leer la documentación del mismo acá: Twitter Button, realmente es muy sencillo integrarlo a tu blog sobretodo si ya cuentas con nociones de HTML y CSS.

Prueba dándole Tweet a este post, para que veas que sí funciona y no te dije mentiras! xD

Espero que te haya sido de utilidad. Si no me da flojera pronto haré el mismo tutorial para el “Like” de Facebook (es un poco más de rollo pero no es para nada complicado).

Tweet