Recently, I noticed there was an Disqus issue with mobile template. I wrote my own Blogger template (the template in the post is super outdated) and didn't care about mobile, although 3.5% of visitors are mobile users. Every day, there is a few posts with
Few days ago, I simply set desktop theme as mobile theme after I saw the comments were from Blogger's commenting system, so Disqus comments will show up and I don't have to update Blogger layout widget for mobile devices. Going through those XML without proper official documentation is a pain-in-ass and unfair guessing game, you will see an example later in this post.
I wasn't aware that even Disqus loaded, it didn't really work properly due to mis-configuration. On Disqus, the query part is part of identification of a thread and that would be a problem since a not-too-old-with-slug-feature blogging platform most likely wouldn't require to use something like
So, for mobile users,
If you use automatic method when you migrate to Disqus, which Disqus edits the template for you, then you should be fine. However, if you write your own template from scratch and add XML and JavaScript for Disqus by hand, you may want to double-check. I also suspect Blogger's ccTLD resolution might also cause same issue. If you live in USA and you may not even be aware of it since it's always be
Be sure to append
The quickest way is to set
Just for the record, the old Disqus method's code looks like:
?m=1
in my daily report, they had been under my radar for very long time.Few days ago, I simply set desktop theme as mobile theme after I saw the comments were from Blogger's commenting system, so Disqus comments will show up and I don't have to update Blogger layout widget for mobile devices. Going through those XML without proper official documentation is a pain-in-ass and unfair guessing game, you will see an example later in this post.
I wasn't aware that even Disqus loaded, it didn't really work properly due to mis-configuration. On Disqus, the query part is part of identification of a thread and that would be a problem since a not-too-old-with-slug-feature blogging platform most likely wouldn't require to use something like
?p=###
to identify a post which visitor is requesting.So, for mobile users,
?m=1
would be a problem as well as some tracking query which are appended after post URLs.If you use automatic method when you migrate to Disqus, which Disqus edits the template for you, then you should be fine. However, if you write your own template from scratch and add XML and JavaScript for Disqus by hand, you may want to double-check. I also suspect Blogger's ccTLD resolution might also cause same issue. If you live in USA and you may not even be aware of it since it's always be
.blogspot.com
for you unless you use custom domain as I do, then ccTLD wouldn't cause you any trouble.Be sure to append
?m=1
to a post which has comments, check if those comments are loaded. If it says 0 comments, then it's time to fix your template.The quickest way is to set
disqus_url
:<script>
var disqus_url = "<data:blog.canonicalUrl/>";
if (!disqus_url.length) {
disqus_url = "<data:blog.url/>";
}
</script>
or simply use the following in posts loop:<script>var disqus_url = "<data:post.canonicalUrl/>";</script>
I adopted the code from Disqus' code, Blogger's documentation has no mention of canonical link. Before I checked out Disqus' code, I used// needs jQuery
window.disqus_url = $('link[rel=canonical]').attr('href');
// and another possible method
window.disqus_url = location.protocol + '://[THE_BLOG_DOMAIN]' + location.pathname;
I think Disqus should look up if there is a canonical in presence before it uses window.location.href
:
<link rel="canonical" href="http://example.com/">
Just for the record, the old Disqus method's code looks like:
<!-- +disqus -->
<a class='dsq-comment-count comment-link commentslink' expr:href='data:post.canonicalUrl + "#disqus_thread"'>View Comments</a>
<!-- -disqus -->
<!-- +disqus -->
<div id='disqus_thread'/>
<div id='disqus_post_title' style='display:none;'><data:post.title/></div>
<div id='disqus_post_message' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>
var disqus_url = '';
var disqus_title = document.getElementById('disqus_post_title').innerHTML;
var disqus_message = document.getElementById('disqus_post_message').innerHTML;
</script>
<script src='http://disqus.com/forums/[DISQUS_SHORTNAME]/embed.js' type='text/javascript'></script>
<noscript>Please enable JavaScript to view the <a expr:href='"http://disqus.com/?ref_noscript=[DISQUS_SHORTNAME].disqus.com" + data:post.url'>comments powered by Disqus.</a></noscript>
<a class='dsq-brlink' expr:href='"http://disqus.com"'>blog comments powered by <span class='logo-disqus'>Disqus</span></a>
<!-- -disqus -->
<!-- +disqus -->
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script src="http://disqus.com/forums/[DISQUS_SHORTNAME]/get_num_replies.js' + query + '" type="text/javascript"></' + 'script>');
})();
</script>
</b:if>
<!-- -disqus -->
The new method's code as follows, it's much cleaner, but not working for my template, it seems to have specific requirements on element IDs or that sort of things.
<b:includable id="main">
<script type="text/javascript">
var disqus_shortname = '[DISQUS_SHORTNAME]';
var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = "<data:blog.url/>";
}
var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
</script>
<b:if cond="data:blog.pageType == "item"">
<style type="text/css">
#comments {display:none;}
</style>
<script type="text/javascript">
(function() {
var bloggerjs = document.createElement('script');
bloggerjs.type = 'text/javascript';
bloggerjs.async = true;
bloggerjs.src = 'http://'+disqus_shortname+'.disqus.com/blogger_item.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
})();
</script>
</b:if>
<style type="text/css">
.post-comment-link { visibility: hidden; }
</style>
<script type="text/javascript">
(function() {
var bloggerjs = document.createElement('script');
bloggerjs.type = 'text/javascript';
bloggerjs.async = true;
bloggerjs.src = 'http://'+disqus_shortname+'.disqus.com/blogger_index.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
})();
</script>
</b:includable>
0 comments:
Post a Comment