Como hacer que los comentarios recientes de disqus funcionen en blogger sin problema.

Disqus es un completo sistema de comentarios que se puede implementar fácilmente en un sitio web. También cuenta con un contador de comentarios excelente para conocer cuantos comentarios hay en cada articulo desde la portada del sitio web. 

Esta funcional plataforma de comentarios permite recolectar opiniones en cualquier sitio web usando simplemente una red social activa.

comentarios-recientes-disqus-en-blogger

Al implementar este muy conocido sistema de comentarios en un sitio web todo funciona a la perfección, el problema radica cuando se quiere ver el total de comentarios realizados con la plataforma de disqus en el sitio web.

Los comentarios recientes de disqus en sitios creados con Joomla, Drupal o Wordpress se los pueden visualizar sin ningún problema, ya que estos cms cuentan con el plugin disqus que los integra al sitio fácilmente. Como es el caso del disqus wordpress comments plugin para quienes se manejan en blog hechos con wordpress.

Pero qué pasa con los comentarios recientes disqus en sitio web trabajado con html o desarrollado con la tecnología blogger, que no disponen de un plugin específico para mostrarlos.

En estos casos emplearemos un fragmento de código, que permite mostrar los comentarios realizados recientemente con disqus, en un sitio especifico del sitio web o blogger.

Cómo instalar los comentarios recientes de Disqus en cualquier web


Para lograr ver los comentarios hechos recientemente con disqus en un sitio especifico de nuestro sitio web, simplemente colocamos dos códigos y listo.

Instalando el CSS de los comentarios recientes disqus


Primero localizamos el archivo style.css o en el archivo donde se dan estilo al sitio web y dentro del insertamos el siguiente fragmento del código que dará estilo al contenedor de los comentarios recientes hechos con disqus.


#RecentComments{display:block;width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;}
#RecentComments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto;}
#RecentComments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444}
#RecentComments p.dsq-widget-meta a:hover{color:#ff675c}
#RecentComments li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:600}
#RecentComments li.dsq-widget-item:last-child{border-bottom:none}
#RecentComments a.dsq-widget-user {display:table;color:#736fb8;font-weight:600;}
#RecentComments a.dsq-widget-user:hover{color:#999;}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:88%;margin:0;font-weight:400;color:#444}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
#RecentComments .dsq-widget-item pre:hover {opacity:1}
#RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}
#RecentComments .dsq-widget-item pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}
#RecentComments .dsq-widget-item pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}


Instalando el html que mostrara los comentarios recientes de disqus


Luego de haber insertado el estilo del contenedor, procedemos a colocar el html que mostrara en si todos estos recientes comentarios hechos con disqus, en nuestra web.



<div id="RecentComments" class="dsq-widget">
<script defer="defer" type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type="text/javascript" src="yourshortname.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div> 


Listo, realizados estos dos pasos, ya puedes visualizar los comentarios de tu sitio web en un solo lugar. Por lo general Disqus suele demorar unos minutos para mostrar todos los comentarios recientes de nuestro sitio web.

Cómo instalar los comentarios recientes de Disqus en Blogger


Convierte tu blog en una máquina de ventas

Suscríbete y descubre cómo vender productos y servicios a través de tu blogger sin morir en el intento.
  • Multiplica tus ingresos aprovechando al máximo tu blogger.
  • Comienza a generar tráfico cualificado y de interés para tu oferta.
  • Convierte tus visitas en clientes gracias a un blog optimizado.

Tus datos están 100% seguros.
Para los amantes de la tecnología blogger, el instalar los comentarios recientes de disqus, no es nada complicado. Solo debemos cerciorarnos de que los comentarios de nuestro blog sean gestionados por la plataforma Disqus.

comentarios-recientes-de-disqus


Insertar el código de comentarios recientes disqus en un gadged html.


Para logar visualizar los recientes comentarios de disqus en blogger, se debe ingresar a la administración y allí crear un gadget de tipo html, en este gadget insertamos el código que se mostrara a continuación, se asigna un lugar, guardamos y listo.



 <style scoped="scoped" type="text/css">
#RecentComments{display:block;width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;}
#RecentComments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto;}
#RecentComments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444}
#RecentComments p.dsq-widget-meta a:hover{color:#ff675c}
#RecentComments li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:600}
#RecentComments li.dsq-widget-item:last-child{border-bottom:none}
#RecentComments a.dsq-widget-user {display:table;color:#736fb8;font-weight:600;}
#RecentComments a.dsq-widget-user:hover{color:#999;}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:88%;margin:0;font-weight:400;color:#444}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
#RecentComments .dsq-widget-item pre:hover {opacity:1}
#RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}
#RecentComments .dsq-widget-item pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}
#RecentComments .dsq-widget-item pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}
</style>
<div id="RecentComments" class="dsq-widget">
<script defer="defer" type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type="text/javascript" src="yourshortname.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div> 



Como poner los comentarios recientes de Disqus en blogger rápidamente.


Si por otro lado solo quieres el código limpio, es decir, sin estilo del contenedor, crear en tu blogger un gadget como el descrito anteriormente y coloca allí, el siguiente código, guarda y listo.


<div id="recentcomments" class="dsq-widget">

<script type="text/javascript" src="http://yourshortname.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=32&excerpt_length=200"></script>

</div>


No olvides cambiar el "yourshortname" escrito en el codigo, por el nombre de usuario
que disqus te proporciona al registrar tu sitio.

El método de hacer funcionar los comentarios de disqus en blogger es muy sencillo, como te puedes dar cuenta. Simplemente debes seleccionar bien el código según tu caso y el lugar donde quieres visualizar los comentarios dentro de tu sitio web.

Convierte tu blog en una máquina de ventas

Suscríbete y descubre cómo vender productos y servicios a través de tu blogger sin morir en el intento.
  • Multiplica tus ingresos aprovechando al máximo tu blogger.
  • Comienza a generar tráfico cualificado y de interés para tu oferta.
  • Convierte tus visitas en clientes gracias a un blog optimizado.

Tus datos están 100% seguros.
¿Qué te han parecido estos métodos? ¿Conoces tu otra forma de hacer visibles los comentarios recientes de disqus en un sitio web?

Te cedo la palabra. A ver si entre todos conseguimos mejorar la visibilidad de los comentarios recientes de disqus en nuestra web ¿Cuál es el que vas a utilizar desde hoy en tu sitio web o blogger?

¿TE PARECE COMPLICADO TODO ESTO? LO HAGO PARA TI

Puedo hacerlo yo para ti, porque no tienes tiempo ni ganas: ¡Contrátame Aquí!
O puedo explicarte como crear un sitio web completamente dinámico sin ser un experto en programación web.¡Suscríbete Ahora!

Siguiente
« Anterior Post