Adding disqus to a meteor.js project

Question

i am trying to add the disqus commentsystem to my application. I followed the instruction written in this article KLICK

I created a template called disqus.html

 <template name="disqus">
  {{#isolate}}
    <div id="disqus_thread"></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>  
  {{/isolate}}
 </template>

If this template is rendered, embed.js should load once and disqus makes a reset.

Template.disqus.rendered = function() {  
  Session.set("loadDisqus", true);

  return typeof DISQUS !== "undefined" && DISQUS !== null ? DISQUS.reset({
    reload: true,
    config: function() {}
  }) : void 0;
};

React on sessionchange in deps.autorun

Meteor.startup (function () {
  Deps.autorun(function() {
    if(Session.get("loadDisqus") && !window.DISQUS) {
      var disqus_shortname = '<example>'; // required: replace example with your forum shortname

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

    }
  });
});

This works fine in Firefox 25.0.1. I can login, logout and create comments. But it isnt working in Chrome 31.0.1650.57 m. It is not possible for me to login. No error is thrown. What can i do? Any suggestions?

Even a login to disqus in discovermeteor.com/... is not possible for me.

Answer 1

Using session here is interesting but unnecessary. Here is what i migth do in your disqus.js file:

var isDisqusLoaded = false,
  myScriptLoader = function funcMyScriptLoader(jsEl, callback) {
    if (window.attachEvent) {
      // for IE (sometimes it doesn't send loaded event but only complete)
      jsEl.onreadystatechange = function funcOnReadyStateChange() {
        if (jsEl.readyState === 'complete') {
          jsEl.onreadystatechange = "";
        } else if (jsEl.readyState === 'loaded') {
          jsEl.onreadystatechange = "";
        }

        if (typeof callback === 'function') {
          callback();
        }
      };
    } else {
      // most browsers
      jsEl.onload = function funcOnLoad () {
        if (typeof callback === 'function') {
          callback();
        }
      };
    }
  };

Template.disqus.rendered = function funcTplDisqusRendered() {
  if (!isDisqusLoaded) {
    var myElJs = document.createElement('script'),
      s = document.getElementsByTagName('script')[0];
    myElJs.type = 'text/javascript';
    myElJs.async = true;
    myElJs.src = '//' + disqus_shortname + '.disqus.com/embed.js';

    myScriptLoader(myElJs, function funcEventLoaded() {
      isDisqusLoaded = true;
    });

    s.parentNode.insertBefore(myElJs, s);
  }
};

Using that script you won't need to use Deps.autorun and Session. You should use that kind of feature only where you want to get realtime, but if don't need it, avoid it coz it will degrade your app performance.

You can add Disqus.reset if it's really needed but i'm not sure, look at the disqus documentation.

I didn't test the script but it should be ok.