Updated on | #disqus, #ludwigdisqus, #modx | 8 User comments | 2 Shares

LudwigDisqus - SEO based Disqus for MODX with Microdata

I've been searching for a good comment system for a while now. So I ended up going with Disqus because of the easy social media integration and to use threaded replies. The integration of Disqus in MODX itself is really easy: You have to throw the Universal JavaScript in a Chunk and insert this into your template. But I realized that the JavaScript method can't be used as content for search engines. So, I started to develop an add-on for MODX, which is using the Disqus API and integrates the content from Disqus to my Website.

What is Disqus?

Disqus is one of the largest and most well known comment systems on the Web. It is used by many popular websites might inspire you to add Disqus comments to your MODX website.

Demo

Please feel free to test Disqus on this page!

First Steps to add Disqus

Basic or Advanced Mode?

I separated the Extra into two parts:

  • Basic: Use Disqus as your common discussion platform
  • Advanced: Use Disqus as your common discussion platform as well as use the comments for Search Engine Optimization (SEO).

In order to use this plugin in Advanced Mode, you will need to use the Disqus API. Therefore, you have to register an API application in Disqus:

  • Register an Application: Go to Disqus Register Application page and register your application.
  • Receive Secret Key: You will get an Secret Key for your application, that is used as api_key in this Addon.
  • That's it!: You don't need something else.

MODX

Installing LudwigDisqus in MODX

If you have no experience with the installation of an MODX Extra Package via the Package Management, it would be the best for you to follow the Package Installation Guide. After a successful installation of LudwigDisqus package you have to setup the following settings for the basic version of this plugin in System -> System Settings -> Namespace ludwigdisqus -> Area general:

  • ludwigdisqus.activated: YES
  • ludwigdisqus.shortname: Insert the Disqus shortname
This image gives an overview about the Advanced and  Basic settings for LudwigDisqus in Modx. They can be found under System -> System Settings -> Namespace ludwigdisqus
Fig. 1: This image gives an overview about the Advanced and Basic settings for LudwigDisqus in Modx. They can be found under System -> System Settings -> Namespace ludwigdisqus

In order to use the Advanced Version, you need the Basic settings as well as the following settings in System -> System Settings -> Namespace ludwigdisqus -> Area seofriendly:

  • ludwigdisqus.seofriendly: YES
  • ludwigdisqus.api_key: Insert the Disqus API Secret Key

Set Access Permission for template variable

This Extra created a template variable (tv) called disqus in LudwigDisqus category. In order to allow your template to use this tv, click the Template Access tab where you can choose which template(s) can actually use it.

Integration into your template

Open your template and insert [[$disqus]] after [[*content]]. That's it!

Using Disqus in your Articles

As described before, I created the template variable disqus. If you create a new document, you have the opportunity to activate this plugin by using the tv. The comment system is deactivated by default and you have to activate it for each article/document.

Import data

If you want to use the Advanced Version of this Extra, you have to import all the data from Disqus. You have the following possibilities:

  • Use this snippet:
  • Use a CronJob that updates your database regularly

Cronjob

Cron is a utility that allows tasks to be automatically run in the background at regular intervals by the cron daemon. Furthermore, Crontab is a file which contains the schedule of cron entries to be run and at specified times. In order to update your local disqus database with the latest comments and threads, I prepared a file called ludwigdisqus_cronjob.php that can be use by crontab. The optimal way is to run this service as user www-data, which can be done in the following way:

  1. sudo crontab -u www-data -e

A crontab file has five fields for specifying day , date and time followed by the command to be run at that interval. Add the following line to this file in order to run the database update script every hour:

  1. * * * * * /usr/bin/php -f /var/www/modx/core/components/ludwigdisqus/model/ludwigdisqus_cronjob.php > /dev/null 2>&1

After making changes to your crontab file, you will need to restart the appropriate cron service. The command line sequence to achieve this is as follows:

  1. sudo service cron restart

I also implemented a MODX System Setting to activate or deactivate this service by using MODX. Go to System -> System Settings -> Namespace ludwigdisqus -> Area seofriendly and change the following option ludwigdisqus.use_cronjob to YES.

Development Documentation

Here you can find some background information about this Extra.

System Settings

I created some System Settings for the LudwigDisqus Extra. They are found in System -> System Settings, and can easily be edited and changed. The following table gives an overview about the used settings.

KeyNamespaceAreaDescription
ludwigdisqus.activatedludwigdisqusgeneralActivate or deactivate the LudwigDisqus Extra
ludwigdisqus.versionludwigdisqusgeneralThe Version of the Extra
ludwigdisqus.shortnameludwigdisqusgeneralA shortname is the unique Disqus identifier
ludwigdisqus.seofriendlyludwigdisqusseofriendlyActivate or deactivate the SeoFriendly function
ludwigdisqus.api_keyludwigdisqusseofriendlyThis is the Secret Key from the created Disqus API Application
ludwigdisqus.fetch_limitludwigdisqusseofriendlyBy default Disqus API limits returning collections by 25 records per requests. You can set it up to 100 records per request.
ludwigdisqus.force_db_rebuildludwigdisqusseofriendlyTruncate the local discus database and import the content again from Disqus
ludwigdisqus.use_cronjobludwigdisqusseofriendlyActivate or deactivate the crontab function after you installed crontab script

Chunk variables

Important Disqus variables that are used in JavaScript:

  • disqus_shortname: Is the shortname in the ludwigdisqus settings
  • disqus_identifier: Is the MODX document ID
  • disqus_title: Is the MODX pagetitle tag

LudwigDisqus using Microdata

Formats like RDFa or Microformats are a form of semantic mark-up designed to describe elements on a web page. Which means, that each item type through the use of associated attributes is defined. I optimized the LudwigDisqus Extra for the Item Type schema.org/Comment. An example is shown in the next lines:

  1. <div itemscope itemtype="http://schema.org/Comment">
  2.    <span itemprop="creator">Max Mustermann</span> said: <span itemprop="text">WOOW!</span>
  3.    <time itemprop="dateCreated" content="2014-10-09" datetime="2014-10-09T01:04" title="Oct 09, 2014 01:04">5 days, 23 hours ago</time>
  4.    <span itemprop="interactionCount" value="UserLikes:0">0 Likes</span>
  5. </div>

Schema.org is a universally supported vocabulary extension by Google, Microsoft and Yahoo! for mark-up languages such as Microdata. It is designed to make the lives of webmasters easier, by offering one standardized mark-up understood by all the major search engines. You can validate your Page by using Google's Structured Data Testing Tool, Yandex Structured data validator or Facebook's Open Graph.

Source Code

All source code can be seen on Github.

Build from GitHub

At first you have to clone the code from GitHub:

  1. cd /tmp
  2. git clone --recursive https://github.com/MoonMaker/modx.git
  3. cd modx/Disqus/_build/

Change your modx path in build.config.php:

  1. nano /tmp/modx/Disqus/_build/build.config.php
  1. define('MODX_BASE_PATH', '/var/www/modx/');

Now you are able to build the schema:

  1. php -f /tmp/modx/Disqus/_build/build.schema.php

The last step is to build the transport package and to change the package owner:

  1. php -f /tmp/modx/Disqus/_build/build.transport.php
  2. chown -R www-data:www-data /var/www/modx/core/packages/ludwigdisqus*

The Extra package will be generated in /var/www/modx/core/packages. You can use the MODX Package Manager to install it.

Well, what do you think?

Ruukki said
Does not work Seo optimization API introduced ?
Ruukki said
Is it possible the guests to write comments ?
Ruukki said
Sorry for bad English.
???? ?????? said
test
???? ?????? said
reply test
???? ?????? said
Works Great! Thank u :) Tickets for modx sucks :))
enrievedo said
I changed the language in my admin panel (Disqus site) but is no reflected in my site, is still in the default language "english". How can I change it?
Amit Patil said
OK i just implemented it and found this page helpful https://help.disqus.com/customer/portal/articles/472007-i-m-receiving-the-message-%22we-were-unable-to-load-disqus-%22
Comments powered by LudwigDisqus for ModX