How to integrate mobiki with Disqus

From scretch mobiki does not support commenting, because it is designed to be minimalistic. But this does not mean it is impossible to integrate with external commenting systems, like Disqus for example.

Everybody who had ever tried to drive his own mail server knows very well, how much work it is to make this system immune against spamming attacks. The same is valid for commenting on websites. As soon as you allow others to write comments on your website, you constantly need to have an eye on it. Integrating external systems has the advantage of all the integrated anti-spam features and having centrally registered and validated users.

How to start

First you have to register at Disqus. The next thing is to go to Disqus' administration and register for a new site. You need to know

  • the name for your site,
  • a unique id which is not yet used (remember this, you will need it later) and
  • a generic category for your blog or wiki

Press finish registration and the first part is done.

Integrate Disqus-code in your template

The integration of your mobiki driven website with Disqus is done by integrating a a short javascript snippet in your template.html file, that will dynamically load the comments. This one is already prepared for use with mobiki. You should insert it into the template before the bottom <nav> tag, after the main part:

<aside><hr><div id="disqus_thread"></div>
<script type="text/javascript">
    var disqus_shortname =  'the unique disqus id from above';
    var disqus_title =      '{PAGE_TITLE}';
    var disqus_identifier = '{PAGE_ID}';
    var disqus_url =        '{PAGE_URL}';
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<noscript>Please enable JavaScript to view the <a href="" rel="nofollow">comments powered by Disqus.</a></noscript>

Don't forget the <hr> and <aside> tags, they are not needed, but will give a better look with correct padding and so on.

Everything in this code snippet is prepared for Disqus. As of the 4th of July 2015 mobiki provides a page title, a page id and the URL of the page for Disqus. The only thing to mention is, that you need to insert your unique disqus_shortname you hopefully remembered from the site's registration.

Well, congratulation, that's it, your done! To see it in action just take a look at my own blog Willnix. It is in german language.