Varios hilos de disqus en una página

Question

tenemos un sitio web donde tenemos una lista de muchos eventos, y nos gustaría agregar discusiones a cada uno de los eventos.

Así que queríamos usar disqus, y lo hemos comprobado. Resulta que usan variables globales para configurar la instancia.

me gusta;

var disqus_shortname = ''; 

var disqus_identifier = ''; 

var disqus_url = ''; 

Esto plantea un problema para nosotros, cuando no queremos utilizar el mismo identificador, sino más bien una única instancia por Disqus. intenté poner cada configuración de instanciación + en iframes, pero eso realmente arruinó ie8. ¿hay una mejor manera de hacerlo?

Por lo tanto, para resumir; varias instancias de disqus en una página. ¿cómo? ¿alguien más lo ha hecho?

Gracias

Answer 1

Nos enfrentamos a un problema similar y le enviamos un correo electrónico a Disqus al respecto. Confirmaron que, por defecto, solo admiten un módulo Disqus por página.

Al navegar por la documentación Disqus JS, encontré una solución que podría funcionar para usted por carga y descarga de los módulos de Disqus como el usuario interactúa con el sitio:

DISQUS.reset({ 
    reload: true, 
    config: function() { 
    this.page.identifier = "newidentifier"; 
    this.page.url = "http://example.com/#!newthread"; 
    } 
}); 

http://docs.disqus.com/help/85/

La exacta la implementación dependería de su sitio, pero esto debería darle un bloque de construcción para comenzar. Por ejemplo, si la información del evento está disponible expandiendo un área de contenido, puede cargar el módulo Disqus cada vez que alguien amplíe el contenido del evento.

Answer 2

Se podría cargar cada caso a través de un iframe. Sin embargo, es posible que tengas que tener barras de desplazamiento en la página ... asco.

Answer 3

Escribí un artículo sobre esto, encuéntralo aquí. http://mystrd.at/articles/multiple-disqus-threads-on-one-page/

En esencia, si está bien con mostrar un módulo individual a la vez y usar algún tipo de control de "mostrar comentarios", puede hacerlo de la siguiente manera (utilizando Wordpress y jQuery como ejemplo, pero puede ajustar los identificadores de contenido en función de sus necesidades). En un bucle de correo, insertar un control adicional para cada uno:

<a onclick="loadDisqus(jQuery(this), '<?= $id ?> <?= $post->guid ?>', '<? the_permalink() ?>');"> 
    Show comments 
</a> 

Posteriormente se necesita una función genérica que va a utilizar esos parámetros colocar y volver a cargar Disqus bajo demanda. Tenga en cuenta que la versión 2012 de Disqus aún no tiene el método reset() y, por lo tanto, esto no funcionará.

// global vars used by disqus 
var disqus_shortname = 'yoursiteshortnameindisqus'; 
var disqus_identifier; // made of post id   guid 
var disqus_url; // post permalink 

function loadDisqus(source, identifier, url) { 
    if (window.DISQUS) { 
     jQuery('#disqus_thread').appendTo(source.parent()); // append the HTML to the control parent 

     // if Disqus exists, call it's reset method with new parameters 
     DISQUS.reset({ 
      reload: true, 
      config: function() { 
       this.page.identifier = identifier; 
       this.page.url = url; 
      } 
     }); 
    } else { 
     //insert a wrapper in HTML after the relevant "show comments" link 
     jQuery('<div id="disqus_thread"></div>').insertAfter(source); 
     disqus_identifier = identifier; // set the identifier argument 
     disqus_url = url; // set the permalink argument 

     // append the Disqus embed script to HTML 
     var dsq = document.createElement('script'); 
     dsq.type = 'text/javascript'; 
     dsq.async = true; 
     dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; 
     jQuery('head').appendChild(dsq); 
    } 
}; 

Aparte de esto, creo que tendrías que recurrir al uso de iframes. Tal solución con Ruby como un ejemplo se describe aquí - http://blog.devinterface.com/2012/01/how-to-insert-more-disqus-box-in-single-page/

Answer 4

Supuestamente desde el 17 de julio de 2012, Disqus 2012 ahora es compatible con el "reinicio" de nuevo.

Answer 5

Necesitaba usar Disqus desde una aplicación GWT, por lo que necesitaba resolver el problema de cargar hilos a pedido a medida que se cambiaban las páginas virtuales en la aplicación.

Una pequeña cantidad de ingeniería inversa y la experimentación me llevaron a construir una clase de utilidad (a continuación).

Las principales conclusiones son:

1. Hay un parámetro global indocumentado llamado disqus_container_id que le permite colocar los comentarios donde lo desee. Si eso no funciona en alguna versión futura de , mi alternativa sería establecer temporalmente el ID del elemento de destino en disqus_thread, agregar los comentarios y luego volver a cambiarlos al ID original.
2. Como esto se estaba desarrollando para GWT usando JSNI, necesitaba establecer los parámetros globales en el contexto de la ventana original, accesible a través de $wnd. Cambié el código de inserción de Disqus por defecto. No me di cuenta antes de que todas las variables globales están en el objeto Window, pero aprendí algo nuevo.
3. Puede reutilizar el mismo contenedor, Disqus parece borrar el contenido cuando lo active .
4. Esto deja muchas copias de la etiqueta de secuencia de comandos en el DOM. Tal vez sería una buena idea limpiar esto también una vez que han sido utilizados. Alternativamente, podría hacer algunos experimentos más usando el método DISQUS.reset descrito en otras respuestas.

Extraer sólo la información crucial para alguien usando JS por sí solo, esto debería permitir que usted se pegue un hilo Disqus cualquier lugar que desee:

function loadComments(container_id, shortname, identifier, developer) { 
    // CONFIGURATION VARIABLES 
    window.disqus_container_id = container_id; 
    window.disqus_developer = developer ? 1 : 0; 
    window.disqus_shortname = shortname; // required 
    if (identifier) window.disqus_identifier = identifier; 

    // DON'T EDIT BELOW THIS LINE 
    (function() { 
     var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 
     dsq.src = 'http://' + shortname + '.disqus.com/embed.js'; 
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 
    })(); 
} 

Y aquí es la clase de utilidad completa GWT. Solo he implementado los parámetros que necesitaba hasta ahora.

import com.google.gwt.user.client.Element; 
import com.google.gwt.user.client.Random; 
import com.google.gwt.user.client.ui.Widget; 

public class Disqus { 

    public static boolean developer = false; 
    public static String shortname; 

    public static void showComments(Widget where, String identifier) { 
     showComments(where.getElement(), identifier); 
    } 

    public static void showComments(Element where, String identifier) { 
     if (shortname == null) 
      throw new IllegalArgumentException(
         "You must specify the disqus shortname before displaying comments"); 

     // Store the original id of the target element 
     String id = where.getId(); 
     if (id == null) { 
      id = "disqus-" + Integer.toHexString(Random.nextInt()); 
      where.setId(id); 
     } 

     // Update the id temporarily 
     where.setId("disqus_thread"); 

     // Load the comments 
     loadComments(id, shortname, identifier, developer); 
    } 

    private static native void loadComments(String container_id, String shortname, String identifier, boolean developer) /*-{ 
     // CONFIGURATION VARIABLES 
     $wnd.disqus_container_id = container_id; 
     $wnd.disqus_developer = developer ? 1 : 0; 
     $wnd.disqus_shortname = shortname; // required 
     if (identifier) $wnd.disqus_identifier = identifier; 

     // TODO 
     // disqus_url 

     // disqus_title 

     // disqus_category_id 

     // DON'T EDIT BELOW THIS LINE (sorry, I've edited it anyway) 
     (function() { 
      var dsq = $doc.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 
      dsq.src = 'http://' + shortname + '.disqus.com/embed.js'; 
      ($doc.getElementsByTagName('head')[0] || $doc.getElementsByTagName('body')[0]).appendChild(dsq); 
     })(); 
    }-*/; 
} 

Answer 6

Sé que esta pregunta es muy antigua, pero como me he enfrentado al mismo problema encontré un trabajo que funcionó bastante bien para mí.

Actualmente tengo una página, llamémosla Álbum, que enumera una serie de imágenes pertenecientes a ese álbum.

Al hacer clic en una imagen, aparecerá un lightbox con la imagen actual y una barra lateral especial que recupera a través de ajax información actual de la imagen como título, fecha, autor, comentarios, etc. (Muy similar al Facebook image viewer/sidebar comments)

Quería que los usuarios pudieran comentar en la página principal del álbum, pero también en la imagen específica que están viendo dentro de la barra lateral de lightbox.

Gracias a algunas funciones de devolución de llamada que pertenecen al lightbox, se ejecutó una cuando se abrió lightbox, que he usado para renombrar temporalmente el div 'disqus_thread' en la página principal del álbum a otra cosa.

Otra devolución de llamada se ejecutó cada vez que cambió las imágenes dentro del lightbox, lo que me permitió volver a cargar la información de la barra lateral con respecto a la imagen donde incluí un nuevo disqus_thread div y un javascript forzando un disqus_reset.

Y la otra devolución de llamada se ejecuta cuando la caja de luz se cierra, lo que me permite cambiar el nombre del comentario del álbum div a disqus_thread y forzar otro restablecimiento.

Para resumir, la página principal contiene los comentarios del álbum, cuando haces clic en una imagen, renombro el div original a otra cosa. A continuación, se obtiene cierta información a través de AJAX que contiene un nuevo div de disqus_thread.Uso DISQUS.reset y los comentarios se cargan en la caja de luz. Cuando cierro el lightbox cambio el nombre del div original a disqus_thread y fuerzo otro reset.

Espero que ayude a alguien!

Answer 7

Tente isso:

<div class="showDisqus" data-title="MyTitle" data-id="1" data-url="mysite.com/mypost">Show Comments</div> 

$('.showDisqus').on('click', function(){ // click event of the show comments button 
    var this_ = $(this); 
     disqus_shortname = 'your_shortname', 
     title = $(this).attr('data-title'), 
     identifier = parseFloat($(this).attr('data-id')), 
     url = $(this).attr('data-url'); 

    if (window.DISQUS) { 

     DISQUS.reset({ // Remove the old call 
      reload: false, 
      config: function() { 
      this.page.identifier = window.old_identifier; 
      this.page.url = window.old_url; 
      this.page.title = window.old_title; 
      } 
     }); 
     $('.showDisqus').show(); 
     $('#disqus_thread').remove(); 

     $('<div id="disqus_thread"></div>').insertAfter(this_); 

     setTimeout(function() { // Creates a new call DISQUS, with the new ID 
      DISQUS.reset({ 
       reload: true, 
       config: function() { 
       this.page.identifier = identifier; 
       this.page.url = url; 
       this.page.title = title; 
       } 
      }); 
      window.old_identifier = identifier; 
      window.old_url = url; 
      window.old_title = title; 
     }); 

    } else { 

     var disqus_identifier = parseFloat(identifier), 
      disqus_title = title, 
      disqus_url = url; 

     $('<div id="disqus_thread"></div>').insertAfter(this_); 

     (function() { 
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; 
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 
     })(); 

     setTimeout(function() { // Sorry, there must be a better way to force the ID called correctly 
      DISQUS.reset({ 
       reload: true, 
       config: function() { 
       this.page.identifier = identifier; 
       this.page.url = url; 
       this.page.title = title; 
       } 
      }); 
     },500); 

     window.old_identifier = identifier; 
     window.old_url = url; 
     window.old_title = title; 

    } 
    $(this).fadeOut(); // remove the show comments button 
}); 

Answer 8

que itera a través de las soluciones anteriores, y ninguno funcionó fuera de la caja. Comprobando a través de la fuente, hice esto, que funciona. No está lejos, pero hace toda la diferencia que parece.

<script type="text/javascript"> 
var disqus_shortname = 'superchocolate', 
    disqus_identifier = 'default', 
    disqus_title  = 'I Heart Chocoloate', 
    disqus_config  = function(){ 
     this.language = 'en'; 
    }; 


(function() { 
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 
    dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; 
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 
})(); 



function loadDisqus(identifier, url, title) 
{ 
    DISQUS.reset({ 
     reload: true, 
     config: function() 
     { 
      this.page.identifier = identifier; 
      this.page.url  = url; 
      this.page.title  = title; 
      this.language  = 'en'; 
     } 
    }); 
} 
</script> 

En su margen de beneficio, poner la norma:

<div id="disqus_thread"></div> 

Y luego, en sus acciones de clic, es bastante simple. Tenía un miembro llamado "datos" que estaba recibiendo de una llamada AJAX.

loadDisqus('ugc-' + data.id, location.protocol+'//'+location.hostname + "/ugc-submission-" + data.id + "/", data.title); 

Esto funcionó para mí, resolviendo un problema en el código anterior que tenía comentarios similares que se pasaban entre varios hilos.

Estoy mostrando mi subproceso Disqus en un modal Bootstrap, llamo loadDisqus antes de la llamada a $ (el) .moda ('show') y es transparente.