A disqus plugin for Jekyll.

Jekyll Discussion

The Jeyll Disqussion plugin uses the Ruby Disqus API to retrieve post data from Disqus.


  1. Add this repo as a submodule to your Jekyll Git project:

     git submodule add [email protected]:jaredwolff/jekyll-disqussion.git _plugins/jekyll_disqussion/

    Note: You can also copy jekyll_disqussion.rb to _plugins/

  2. Add the following fields to your _config.yml:

       api_key:      <your API key here>
       api_secret:   <your API secret here>
       forum_name:   <your forum name here>
       limit:        3

    You can adjust limit to process a different number of posts.


Disqus Comments

Note: currently this plugin only has one piece of functionality. You can only recieve the latest posts from your forum.

Simply include the {% disqus_comments %} tag where you want the comments.

<div class="side-bar-headline">Recent Comments</div>
  {% disqus_comments %}

Every piece of html has it's own class and is completely styleable.

<div class="side-bar-recent-comments text-left">
    <div class="side-bar-headline">
        Recent Comments
    <ul class='disqussion-ul'>
        <li class='disqussion-li'>
            <div class='disqussion-img'>
                <img src=''>
            <div class='disqussion-content'>
                <div class='disqussion-user-name'>
                    <a href=''>Jared Wolff</a>
                <div class='disqussion-thread-link'>
                    <a href=''>this is an amazing comment which has lots of words...</a>

Classes include:

  • disqussion-ul -- the surrounding unordered list
  • disqussion-li -- each list item
  • disqussion-img -- the avatar image
  • disqussion-content -- the div containing the user-name and thread-link/description
  • disqussion-user-name -- the username of the post
  • disqussion-thread-link -- the link and description of the post

Here is an example of how i'm styling disqus_comments

/* Disqussion */

.disqussion-ul {
  list-style: none;
  margin: 0 0 10px 5px;

.disqussion-img {
  margin: 5px;
  float: left;
  width: 50px;
  height: 50px;

.disqussion-content {
  margin: 0 0 0 2px;
  width: 210px;
  float: right;

.disqussion-li {
  margin: 2px 0 2px 0;
  height: 60px;

The result? See below for yourself:


Have an idea to make it better? Feel free to share! (Pull requests are encouraged.)


See included license file.