Browse code

Refactored inclusion of disqus script

- Added ARIA setting `aria-live="polite"` to comment output
- Removed duplicate <div id="disqus_thread"> from page/post templates
- Moved blocking JavaScript loading to the end of the document body.
- Merged JavaScript code for index and pages/posts using conditionals
- Moved global JavaScript disqus variables into the anonymous function to stop pollution of global namespace

Frederic Hemberger authored on 21/09/2011 at 11:37:59
Showing 6 changed files
1 1
new file mode 100644
... ...
@@ -0,0 +1,22 @@
0
+{% comment %} Load script if disquss comments are enabled and `page.comments` is either empty (index) or set to true {% endcomment %}
1
+{% if site.disqus_short_name and page.comments != false %}
2
+<script type="text/javascript">
3
+    (function () {
4
+      var disqus_shortname = '{{ site.disqus_short_name }}';
5
+      {% if page.comments == true %}
6
+        {% comment %} `page.comments` can be only be set to true on pages/posts, so we embed the comments here. {% endcomment %}
7
+        // var disqus_developer = 1;
8
+        var disqus_identifier = '{{ site.url }}{{ page.url }}';
9
+        var disqus_url = '{{ site.url }}{{ page.url }}';
10
+        var disqus_script = 'embed.js'
11
+      {% else %}
12
+        {% comment %} As `page.comments` is empty, we must be on the index page. {% endcomment %}
13
+        var disqus_script = 'count.js'
14
+      {% endif %}
15
+
16
+      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
17
+      dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
18
+      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
19
+    }());
20
+</script>
21
+{% endif %}
... ...
@@ -1,13 +1 @@
1
-<div id="disqus_thread"></div>
2
-<script type="text/javascript">
3
-  var disqus_shortname = '{{ site.disqus_short_name }}';
4
-  var disqus_identifier = '{{ site.url }}{{ page.url }}';
5
-  var disqus_url = '{{ site.url }}{{ page.url }}';
6
-  //var disqus_developer = 1;
7
-  (function() {
8
-    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
9
-    dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
10
-    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
11
-  })();
12
-</script>
13 1
 <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
... ...
@@ -9,6 +9,7 @@
9 9
     </div>
10 10
   </div>
11 11
   <footer>{% include footer.html %}</footer>
12
+  {% include disqus.html %}
12 13
   {% include google_analytics.html %}
13 14
   {% include google_plus_one.html %}
14 15
   {% include twitter_sharing.html %}
... ...
@@ -27,7 +27,7 @@ layout: default
27 27
 {% if site.disqus_short_name and page.comments == true %}
28 28
   <section>
29 29
     <h1>Comments</h1>
30
-    <div id="disqus_thread">{% include post/disqus_thread.html %}</div>
30
+    <div id="disqus_thread" aria-live="polite">{% include post/disqus_thread.html %}</div>
31 31
   </section>
32 32
 {% endif %}
33 33
 </div>
... ...
@@ -17,10 +17,10 @@ single: true
17 17
     {% endunless %}
18 18
   </footer>
19 19
 </article>
20
-{% if site.disqus_short_name and page.comments != false %}
20
+{% if site.disqus_short_name and page.comments == true %}
21 21
   <section>
22 22
     <h1>Comments</h1>
23
-    <div id="disqus_thread">{% include post/disqus_thread.html %}</div>
23
+    <div id="disqus_thread" aria-live="polite">{% include post/disqus_thread.html %}</div>
24 24
   </section>
25 25
 {% endif %}
26 26
 </div>
... ...
@@ -3,35 +3,24 @@ layout: default
3 3
 ---
4 4
 
5 5
 <div class="blog-index">
6
-{% assign index = true %}
7
-{% for post in paginator.posts %}
8
-{% assign content = post.content %}
9
-  <article>
10
-    {% include article.html %}
11
-  </article>
12
-{% endfor %}
13
-<nav role="pagination">
14
-  <div>
15
-    {% if paginator.next_page %}
16
-      <a class="prev" href="{{paginator.next_page}}">&larr; Older</a>
17
-    {% endif %}
18
-    <a href="/blog/archives">Blog Archives</a>
19
-    {% if paginator.previous_page %}
20
-    <a class="next" href="{{paginator.previous_page}}">Newer &rarr;</a>
21
-    {% endif %}
22
-  </div>
23
-</nav>
24
-{% if site.disqus_short_name %}
25
-<script type="text/javascript">
26
-    var disqus_shortname = '{{ site.disqus_short_name }}';
27
-    (function () {
28
-      var s = document.createElement('script'); s.async = true;
29
-      s.type = 'text/javascript';
30
-      s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
31
-      (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
32
-    }());
33
-</script>
34
-{% endif %}
6
+  {% assign index = true %}
7
+  {% for post in paginator.posts %}
8
+  {% assign content = post.content %}
9
+    <article>
10
+      {% include article.html %}
11
+    </article>
12
+  {% endfor %}
13
+  <nav role="pagination">
14
+    <div>
15
+      {% if paginator.next_page %}
16
+        <a class="prev" href="{{paginator.next_page}}">&larr; Older</a>
17
+      {% endif %}
18
+      <a href="/blog/archives">Blog Archives</a>
19
+      {% if paginator.previous_page %}
20
+      <a class="next" href="{{paginator.previous_page}}">Newer &rarr;</a>
21
+      {% endif %}
22
+    </div>
23
+  </nav>
35 24
 </div>
36 25
 <aside role=sidebar>
37 26
   {% if site.blog_index_asides.size %}