javascript - plataforma - Varios hilos de discusión en una sola página.

plataforma disqus

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 comprobamos. Resulta que utilizan 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 usar el mismo identificador, sino uno único por cada instancia de disqus. Intenté poner cada instanciación + configuración en iframes, pero eso realmente arruinó ie8. ¿Hay una mejor manera de hacerlo?

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

Gracias

Answer 1

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

En esencia, si está de acuerdo con mostrar un solo módulo a la vez y usar algún tipo de control de "mostrar comentarios", puede hacerlo de la siguiente manera (usando Wordpress y jQuery como ejemplo, pero puede ajustar el contenido) identificadores basados ​​en sus necesidades). En un ciclo posterior, inserte un control adicional para cada uno:

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

Luego, necesita una función genérica que utilizará esos parámetros de publicación y recargará Disqus a pedido. 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á con él.

// 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. Una solución de este tipo con Ruby como ejemplo se describe aquí: http://blog.devinterface.com/2012/01/how-to-insert-more-disqus-box-in-single-page/

Answer 2

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 experimentación me llevó a construir una clase de utilidad (a continuación).

Los principales puntos de vista son:

1. Hay un parámetro global no documentado llamado disqus_container_id que le permite colocar los comentarios donde lo desee. Si eso no funciona en alguna versión futura, mi reserva sería establecer temporalmente la identificación del elemento de destino en disqus_thread , agregar los comentarios y luego volver a cambiarla a la identificación original.
2. Como esto se estaba desarrollando para GWT utilizando 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 Disqus por defecto. No me había dado 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 activa.
4. Esto deja muchas copias de la etiqueta de script en el DOM. Tal vez sería una buena idea limpiarlos también una vez que se hayan utilizado. Alternativamente, podría hacer algunos experimentos más utilizando el método DISQUS.reset descrito en otras respuestas.

Extraer solo la información crucial para alguien que usa JS por sí solo, esto debería permitirle insertar un hilo de Disqus en 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í está la clase completa de utilidad 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 3

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

Al navegar por la documentación de Disqus JS, encontré una solución que podría funcionar para usted al cargar y descargar los módulos de Disqus a medida que 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 implementación exacta 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 4

Podrías cargar cada instancia a través de un iframe. Es posible que tengas que tener barras de desplazamiento en la página aunque ... asco.

Answer 5

Repasé las soluciones anteriores y ninguna salió de la caja. Comprobando a través de la fuente, improvisé 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 marca, ponga el estándar:

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

Y luego en tus acciones de click, es bastante simple. Tuve un miembro llamado "datos" que recibí de una llamada AJAX.

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

Esto me funcionó, resolviendo un problema en el código anterior que tenía comentarios similares entre varios subprocesos.

Estoy mostrando mi hilo Disqus en un modo Bootstrap, llamo a loadDisqus antes de la llamada a $ (el) .moda (''show'') y no hay problemas.

Answer 6

Sé que esta pregunta es muy antigua, pero como he enfrentado el mismo problema, encontré una solución que funcionó bastante bien para mí.

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

Al hacer clic en una imagen aparecerá una caja de luz con la imagen actual y una barra lateral especial que obtiene a través de la información de la imagen actual de ajax, como el título, la fecha, el autor, los comentarios, etc. (Muy similar a Facebook Image Viewer / comentarios de la barra lateral)

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 a la caja de luz, una se ejecutaba cada vez que se abría la caja de luz, que he usado para cambiar temporalmente el nombre del div ''disqus_thread'' en la página principal del álbum a otra cosa.

Se ejecutó otra devolución de llamada cada vez que cambiaba las imágenes dentro de la caja de luz, lo que me permitió volver a cargar la información de la barra lateral con respecto a la imagen en la que he incluido un nuevo div disqus_thread y un javascript que fuerza un disqus_reset.

Y la otra devolución de llamada se ejecuta cuando se cierra la caja de luz, lo que me permite cambiar el nombre del comentario del álbum a díqus_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. Luego, se obtiene información a través de AJAX que contiene un nuevo div disqus_thread. Uso DISQUS.reset y los comentarios se cargan en la caja de luz. Cuando cierro la caja de luz, cambio el nombre del div original a disqus_thread y fuerzo otro reinicio.

¡Espero que esto ayude a alguien!

Answer 7

Supuestamente, a partir del 17 de julio de 2012, Disqus 2012 ahora admite "restablecer" nuevamente.

Answer 8

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
});