Facebook Comments Plugin: How to sort comments, newest first?

We use the plugin http://developers.facebook.com/docs/reference/plugins/comments/ for comments on our website.

The comments displayed by the tool are sorted by social "factor", ie. really liked the comments, etc.

I want to show first the most recent comments, reverse chronological. I don't know how to set this as the default for all of our visitors.

I found some ideas here: Facebook comments plugin - how to sort comments? Configuring the Facebook Comments Web Plugin

However, a note about this seems to work more.

Do you have any idea what to do?


source to share

3 answers

I've seen many answers to this, but only this one worked for me.

<div class="fb-comments" data-href="your-website" data-num-posts="5" data-width="638" data-order-by="reverse_time"></div>


So anyway, the key value for setting is data-order-by = "reverse_time" .



Ok, I did some research and found a solution that worked for me:

First of all, I took the generated code from Facebook that you can go to: facebook comments plugin


<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


I put the div at the top of the body on the side I want the plugin to appear. You can put the script in the head or in an external JS file.

After that, I put the second part of the generated code where I want the comments plugin to appear.


<div class="my_comments_plugin"
<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>


Now for the most important part: then I put another data-Attribute on the div with the fb-comments class:



Which makes comments in reverse chronological order!

Hope I helped!



Nice and responsive design, and fb sorted comments here:

in html file:

<div class="fb-comments" data-href="http://www.yourpage.org/" data-numposts="20" data-width="100%" data-order-by="reverse_time" data-colorscheme="light"></div>


in CSS file:

.fb-comments {
  min-width: 100% !important;
  width: 100% !important;




All Articles