How to make Blogger Mobile working with Disqus

If you are blogging on Blogger and you opted to replace the static native commenting box with the interactive and sexy Disqus discussion thread, then you probably know that the two work very nicely together in the desktop version of your blog, but as soon as you go mobile Disqus disappers.

Sometimes ago, Blogger decided to offer their users the possibility to have a mobile version of their blog just out of the box, with no special configuration required. Mobile users pointing their browser to a mobile-enabled blog will just land to the mobile-friendly version of the site, as simple as that. The trick is a script running while loading the page that catch from the user agent the device model name and in the case of a handheld device, it adds a ?m=1 at the end of the url to have the proper redirection.

So far so good, I would say, but no configuration required also means no possibility to make any customization to the template and this is where the conflict with Disqus arises.

When you install Disqus in Blogger, you are just adding another widget to your layout. This is a simple HTML/Javascript widget that is actually hiding the original comment div and adding to the DOM the Disqus Thread with all its frills. When your desktop layout is converted in the mobile version only a few standard widgets are ported and obviously the Disqus one is dropped.

This is the solution

It looks like a showstopper, but there is a quite simple way out to force a widget, even if it is not a standard one, to be included into your mobile version. Of course Blogger doens't guarantee that your custom widget will render and work on smartphones, but if you configure Disqus to use the mobile theme for handheld you won't have any problem.

Blogger developers added a new property to the widget object; the mobile property can assume three different values: 'yes', 'no' and 'only'. For non-standard widget, the mobile attribute is set to no by default, but actually nothing is preventing an advance user from editing the HTML template and setting the property to 'yes'. In practice, you go to modify the HTML of your template, you save a complete backup first, you expand widget template and look for the Disqus box. The only required change is to add the mobile='yes' line as highlighted in the code snippet below.

<b:widget 
    id='HTML3'
    locked='false' 
    mobile='yes' 
    title='Disqus for unico-lab'
    type='HTML'
>

Of course, we all hope that Disqus will change their widget to include this line automatically with no need of editing for the final user.

If you have a custom template...

The procedure described so far can be used more or less straightforward if you have a standard template and you use the Disqus widget. If you have a heavily customized template like the situation reported by DarkUFO in this comment, you need some more hacking to get Disqus on mobile.

When helping DarkUFO,  my approach was to take out from the template all the scripts related to Disqus and put them all together into a new HTML/Javascript widget. After that, I've modified the template adding the mobile='yes' property to the just added widget.


In case you need some help with this hacking, try asking for some help here below.

Known issues

Everything working? Not really, there are still a few issues I've found and that need to be fixed possibly by some other smart developers.

1. The first one is that the hide and replace mechanism of Disqus is not working when displaying the front page in the mobile version. This is actually not too much of a problem because when you click on the "# comments" links you are anyway redirected to the correct blog post but not to the comment section and the number of reactions is missing.

2. The second one is a bit more tricky and is with the "Link to comment" included into the email users are receiving with new comments. This short link is pointing to something like:  

http://your-blog.blogspot.com/your-post.html#comment-123456

and when you click on it from your phone, Blogger will append the "?m=1" to the end and you will land to the desktop page. In fact the correct link should be something like

http://your-blog.blogspot.com/your-post.html?m=1#comment-123456

with the mobile parameter in between the post URL and the anchor text. This is very likely a problem that should be fixed by Blogger and not by Disqus and tthat's why I've submit a question to the blogger help forum you should consider to support if you are having the same issue.

If you find this helpful, share it!