As of 2016-02-26, there will be no more posts for this blog. s/blog/pba/
Showing posts with label Disqus. Show all posts

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 ?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 + &quot;#disqus_thread&quot;'>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='&quot;http://disqus.com/?ref_noscript=[DISQUS_SHORTNAME].disqus.com&quot; + data:post.url'>comments powered by Disqus.</a></noscript>
<a class='dsq-brlink' expr:href='&quot;http://disqus.com&quot;'>blog comments powered by <span class='logo-disqus'>Disqus</span></a>

<!-- -disqus -->

<!-- +disqus -->

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <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 == &quot;item&quot;">
    <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>

I had put a link to Dynamic Views (simply append /view/ in URL) on top navigation for a very long time. Dynamic Views isn't too bad as an alternative way to view a blog, if you have a nice computer, it's kind of resource hug in my opinion. Anyhow, I'd like readers to have option to choose when it's in arm's reach already.

But two days ago, I noticed it now shows comments and a comment form. I may be wrong since I don't use Dynamic Views, but I don't recall they were in Dynamic Views before, a popup window or something was the way to access comments before.

I went to change Comment Location to Hide, I thought it did what it meant, hiding the comments. And it did hide the comments section, but it also disallowed commenting. This caused my blog showing no comment section for almost two days until I just found out moments ago.

Why I mention disallow when it seems to be implied as you choose to hide comments? Because I use Disqus and I enable the comment synchronization, so the comments will be posted back to Blogger's comment system from Disqus' for backup purpose.

The first problem is it hides not only the comments but also the comments in normal Blogger layout, it's a simple template design issue. I can bypass it, but the problem is the Hide means Disallow, so Disqus can no longer synchronize back the comments. I have no choice to turn it back on, if I want to backup comments.

Why in the first place I do not want comments to show up in Dynamic Views? Because I can only make comments synchronize back to Blogger, not the other way around, or duplex. Therefore, I must not allow regular readers to have chance to access Blogger comment form.

If you want to suggest why not just enable Disqus in Dynamic Views? Because we can't, maybe in future. Dynamic Views is a unique interface and I totally agreed with that, but it should be little more flexible on option on/off.

There may be a way to get around, I think you can add Disqus embed code in each post to have it, I saw some project for having Gist embedded in Dynamic Views. However, it's utterly impractical as how much effort you must to put in for Disqus to show up.

I tried to add a message to Comment Form Message to ask people not to comment in Dynamic Views, that setting doesn't work for Dynamic Views, same as Embedded/Full page/Popup window, comments always embedded in the post.

Anyway, since I have no control for comment section in Dynamic Views, I decided to take that link down, even though people can still append /view/ to access it.

I have to say, I hardly see any blogs use Dynamic Views. Not even Google's blogs. It seems Blogger team developed a product doesn't gain much utilization. Much same to Blogger Stats, but in the value bloggers give to it. The worst part is not the lack of customization, but no option to turn them off completely.

Disqus 2012 was first unveiled in April, then went available to all websites in June. Some features are still kept untouched, but there are few changed or even removed, particularly the appearance styles. The following list notes some noticeable changes:

  • No more Custom CSS: although Appearance Tweaks says there is a custom option via HTML element style, but its not there. You can only choose from auto, or two fonts and two colors for text. Either you like it or not, thats all you got. This is the most significant issue, probably only, for me. In my blog, the text color is #aaa not #fff. The reason I dont use latter is very obvious, pure white color looks too strong on this background color. Unfortunately, Disqus does not inherit #aaa. Another problem is the font, the default sans or sans-serif just do fit into my blog. If we still had custom CSS option, at least, I could override.

  • No more detail Appearance settings: threading, depth, pagination, avatar size, date time style, etc. They are all gone. I feel Disqus wants to have a unified style across all websites. I recall I read a blog post somewhere complaining about the old Disqus tons of customizations. The blogger claims that would confuse readers who get used to other websites Disqus settings. Well, to that blogger, see what you have done, now we have none!

  • No more Trackback: not sure if anyone actually used this. I think you need to copy that URL and enter into your blogging platform manually if you are linking to a post which uses Disqus, right?

  • Up/down-vote option always: aka. the old Like button. There is no option to turn it off, but I like the voting options. This suits me well, let readers rate!

  • Discovery: this must be one of major features in Disqus 2012. It provides a related content list, so you can reduce external widget/gadget by using this. Also a way to make money by having promoted content alongside your related list. I feel this feature is still too new and somewhat problematic and premature. For example, the related content list seems to be very static and you dont have option to change the list size. Its been only two months to the general public, still too early to give final judge.

  • Syntax highlighting: if you wrap code in pre/code block, there is syntax highlighting enabled. Yes, Disqus is programming blogger friendly, hooray! Not sure if old Disqus has this feature, but dont dream that you can switch style to Zenburn or anything. That would only be a fantasy when you cant even change the style of comments.

  • Threaded and depth is 4: no flat threading and since we dont have threading setting, Disqus has chosen a number for us, thats 4 levels. Back in March, I even added an option because of unlimited threading. I love threading, but itd become an issue when too many comments and depth. Now, the depth is decided by Disqus, I see it as a positivity since I have no control over it and can only accept it. But dont worry, the relation between comments are not lost, for comments at forth depth, there is an arrow symbol indication of which comment is replied to.

  • iframe or no iframe: Disqus 2012 uses iframe and that comes with a price, the old Disqus creates HTML elements within the document you include the embedding script. It could be fine even if we dont have appearance settings, you can use CSS of your page to override, if the comments are not loaded within iframe.

  • URL#fragment to comment is broken: if I recall correctly, when you get a notification about a new comment, you would be brought to the comment if you click the link in email. Now, it wont bring you there. Another problem with iframe.

    PARTIALLY FIXED, as of 2013-02-01T23:00:19Z, I noticed its sort of fixed. Disqus now can guide you to correct comment with the link you get from email notification. For example, you can see my comment1 in this post is scrolled into view after the page loads. I think they dealt with the issue using load event, only does one; if locations #fragment changes again as if one click on link in someone comment, which links to another comment in same page, you wont be brought to that comment. So, its basically still bugged.

In my opinion, Disqus 2012 is a good improvement, though not everyone is happy with it, primarily about the lack or removal of options. Keeping things simplefor Disqus, itselfis nice, but over-doing isnt. Fortunately, the old Disqus is still available.

[1]/2010/05/jquery-plugin-jk-navigation.html#comment-79622690

Hold your congratulation line, don't get too excited for me.


It may look amazing, reaching one thousand pageviews a day. In fact, the record seems to be 1,056 pageviews when one post got into reddit.

You can see there is a significant increase in last few days, that's when I made Disqus load with page, instead of load by a button click. I wanted Disqus Discovery, to be more precise, the related content since I had removed related posts. But it really came with a price, a bloated pageviews.

There were a lot of http://disqus.com/embed/comment/ referrers:


Unfortunately, it's not like viewers click on related content and read another post of mine. Somehow, embed.js requests the page and more than once, sometimes:


I also checked on other website which has Discovery shown, same issue. If Discovery isn't shown, this won't happen. There must be a bug, because there is no need to load the page more than once. Well, it shouldn't be even once, actually. I can't really think of any reason for this.

Right now, I have reverted to button-loading Disqus. It's not worth to bother readers' browser to load unnecessary stuff. Disqus still loads a lot of stuff.

I recently discovered you can have special @mentions in Disqus comments while I was reading comments on some website. Here is a screenshot of an example I made with comments on my post:


I like this feature, though it might not be very helpful to me, because that's same reason why I only discovered this by accident almost one year later. I am sure some of you who have commented on Disqus system hadn't yet known about this feature.

The reason of being unknown to me is I reply to the comment with threading, the major feature I need. Since I directly reply to the comment, my comment will be placed below the comment with indentation. It is crystal clear that whom I am talking to. I don't even need to write down the commenter's name, I only need to refer to the person as you. Hence, I never knew about this and I had unsubscribed from Disqus' blog long ago until the comment with that @mentions I just read.

If Blogger's old flat commenting system had this feature, I probably wouldn't need to switch to Disqus. As I mentioned in previous post, threading is an important feature to me.

Although @mentions does not have much significances in threading system, but it's always to have a good feature like this. You may still need to refer to multiple previous commenter.

Another good add-on on this feature is the email alert, you will receive a notification when you get mentioned. This may be helpful when you forget to subscribe to the discussions (I am not entirely sure if there is an auto-subscription when you comment). You can turn if off in your profile settings:


I always like blogs or websites which use Disqus rather than the original or other third-party commenting systems. One reason is people can read all of my Disqus comments across websites in one place, although I don't like the designs of in-page pop profile frame or the profile page on Disqus. I often read someone's profile to see what they were talking. It is a good way to decide whether a commenter actually is a spammer or not.

The other reason is, again, the threading, that's default to all websites which uses Disqus and I love that very much.

I have thought about moving back to Blogger's commenting system many times, after all, Disqus is an external system. It may be gone one day, nothing last forever that I've learned over the years. If that's Blogger, then it really doesn't matter since your blog would be gone with Blogger. But if it's an external system, when their data is gone, your blog is still available but people will see holes, missing pieces like when your image hosting service has gone.

Disqus comments sync-back feature may help the issue a bit, but when threaded comments become flattened comments, they doesn't read as clear as before, confusion would be added among the comments.

However it seems that more and more impossible for me to do so. I am really stuck with Disqus, ain't I? But I am not complaining at all, I will keep using Disqus like a bajillian of years only if I can live that long.

Every time when I get an email notification from Disqus about new comments, I always feel happy and cheered. However...


I don't get many comments, the truth is the comments-over-post ratio is pretty low. (But I will not trade the commenting quality for quantity) So, this always punches me after I read the first line.

But hey, at least Disqus still does a great job, it does not let any spams slip into my blog. I don't need to worry readers read this spam comment which is written by a poor person who needs to spam others' website in order to get traffic.

A recent engage with a reader reminded me of a long existing issue with threaded comments.

Note

The content in this post is no longer reflecting the status of this blog. (2015-12-10T02:50:47Z)

I like threaded more than flat. They both have advantages and disadvantages. In threaded comments, as the depth increasing, you can lose in the discussion as you may have in flat comments.

One reason, I prefer threaded is because flat is very easy to get confused when read someones reply to another comment, which could be posted a few ahead. An experienced commenter would include the comment # or the commenters name, but its very problematic.

Another good reason to use threaded comments is some comments are asking for help, with threaded comments, I can reply/answer to the question specifically. The asker can clearly know which comment is my answer to his or her question. This is not something, you can work around with flat comments easily.

Threaded could easy resolve such confusion, but it has own issues. As discussion grows, it can still get complicated as flat comments do.

But another issue has bothered me more than the issue mentioned above, the layout. The comments section is a fixed width design, when there is too many levels of replies, the widths of deeper comments get smaller and smaller. Eventually, it becomes too narrow as you can see the comments in this post.

In Disqus, you can switch to flat or limit the maximal depth of comments. But I dont want to use flat or to have limit of depth.

Right now, there is a new option on top-left corner to switch between variable width and fixed width. It is not meant to resolve, but simply a workaround. I dont really have any good idea for a brilliant layout for threaded comments.

I took the chance to add a notice just before the comments, it says:

Please keep your comments relevant to this post and try not to comment something like only Thanks in entire comment, use the Like button of Disqus, instead. You can use some HTML tags if you like.

This was something I had wanted to do a year ago, finally, I added it. This blog is created with fixed width at 640px, I have to break it, which I dont like, but I dont have better way to deal with.

In the last few days, I got three Disqus comments and Disqus did email me about them. I use email notification to know if I have new comments.

Two of them were marked as spam by Gmail.

But both times, I have to see the comment on the post's page. First time, I was editing that post. Second time, moments ago, I scrolled down the home page to see how many posts I have published this month using the Archive dropdown list. I saw the post at the bottom has one comment, that's how I knew that comment.

The first case, that comment has six links, five to YouTube, one to Vimeo. It's a real comment, not a spam at all. The second comment, which has no links but only a simple question, "What is the table id?"

It's a real one, too. As I said before, spam detection isn't the solution, it's not fighting but avoiding the truth, which is we have lots of spam bombing us. It's like someone hates cockroach or mouse but this guys do kill them, he catches and moves them out of his house. But they keep coming back and breeding more and more. All the energy of this guy is used to move them out, silly.

These two incidents were not the first time. I had saved a few from spam folders a few times before and they were lucky. I currently have 450 over last 30-day period, so that's 15 spam emails a day. I guess I will clean/check up my spam folder every day from now on.

I now subscribe to Disqus comments feed of this blog. Just in case.

May I call myself by Spam Detection Victim if someday someone does want to give me one million dollars and Gmail put it into spam folder?

Google Webmaster Tools told me:

Performance overview

On average, pages in your site take 6.4 seconds to load (updated on Oct 31, 2010). This is slower than 83% of sites. These estimates are of low accuracy (fewer than 100 data points). The chart below shows how your sites average page load time has changed over the last few months. For your reference, it also shows the 20th percentile value across all sites, separating slow and fast load times.

http://4.bp.blogspot.com/-ddn_YW5Pl8I/T4faS3WuFRI/AAAAAAAADO8/myClQS47l8M/s800/chart.png

6.4 seconds?! Are you kidding me? Well, its not. My posts pages really take about that long to load. You might want to ask me, whats the problem with 6.4 seconds? Its not really long comparing to other blogs. Its not, but if you look at my page, you dont see any crap banners, icons, images. My blog is basically pure text only, except the images in post contents and two Google AdSense ad units. So, its too long to me.

I am pretty sure where I can cut the number down: Disqus!

https://farm5.staticflickr.com/4104/5212507835_8448c57ce2_o.png

If you scroll down, you will see Disqus is no longer loaded by default. You will need to click on that button to load comments. I also make related posts list loaded by user request, that helps a little, and I moved jQuery code into yjlv.js, request_count--. I know this is cheating in order to get low loading time.

Here is a diff for my template changes:

--- template.xml.orig       2010-11-28 08:11:25.000000000 +0800
+++ template.xml    2010-11-28 07:58:55.000000000 +0800
 -3,7 +3,7 
 <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
   <head>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
-      <title><data:blog.pageName/> &lt;&lt;&lt; $(<data:blog.title/>)</title>
+      <title><data:blog.pageName/></title>
       <b:else/>
       <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
         <title><data:blog.pageName/> &lt;&lt;&lt; $(<data:blog.title/> --page)</title>
 -26,8 +26,8 
     <data:blog.feedLinks/>
     <b:skin><![CDATA[]]></b:skin>
     <link href='http://www.yjl.im/css/yjlv.css?4' rel='stylesheet'/>
M#-    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
     <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+    <script src="http://www.yjl.im/js/yjlv.js?8"></script>
   </head>
   <body>
     <header id='blog-header'>
 -253,7 +253,12 
             </div>
             <footer>
               <b:if cond='data:blog.pageType == &quot;item&quot;'>
-                <div style='float:right;width:312px'>        Possibly (Definitely Not) Related Posts:        <div id='gas-results'/>      </div>
+                <div style='float:right;width:312px'>
+                                   <div>Possibly (Definitely Not) Related Posts:</div>
+                                   <div id='gas-results'>
+                                           <input type="button" value="Click to load related posts list" onclick='$.getScript("http://brps.appspot.com/gas.js")'/>
+                                   </div>
+                           </div>
               </b:if>
               <div class='post-footer-line post-footer-line-1'>
                 <span class='post-author vcard'>
 -312,11 +317,19 
             </footer>
             <b:if cond='data:blog.pageType == &quot;item&quot;'>
               <section id='post-comments'>
-                <h2>Comments</h2>
+                <h2><a expr:href='data:post.url + &quot;#disqus_thread&quot;'>Comments</a></h2>
                 <div id='disqus_thread'/>
-                <script type='text/javascript'> if (document.location.href.indexOf(&#39;/b/post-preview&#39;) == -1) $.getScript(&#39;http://yjlv.disqus.com/embed.js&#39;);</script>
-                <noscript>Please enable JavaScript to view the <a href='http://disqus.com/?ref_noscript=yjlv'>comments powered by Disqus.</a></noscript>
-                <a class='dsq-brlink' href='http://disqus.com'>blog comments powered by <span class='logo-disqus'>Disqus</span></a>
+                           <script>
+                           $(function(){
+                                   // If visitors are led to comments, then load comments automatically.
+                                   var href = document.location.href;
+                                   if (href.indexOf('#disqus_thread') >= 0 || href.indexOf('#comment-') >=0) {
+                                           $.getScript("http://yjlv.disqus.com/embed.js");
+                                           $('#comments-loader-button').remove();
+                                           }
+                                   });
+                           </script>
+                           <input type="button" id="comments-loader-button" style="width:620px;margin:10px;" value="Click to load comments or to write a comment" onclick='$.getScript("http://yjlv.disqus.com/embed.js");$(this).remove();'/>
               </section>
             </b:if>
           </article>
 -639,4 +652,4 
       </div>
     </footer>
   </body>
-</html>
\ No newline at end of file
+</html>

I added a small piece of code which will automatically load comments when visitors come via a link like .../post-title.html#disqus_thread or .../post-title.html#comment-1234567. Visitors will have no problems to read the comment.

Also, I made a change to posts page titles. I removed <<< $(YJL --verbose) from title because I saw this in my Stats page:

http://farm6.static.flickr.com/5201/5212521441_ae24c47be9.jpg

The last keyword "yjl table" made me do so. That visitor must found nothing what he or she was looking for. "yjl" matched on page title, search engines are just not smart as you and me. If I was that visitor, I would not even click on the result since its clear that matched part is useless.

We will see if next check (after 2010-11-27T08:47:50-07:00) will resullt a significant drop on loading time, I believe it will.