Unique identifiers not working?

[Dany Joumaa]

Hi there,

A while ago, someone left a post in this group asking if it were possible to put Disqus in a lightbox-type modal. Luckily, I have been able to do so.

However, I'm struggling with one thing: I want my Disqus comment box to be unique for each image in my Fancybox gallery.

In my case, the easiest way to do this was to vary 'disqus_identifier' across each image.

I do so via:

<div id="disqus_thread">
</div>
<script type="text/javascript">
    var disqus_shortname = 'umigarrett';
    var disqus_identifier =title; // "title" is a variable provided by fancybox; it's the name of the image
    alert( disqus_identifier );
    var disqus_url = window.location.href+'/'+title;
    window.disqus_no_style = true;
    var disqus_container_id = 'disqus_thread';
    var disqus_title = 'Photo '+title;
    var disqus_message = title;
    oldDsq = document.getElementById('disqusCommentScript');
    if(oldDsq) {
        (document.getElementsByTagName('head')[0] ||
        document.getElementsByTagName('body')[0]).removeChild(oldDsq);
    } 
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = 'http://umigarrett.disqus.com/embed.js';
    dsq.id = 'disqusCommentScript';
    (document.getElementsByTagName('head')[0] ||
    document.getElementsByTagName('body')[0]).appendChild(dsq);
</script>

However, for some reason, I always end up getting the same Disqus comment box, no matter what unique identifier I use. In other words, the comments for one image are the same as the comments for all the other images.

I have tried the AJAX variation of loading disqus only to get the same problem. Furthermore, DISQUS.reset() didn't seem to do anything when I tried it, possibly because fancybox doesn't employ shebangs in its links.

Are there any ideas out there as to why my comment boxes are all the same, despite different unique identifiers?

Thanks,
--Dany.

[Dan]

Anyone?

Thanks,
--Dany.

[Anton Kovalyov (DISQUS)]

Hi Dany,

Disqus relies on different states to display a correct thread and to reload the widget for a new thread, we have to reset all of them. We also understand that you probably have something more fun to do than digging into Disqus JavaScript internals. So we created a helper method to that kind of thing. It is called DISQUS.reset and here is how you use it:

DISQUS.reload({

  reload: true,

  config: function () {

    this.page.identifier = "YOUR NEW IDENTIFIER";

    this.page.url = "http://example.com/#!newthread";

  }

});

If you have a web app with one URL and different hashes, please, keep in mind that we Disqus recognizes _only_ hash-bangs (#!):

DISQUS will see http://example.com/#!/about and http://example.com/#!/blog as two different threads.

DISQUS will see http://example.com/#/about and http://example.com/#/blog as one thread with URL http://example.com/.

Basically, we ignore the part after the hash (#) unless it is followed by an exclamation point.

Hope that helps, let me know if you have any further questions.

Anton

[Anton Kovalyov (DISQUS)]

Dany,

I fail at typing. The method is DISQUS.reset not DISQUS.reload. The latter is an internal method you shouldn't be using. Sorry.

Anton

[Dany Joumaa]

Hi Anton,

Thank you for your response.

Not sure if I wasn't clear in my initial e-mail, but I've already tried using DISQUS.reset and it didn't work. Because fancybox doesn't rely on hash-bangs to show images, I was hoping that simply using the DISQUS.reset() function while varying the identifier and keeping the URL the same would be enough to create new threads. Should this be true?

If it is in fact true, should my code look something like this?

<div id="disqus_thread">
</div>
<script type="text/javascript">

    if( typeof DISQUS != 'undefined' ) {

      DISQUS.reload({
        reload: true,
        config: function () {

          this.page.identifier = title; // "title" is a variable provided by fancybox; it's the name of the image
          this.page.url = window.location.href;
        }
      });

    }
    oldDsq = document.getElementById('disqusCommentScript');

    if(oldDsq) { // remove old instance of the disqus script if it's still around

        (document.getElementsByTagName('head')[0] ||
        document.getElementsByTagName('body')[0]).removeChild(oldDsq);
    }

    var disqus_shortname = 'umigarrett'; // start filling up identifier info
    var disqus_identifier =title;

    var disqus_url = window.location.href+'/'+title;
    window.disqus_no_style = true;
    var disqus_container_id = 'disqus_thread';
    var disqus_title = 'Photo '+title;
    var disqus_message = title;

    var dsq = document.createElement('script');
    dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = 'http://umigarrett.disqus.com/embed.js';
    dsq.id = 'disqusCommentScript';
    (document.getElementsByTagName('head')[0] ||
    document.getElementsByTagName('body')[0]).appendChild(dsq);
</script>

Thanks so much for your assistance. I really do appreciate it :)

--Dany.

[Anton Kovalyov]

Dany,

We require all threads to have unique URLs because the server pings the URL before creating a thread (otherwise, we would end up with thousands of ghost threads and threads from Google image search results, etc.). I would advise you to use your main URL with a unique hash-bang. (maybe put your Disqus identifier there?)

Anton

--
--
http://groups.google.com/group/disqus-dev?hl=en

[Dany Joumaa]

Anton,

Again, my image gallery doesn't actually utilize hashbangs or shebangs for that matter. So, should I just supply Disqus with a URL that includes a shebang (even though the URL properly doesn't exist) anyway?

Thanks so much!
--Dany.

--
--
http://groups.google.com/group/disqus-dev?hl=en

[Dany Joumaa]

Anton,

Thanks again for your help. What seemed to fix all of my problems was supplying /both/ a unique disqus_url and a unique disqus_identifier, rather than only a unique disqus_identifier. I'm not sure if that was made clear in the docs, but either way, I'm very thankful for your help :)

--Dany.

[Anton Kovalyov]

Hey Dany,

I'll make it more clear in the docs, thanks for the feedback!

Anton

--
--
http://groups.google.com/group/disqus-dev?hl=en

[Matt Fiocca]

This is an old thread by now, but stumbled across it when searching for the same exact issue. I'm using the EmberJS framework, and i have a the same scenario as Dany, where different Disqus threads need to load in a modal depending on a item that was clicked in list view. Here's my Ember code that renders the modal:

App.DisqusView = Em.View.extend({
    template: function( model ){
        window.disqus_shortname = 'cancernomograms';
        window.disqus_no_style = true;
        window.disqus_identifier = 'nomogram_' + model.get('id');
        window.disqus_url = 'http://'+document.domain+'/#!/'+model.get('slug');
        return '';
    },
    didInsertElement: function(){
        Ember.run.scheduleOnce('afterRender', this, this.renderComments);
    },
    renderComments: function(){
 
        console.log( window.disqus_identifier, window.disqus_url );

        if (w.DISQUS) {
            w.DISQUS.reset({

                reload: true,
                config: function () {

                    this.page.identifier = window.disqus_identifier;
                    this.page.url = window.disqus_url;
                }
            });
        } else {

            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;

            dsq.src = 'http://' + window.disqus_shortname + '.disqus.com/embed.js';
            $('head').append(dsq);
        }
    }
});

Everything works great, in that the discussion loads, the console.log() shows the correct unique values, etc. Only, i'm getting the same thread no matter how unique the identifier AND the url are. As you can see, i'm using shebangs. I've also tried:

window.disqus_url = 'http://'+document.domain+'/'+model.get('slug');

... without the shebang, and just a normal unique subpage. nothing changed. 

Thoughts?

[Burak Yiğit Kaya]

Hi there,

Sorry this happened. Looks like you are experiencing the identifier conflict problem: http://help.disqus.com/customer/portal/articles/662547-why-are-the-same-comments-showing-up-on-multiple-pages-

Our discussions editor should be able to help you: http://blog.disqus.com/post/50982083405/a-discussions-editor-for-mere-mortals

--
You received this message because you are subscribed to the Google Groups "Disqus Developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to disqus-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--
BYK

[Matt Fiocca]

thanks! i'll have a look

[Matt Fiocca]

ok, so i'm trying to edit the "Link" attribute of my discussion in the Disqus editor. The current value was just the domain without the unique shebang. I've tried a couple times to add either the unique shebang ( /#!/some-unique-url ) or just a unique subpage ( /some-unique-url ) to the end of the domain and i consistently get one of two error messages within Disqus:

"There was internal server error while processing your request"

or

"Link matching query does not exist."

Ok, so i figure, since maybe i'm developing this on a domain pointed to my localhost, maybe there are some reverse lookups to check my domain? Could that be an issue? If not, i'm also trying to find a 'delete' button on my thread within disqus so i can just re-create the thread properly from the start. But can't find it. I can see that i can remove comments, but not the thread. ....

On Tuesday, September 17, 2013 12:35:02 PM UTC-5, Burak Yiğit Kaya wrote:

[Burak Yiğit Kaya]

Hi Matt,

It looks like there's indeed an issue. Can you report this to http://disqus.com/support/. You can also link to this thread to make it easy to gather information.

We'll investigate the issue. Are you able to use Disqus for other URLs?

[Jurgen Fink]

Hey Dan,

same here, same problem - same comment box would appear because first thread ID would remain active (for the active page).

You could trigger via js a new comment box in your light-box, loading your specific disqus_identifier for each image.

Here is what we did:

We had a similar problem because we maintain on same domain two different threads (2 different disqus_shortname , one for English, one for Spanish) and we transit pages with Ajax (hence no full reload of page but rather injection of HTML dynamically into our base DOM). Hence, DISQUS maintains same thread ID (loading same messages from first full page load) similar to your light-box, because your light-box belongs to same page.

Solution:

loading dynamically with javascript function + jQuery.

(all you have to do is to trigger the following refresh-examples once you open your light-box - but you get at least the idea)

- - - - HTML - - - 

   
             <a href="#" onclick="refresh_Disqus_1()">Refresh Comments in Spanish</a>

                                     <!-- With above button you trigger the dynamic load of your 1st location, or you bind it with the page load event or any other event -->

                <div id="disqus_container_1">

                                     <!-- into this first container we will re-injekt the '<div id="disqus_thread"></div>' when we switch back to our first thread -->

                                     <!-- and delete the '<div id="disqus_thread"></div>' at the 2nd location where we injekted -->

               </div>

...
...

              <a href="#" onclick="refresh_Disqus_2()">Refresh Comments in English</a>

                                      <!-- With above button you trigger the dynamic load of your 2nd location, or you bind it with the page load event or any other event -->

                <div id="disqus_container_2">

                                      <!-- into this container we will injekt the '<div id="disqus_thread"></div>' which tells DISQUS where to place the widget now -->

                                      <!-- and delete the '<div id="disqus_thread"></div>' at our first location <div id="disqus_container_1"> -->

               </div>

                <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

            <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Then you place the following code into your .js file:

- - - - JS + jQuery library - - - - 

// define your variables globally (outside function - because that's what messes up ...) :

var disqus_shortname = 'your_shortname_1';

var disqus_identifier = 'your_identifier_1';

var disqus_url = 'http://www.example.html/page_1.html';

var disqus_title = 'Your Title_1';

var disqus_language = 'en';

                                             

// declare a function that will load the DISQUS widget:

function loadDisqus()   {

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

    })();

};

// define your DISQUS parameters dynamically (ex. _1 and _2 ):

// important: injekt (and delete at other location of your site) '<div id="disqus_thread"></div>'

function set_Disqus_2()   {

$("#disqus_container_1").html("");                                               // deleting on first location

$("#disqus_container_2").html('<div id="disqus_thread"></div>');    // injecting on different location on same DOM

disqus_shortname = 'your_shortname_2';

disqus_identifier = 'your_identifier_2';

disqus_url = 'http://www.example.html/page_2.html';

disqus_title = 'Your Title_2';

disqus_language = 'es';

};

// likewise you can switch back to your first div container with second function and reload first thread:

function set_Disqus_1()   {

$("#disqus_container_2").html("");                                               // deleting from second location

$("#disqus_container_1").html('<div id="disqus_thread"></div>');    // injecting back again to first location on same DOM

disqus_shortname = 'your_shortname_1';

disqus_identifier = 'your_identifier_1';

disqus_url = 'http://www.example.html/page_1.html';

disqus_title = 'Your Title_1';

disqus_language = 'en';

};

// declare your two functions to switch back and forth from location and thread _1 to _2:

function refresh_Disqus_1()    // Click event of Reload Button _1

{

set_Disqus_1();

loadDisqus()

};

function refresh_Disqus_2()   // Click event of Reload Button _2

{

set_Disqus_2();

loadDisqus()

};

... and you are done.

This way you can dynamically load as many different threads at different locations of your site as you wish (mind you: ONE at a TIME only).

See a working example at our site and Switch between EN and ES (our two different threads, one for English, one for Spanish):

Our 2 different DISQUS threads load dynamically (without full page reload nor iframe tricks, just simple Ajax transition, nice and smooth)

http://www.oilamerica.com.pa/en/comments.html 

hope this helps; .

Saludos,

Jürgen