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=" https://raw.githack.com/jmacuna/comments-avatar/master/recent_comments.html"></script> <script type="text/javascript" src="[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://www.tecnoblog.guru).
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://cdn.jsdelivr.net/gh/jmacuna/comments-avatar@master/w2b_recent_comments_with_avatars.js"></script>
<script src="[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="https://cdn.jsdelivr.net/gh/jmacuna/comments-avatar@master/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>
Puedes visualizar y descargar el ejemplo para integrarlo en tu blog en la siguiente dirección:
Comentarios recientes con efecto ‘marquee’