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.
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'
