Todos conocemos la importancia de un blog como herramienta de marketing online para cualquier actividad empresarial o negocio. Se trata de un instrumento muy competitivo y diferencial que actúa como canal de comunicación entre las empresas que ofrecen sus productos o servicios y los usuarios.
Un blog corporativo posibilita la interacción con nuestros clientes actuales y potenciales a través de comentarios, teniendo como finalidad aumentar la reputación de nuestra marca lo que se traducirá en la consecución de nuestros objetivos.
En cada acción que realizas o en cada comentario que alguien hace sobre ti, se está construyendo tú marca comercial o personal.
Para mostrar los comentarios recientes en nuestro blog, pagina o sitio web, podemos utilizar las herramientas que nos ofrecen los distintos gestores de contenido.
Ese plus de visibilidad nos los proporcionan los widgets o gadgets que permiten incrustar y presentar información relevante para el usuario final.
Blogger pone a nuestra disposición un gadget de muy fácil implementación y de máximo interés: un tablero con los últimos comentarios publicados en tu sitio web o blog..
Éstos son los pasos a seguir:
- Selecciona la entrada Diseño del panel principal de Blogger.
- Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
- Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:
HTML/Javascript
Añade una característica de un tercero u otro código a tu blog.
- Introduce el Título del widget (por ejemplo Últimos comentarios)
- En la caja Contenido pega el siguiente código:
<script type="text/javascript"> // Recent Comments Settings var numComments = 10, showAvatar = true, avatarSize = 40, roundAvatar = true, characters = 40, showMorelink = false, moreLinktext = "More »", defaultAvatar = "http://i.imgur.com/3QqaBeS.png", hideCredits = true; </script> <script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script><script type="text/javascript" src="http://jmacuna73.blogspot.com/feeds/posts/[URL DE TU BLOG]/feeds/comments/default?alt=json&callback=w2b_recent_comments"></script> - Por último hacemos click sobre el botón Guardar
Vamos a analizar cada uno de los parámetros:
- numComments: número de comentarios a mostrar.
- showAvatar: 'true' si queremos mostrar el avatar (identidad virtual) del autor del comentario.
- avatarSize: tamaño en píxeles de la imagen del avatar.
- roundAvatar: 'true' para mostrar el avatar en forma redondeada.
- characters: especifica el número de caracteres del comentario.
- showMorelink: 'true' para que aparezca el link que nos lleva a la lectura de ese comentario.
- moreLinktext: texto del enlace para acceder al comentario.
- defaultAvatar: imagen por defecto para aquellos avatares que no disponen de imagen identificativa.
- hideCredits: 'true'si queremos ocultar la url de la pagina del creador.
Como indicación final, sustituimos el texto [URL DE TU BLOG] por la dirección de nuestro blog (en mi caso: http://jmacuna73.blogspot.com).
Podéis ver el ejemplo funcionando en la columna derecha del blog, bajo la sección Suscribirse por Email (visible en la versión de escritorio).
Ahora vamos a dotar de mayor dinamismo al tablero con el efecto marquee (efecto de movimiento de los textos o comentarios).
Para ello, añadimos dos nuevas librerías javascript y la función jQuery para la ejecución del script.
El código resultante es el siguiente:
<table class="comments"><tr><td class="title">Últimos comentarios</td></tr><tr><td><div class="scroller"><script type="text/javascript">var numComments = 10, showAvatar = true, avatarSize = 40, roundAvatar = true, characters = 40, showMorelink = false, moreLinktext = "More »", defaultAvatar = "http://i.imgur.com/3QqaBeS.png", hideCredits = true; </script><script src="https://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script><script src="http://jmacuna73.blogspot.com/feeds/posts/[URL DE TU BLOG]/feeds/comments/default?alt=json&callback=w2b_recent_comments"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Infinite-Any-Content-Scroller-scrollForever/scrollForever.js"></script></div></td></tr></table><script type="text/javascript">$(document).ready(function({$(".scroller").scrollForever({dir:"top",container:"ul",inner:"li",speed:1000,delayTime:10,continuous:true,num:1});});</script>