Does Disqus have public events to attach to?

I need to perform some re-calculations after disqus form gets an update. A new comment, error message just to name a few. In essence any event that causes the Disqus iframe to expand vertically. Checked the API, but didn't find any public events. Seems like the events are not publicly accessibly atm. So the first question is – does Disqus have any public events to attach to?

The second would be – if I have no way to attach to events from Disqus I wonder would MutationEvent do the trick for me taking into account that Disqus stuff is within an iFrame?

Answers:

Answer

I'm not sure about public events for Disqus in particular, but if you just need to monitor changes to an iframe's height, here's one way:

var iframe = document.getElementById('myIframe');
var iframeHeight = iframe.clientHeight;

setInterval(function() {
    if(iframe.clientHeight != iframeHeight) {
        // My iframe's height has changed - do some stuff!

        iframeHeight = iframe.clientHeight;
    }
}, 1000);

Granted, it's basically a hack. But it should work!

Answer

Best I have come up with so far

function disqus_config() {
    this.callbacks.onNewComment = [function() { trackComment(); }];
}

from here: http://help.disqus.com/customer/portal/articles/466258-how-can-i-capture-disqus-commenting-activity-in-my-own-analytics-tool-

Doing a console.log(DISQUS) in the chrome console shows the disqus object, and there are other callbacks mentioned

_callbacks: Object
  switches.changed: Array[2]
  window.click: Array[2]
  window.hashchange: Array[2]
  window.resize: Array[2]
  window.scroll: Array[2]

and on and trigger methods

Answer

Well, they don't have any public events documented (as far I can tell). But, application is triggering a lot of events on its parent window. So it's possible to listen to them and make some actions. You can do that with following snippet:

window.addEventListener('message', function (event) {
    // if message is not from discus frame, leap out
    if (event.origin != 'https://disqus.com' && event.origin != 'http://disqus.com') return;

    // parse data
    var data = JSON.parse(event.data);

    // do stuff with data. type of action can be detected with data.name 
    // property ('ready', 'resize', 'fakeScroll', etc) 
}, false);

In webkit based browsers it works just fine. With firefox there might be some issues. With IE... well, I don't have any IE on hand to test it.

Answer

You can find list of available events in embed payload:

callbacks:{
    preData:[],
    preInit:[],
    onInit:[],
    afterRender:[],
    onReady:[],
    onNewComment:[],
    preReset:[],
    onPaginate:[],
    onIdentify:[],
    beforeComment:[]
}

I haven't found any documentation (except example for onNewComment), so you need guess how they works from event name.

You can use them in this way:

var disqus_config = function () {
    this.callbacks.onNewComment = [
        function() { 
            // your code
        }
    ];
};

or

var disqus_config = function () {
    this.callbacks.onNewComment = this.callbacks.onNewComment || [];
    this.callbacks.onNewComment.push(function() { 
        // your code
    });
}

On the side note, I found them completely useless for detecting change in height of comments iframe. I ended with using ResizeSensor from css-element-queries.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.