wbAMP Disqus comments

Overview

Accelerated Mobile Pages do not allow external javascript, and so using javascript-based commenting system such as Disqus may appear to be a challenge. However AMP being open-source and allowing custom components to be built fairly easily, Disqus was able to add support for AMP early on.

wbAMP lets you take advantage of Disqus AMP support so that visitors can view comments on the AMP version of a page, but also post new comments just as they would on the standard version of that page.

Comments are attached to the original page: it means a comment posted on the AMP page will immediately appear on the standard HTML version, and vice-versa. Commenting on the AMP page is exactly the same as commenting on the standard HTML page.

Using Disqus on AMP requires to use an iframe, a small html file that will be included (automatically) in your AMP pages, and Disqus will use it to load the comments. Due to AMP specification, this small HTML file must be:

• served over HTTPS
• hosted on another domain than the main site

wbAMP will create that file for you - we call it the Disqus relay file, but you do have to copy that file to a location where it can be served properly. Please see below for more details.

Compatibility

wbAMP Disqus support has been designed to work out of the box when you integrated Disqus on your site by either:

• using the Official Joomla Disqus plugin, recommended by Disqus and created by JoomlaWorks (instructions on this page)
• using the Disqus Universal Code, as found on this page.

If you use one of these methods, wbAMP can automatically make sure Disqus displays the same comment on a given page and its associated AMP version.

If you use some custom code to integrate Disqus on your site, you may have more work to do, please see below the Other Disqus implementation support section.

Settings and setup

The setup procedure is as follow:

1. Enter your Disqus shortname in the corresponding input field, then save wbAMP configuration. When configuration is saved, wbAMP will automatically create your Disqus relay file.
2. Copy the Disqus Relay file where it should be hosted. See next paragraph for more details.
3. Enter the full URL of where you are hosting this file into the Endpoint field. Include https:// and domain name.
4. Set Enabled to Yes and save again configuration.

From that point on, the Disqus comments area will be displayed on the AMP version of any page where it is displayed on the standard HTML version.

The Disqus relay file is only modified when you change your Disqus shortname. You can save settings in wbAMP as many times as you want, you do not need to update the Disqus relay file. This is only required if you change your shortname.

Hosting the Disqus relay file

The Disqus relay file is a small html file loaded inside an iframe on your AMP pages. It is specific to your Disqus shortname. It allows loading of Disqus javascript, which can't be done directly inside AMP pages. For security reasons, this iframe must be loaded from another domain than your site, and over HTTPS.

The Disqus relay file

Whenever you save wbAMP configuration, wbAMP will create/update a copy of the Disqus relay file needed to run Disqus on your AMP pages. Your copy of this file is stored as:

/media/plg_wbamp/wbamp_disqus.html

To comply with AMP requirements and make the Disqus comments work, you now need to make that file available over the internet.

Where to host it?

There are multiple ways to host the file, what you have to ensure is that HTTPS is used, and this is not on your own site domain. Assuming that your site is at https://www.example.com, options are:

• create another subdomain, such as https://amp.example.com
• use another domain entirely: https://www.example.net or https://www.anotherdomain.com

Many hosting company will let you host multiple website on one account, so using a subdomain might be a simple way to comply.

You may also already own another, unrelated website. That's OK, just copy the file on that other website.

Another good option is to use a free CDN service, such as Cloudflare. This is of course particularly convenient if you already use them. You only need to add another subdomain, and get a free SSL certificate for that subdomain.

Finally, a possible solution is also to use something like DropBox, GoogleDrive or OneDrive to make the file available over the internet. Although this is technically fine, such setup may not be fast enough, and may introduce delay in displaying comments on your pages. Should be fine for testing though.

Remember that regardless of the solution you choose, you must always use HTTPS.

Other Disqus implementation support

If you are not using the standard JW Disqus plugin on your site, you can still enable Disqus on your AMP pages. How this can be achieved depend on how you integrated Disqus on your site.

wbAMP does not technically need to know which solution you used to integrate Disqus on your site; however, it needs to know which identifier your implementation is using for a given page. Disqus uses a unique identifier per page, so that they can store and retrieve comments attached to each page.

If your wbAMP and your Disqus implementation do not compute the same identifier for a page, then Disqus will not be able to understand that the AMP page and the standard HTML are in fact the same, and all comments should be displayed on both.

wbAMP uses normally the same identifier for a page as the Disqus Universal Code setup. If your implementation does differently (only your developer can tell), wbAMP lets you modify the identifier on the fly. This requires PHP coding, and so the people who implemented Disqus on your site are the ones you need to talk to.

Here is a sample of how this on the fly modification of the page identifier can be done. Only your developer can tell which pageId to use though.

<?php

ShlHook::add(
    'wbamp_disqus_identifier',
    function ($pageId, $contentRecord, $currentData)
    {
        $pageId = 'my_custom_disqus_id_' . $contentRecord->id;

        return $pageId;
    }
);

This code can be put inside a component or a plugin, but NOT in your template. Your template is not used when rendering an AMP page, and the code would not be loaded. It can however be included in the wbAMP template, or rather a copy of the wbAMP template, so that your changes are not deleted upon next update.