Implementar Sistema de Comentarios con Disqus

Disqus es una plataforma para que los editores construyan sus audiencias, ofrece un excelente servicio de sistema de comentarios para un blog, sitios web, comunidades en linea, periódicos en linea, etc.

En este tutorial vamos a implementar Disqus con JavaScript en un articulo para que nuestros usuarios puedan dejar sus opiniones.

Crear una cuenta en Disqus

Primero tenemos que crear una cuenta en Disqus, también puedes loguearte usando el protocolo OAuth de las cuentas de Facebook, Twitter, Google.

Crear un nuevo sitio Disqus

Una vez creado nuestra cuenta en Discus siempre es recomendable confirmar nuestro correo electrónico.

Para crear un nuevo sitio Disqus, asegúrate de tener abierta tu cuenta. Puedes crear mas de un sitio.

Ingresa a la pagina inicial de Disqus y haz clic en el botón GET STARTED.

Empezar Disqus


En esta página haz clic en la opción I want to install Disqus on my site.

Quiero instalar Disqus en mi sitio


Presta atención aquí tienes que llenar la información que te solicita, vamos a mencionar los mas importantes.

  1. Website Name: es recomendable colocar el nombre del sitio web donde se alojara el sistema de comentarios Disqus.
  2. Your unique disqus URL will be: muestra la url del sitio Disqus que haz creado, recuerda que lo usaremos posteriormente para implementarlo en nuestro sitio web.
  3. Customize Your URL: te da la opción de modificar el Shortname.
  4. Category: selecciona la categoría a la que pertenece tu sitio web.
  5. Language: Elige tu idioma nativo o el que desees.

Una ves que hayas llenado tus datos correctamente haz clic en el botón Create Site.

Nombre de Sitio Disqus


Aquí nos muestra la información de Disqus, para continuar haz clic en el botón Let's get started!.

Empecemos Disqus


Disqus se puede implementar en diferentes plataformas como se muestra en la siguiente imagen, cada uno cuenta con una guía completa de como agregar Disqus a dicha plataforma.

Nosotros vamos a implementar Disqus a través del código universal por lo tanto hacemos clic en el botón I don't see my platform listed, install manually with Universal Code que en español significaría "no veo mi plataforma en la lista, instalar manualmente con el Código Universal".

Código para Implementar Disqus


Esta pagina cuenta con las instrucciones de como instalar Disqus a través del código universal con JavaScript, el cual utilizaremos posteriormente.

Código Universal Disqus


Antes de continuar seria recomendable completar nuestros datos para el nuevo sitio Disqus que hemos creado.

Primero dirígete a la página principal de Disqus y haz clic en la opción Admin.

Admin Disqus

En esta página haz clic en la opción Your Sites y elige tu sitio.

Elige Tu Sitio Disqus

En esta página haz clic en la opción Settings.

Settings Disqus

Esta es la pagina donde llenaremos nuestros datos.

Configurar Disqus

Una vez completado debería quedar lo mas parecido a la siguiente imagen, claro esta que sera con tu información.

Configuración Terminada Disqus

Código HTML y JavaScript documentado

Recuerda que es recomendable testear el siguiente código en un servidor local o remoto. El código que te compartiré estará debidamente documentado léelo por favor.

<!DOCTYPE html>  
<html lang="es">  
<head>  
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo - Implementar Disqus con JavaScript</title>
  <style type="text/css">
    body{background: #232323;margin:0;}
    header, main, footer, section{box-sizing: border-box;display: block;}
    .contenedor-principal{margin: 0 auto;width: 60%;}
    header{background-color: #10BDE2;border-bottom: thin solid #fff;}
    .contenido-post{background: radial-gradient(circle, #36D0F1, #0C88A3);}
    .disqus{background-color: #E7E5E5;}
    footer{background-color: #BEBEBE;}
    footer p{text-align: center;}
    header, .contenido-post, .disqus, footer{padding: 1em;}
  </style>
</head>  
<body>  
<div class="contenedor-principal">  
  <header>
    <h1 class="post-title">Ejemplo - Implementar Disqus con JavaScript</h1>
  </header>
  <main>
    <article>
      <section class="contenido-post">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore accusamus cum facilis atque, adipisci dolore!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint at expedita fugiat, animi dolor placeat nulla eaque veritatis rerum adipisci.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam placeat facilis neque, similique sed. Repellendus tempore, enim cupiditate adipisci eius nobis voluptate labore quibusdam. Quisquam dicta porro repellat illo incidunt.</p>
      </section>
      <section class="disqus">
        <h2>Comparte tu Opinión</h2>
        <!--Etiqueta donde se mostrara el formulario Disqus no cambie el ID-->
        <div id="disqus_thread"></div>
        <!--
          Mensaje a mostrarse siempre y cuando 
          JavaScript este desactivado en tu navegador
        -->
        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
      </section>
    </article>
  </main>
  <footer>
    <p>01luisrene &copy; 2017</p>
  </footer>
</div>  
<script>  
/**
*  APRENDA POR QUE ES IMPORTANTE DEFINIR ESTAS VARIABLES: https://disqus.com/admin/universalcode/#configuration-variables*/

var disqus_config = function () {  
this.page.url = window.location.href;  // Url de tu sitio web  
this.page.identifier = window.location.href; // Url de tu sitio web  
};

(function() { // TENGA CUIDADO AL REALIZAR SUS CAMBIOS
  var $d = document,
      $s = $d.createElement('script'),
      $shortName = 'disqus-tutorial-01luisrene'; //Importante: cambialo por tu Shorname

  $s.src = '//'+ $shortName +'.disqus.com/embed.js';
  $s.setAttribute('data-timestamp', +new Date());
  ($d.head || $d.body).appendChild($s);
})();
</script>  
</body>  
</html>  

Compártelo en tus redes sociales, para que tus amigos lo lean :)

Luis Rene Mas Mas's Picture

Luis Rene Mas Mas

Desarrollador front-end & webmaster del blog 01luisrene.com

Trujillo - Perú @01luisrene

Únete al Blog

Obtén los últimos artículos publicados directamente en tu bandeja de entrada.

O suscríbase vía RSS con Feedly!

Comparte tu Opinión