Showing Disqus Comment Counts

Since Disqus comments are not saved in your site's database it's hard to get an accurate count of the number of comments associated with a post. Thankfully Disqus created a little script, which we added to Storytime, to help with that.

Include the following partial on wherever page you'd like to show a one or more post's comment count (i.e. the blogs/posts page):

<%= render "storytime/application/storytime/disqus_comment_counts" %>

For each post, be sure to include either a data-disqus-identifier or data-disqus-url on the <span> or <div> element that you'd like to add comment counts to.

<span class="disqus-comment-count" data-disqus-identifier="<%= blog_post.id %>"></span>

All Together Now

The following example shows a list of blog posts with Disqus comment counts for each post.

<!-- app/views/storytime/blogs/posts.html.erb -->
<%= render 'storytime/blog_header' %>

<div class="container">
  <div class="row">
    <%= render partial: "storytime/posts/blog_post", collection: @posts %>
  </div>
</div>

<%= render "storytime/application/storytime/disqus_comment_counts" %>

<!-- app/views/storytime/posts/_blog_post.html.erb -->
<div class="col-md-12">
  <div class="media blog-post post">
    <%= link_to storytime.post_path(blog_post), class: "featured-image pull-left" do %>
      <%= image_tag blog_post.featured_media.file.url, class: "media-object" unless blog_post.featured_media.nil? %>
      <span class="post-info">
        <h6 class="right-separator"><%= blog_post.published_at.strftime("%b %d, %Y") %></h6>
        <h6>
          <span class="disqus-comment-count" data-disqus-identifier="<%= blog_post.id %>"></span>
        </h6>
      </span>
    <% end %>
      <div class="media-body">
      <div class="media-heading">
        <h6 class="by">by <%= blog_post.author_name %></h6>
        <h5 class="underline-after title"><%= link_to blog_post.title, storytime.post_path(blog_post) %></h5>
      </div>
      <p>
        <%= blog_post.excerpt %><br /><%= link_to "Read more", blog_post, class: "read-more" %>
      </p>
    </div>
  </div>
</div>