inlineDisqussions

Comments are !important, they create a discussion between the author and the readers. Some comments are just simple feedback, some can help clarify a vague point, some comments can even offer a totally different approach for solving the same problem.

The problem with most comments is context - in most cases, comment threads are positioned at the bottom of the post. In these situations, commenting on a specific point in the article becomes quite difficult, I guess this is why we have "quotes" - by repeating a certain part of the original post, you could refer to the specific point where it was mentioned and comment in that specific context. That was OK, for 2005, but what if you could simply comment anywhere?

Inline comments are not a totally new thing, Medium did it, and probably others too, but with this plugin, virtually anyone can.

inlineDisqussions is a jQuery plugin to allow inline comments on your site.
Comments threads are created with the power of the awesome (and free) Disqus, they are created dynamically and attached to the specific sections (paragraph, usually, but not necessarily) of your post. The original use-case was naturally a blog post so you could comment next to each paragraph, but you could use this to have comment threads on every section of any web page - think of commenting on every product in a one-page catalog, on each picture in a photo gallery etc.

DEMO

Right here, try clicking the comment marks on the right of every paragraph on this page.
When you click on one of those marks, if a discussion already exists, it will load in-place, otherwise a fresh discussion will be created and positioned dynamically next to the relative paragraph.

Dynamic positioning you say?

Check this out, if you try to comment on this paragraph you'll see that I am resizing to fit the available space and that I can also be positioned to the left, if needed.
TIP: You can easily set maxWidth if you don't want the comments to get too wide, see the options section for more info.

Can you highlight?

I sure can, when you click on this paragraph's comments icon you'll see it is highlighted while the rest of the page is being blacked out.
You can enable this effect by setting highlight to true in the settings object, see the options section for more info.

Can we still have a main comment thread at the bottom?

Yes we can, check out the bottom of this page. if you have a div#disqus_thread in your document it will function as a main comment thread, just like the normal Disqus comments wrapper.

USAGE

That should be pretty simple.
First download it, then include the script (anywhere after jQuery):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="inlineDisqussions.js"></script>

Add a little bit of CSS:

<link rel="stylesheet" type="text/css" href="inlineDisqussions.css" />

Now you just need to call it:

<script>
  disqus_shortname = 'your_disqus_shortname';
  jQuery(document).ready(function() {
    jQuery("p").inlineDisqussions();
  });
</script>

OPTIONS

Right now not many, if you need more let me know.
You can pass a settings object containing the following options (these are the defaults):

jQuery("p").inlineDisqussions({
  identifier: 'disqussion',
  displayCount: true,
  highlighted: false,
  position: 'right',
  background: 'white',
  maxWidth: 9999
});

LIMITATIONS

There is (at least) one - each paragraph gets a unique ID to get the right comment thread attached to it, these IDs are automatically generated according to the order paragraphs appear in. That means that if you ever change the order of your paragraphs or add a new paragraph to the top of your article you might cause a wrong comment thread to be attached to that paragraph.
WORKAROUND: You can add a data-disqus-identifier attribute to the paragraph to force it to get a specific comments thread, something like this:

<p data-disqus-identifier="disqussion-12">
  Lorem ipsum...
</p>

ISSUES

If you have any, let me know.