It’s been almost a year since Livefyre introduced its “Sidenotes” feature which I’d reviewed earlier. Using this plug-in, WordPress bloggers could allow visitors to comment directly on specific paragraphs of the post as opposed to having everything right at the end. It’s a cool feature and one that is successfully employed by quite a few mainstream websites such as Medium and QZ. The problem with using Livefyre however is the familiar one – users need to sign in to post a comment and anonymous “guest” posting is a cumbersome process. Moreover, you essentially give up the design of a large part of your site for something that may not integrate properly with your color scheme and layout. What we need is the ability to insert in-line comments for each paragraph while still retaining our native commenting system.
Fortunately, we have a plug-in for that too! It’s simply called “Inline Comments”. Let’s take a look at how to integrate this with WordPress, and configure it to our taste. In addition, we also see how it plays nicely with a plug-in we reviewed earlier called “WP-Ajaxify-Comments”.
Like any good WordPress plug-in, you can get started immediately with a minimum amount of configuration – you can always tweak the details later on. Simply download and install “Inline Comments” and there’s a good chance you won’t have to make any further configuration changes. When you activate the plug-in and browse to a post on which comments are enabled, you should see little “+” signs for every paragraph that your mouse hovers over.
You can change this default behavior by enabling the “Always Display Bubbles” option from the settings screen, but my personal experiences that it’s a bit much.
Clicking one of the “+” signs brings up the familiar comment form on the side of the block paragraph like this:
Commenting is exactly the same as if it were at the bottom of the article instead. By default however, users are not allowed to reply to site comments – probably because it would look extremely unwieldy given the already tiny amount of space. Nevertheless, this option is also available in the configuration page.
You can see that the bubble next to the paragraph now contains the comment count. Unlike for those paragraphs which don’t have any comments yet, these are always visible and let users know that their respective paragraph contains an annotation.
What really sets this plug-in apart in my opinion is that any in-line discussions are also added to the bottom of the page just like a regular comment – each will also contain a reference back to the original paragraph like so:
It means you can uninstall the plug-in at any time and still not lose any of the side discussions.
I’d earlier written about the plugin called WP-Ajaxify-Comments. It allows your visitors to post comments without having to wait for the page to reload. Luckily for us, Inline Comments integrates neatly with it via a simple configuration option as shown here:
So if you have WP-Ajaxify-Comments installed, your users can comment on individual paragraphs without waiting for the whole page to reload! Here’s an example where I’ve just finished posting a comment with WP-Ajaxify-Comments enabled:
p style=”text-align: center;”>
You gotta admit, that’s pretty cool! Moreover, you can style the in-line comments as well as the associated bubble notifications anyway you want. For example, you may have a lighter or darker theme and you can adjust the way the in-line comments look through CSS. Personally, I found that I also need to manually specify the selectors indicating the paragraphs for which the bubble should appear – otherwise they show up for things like comments as well.
The point is, this is an extremely customizable plug-in that behaves the way you want it to, as opposed to prebuilt third-party solutions like Livefyre where you’re pretty much forced to accept the user experience they dole out to you. Score +1 for native WordPress plug-ins and commenting systems!