Setting Facebook comments web plugin

Question

The default sorting order of the facebook comments plugin is by social status. How do I set the default order to reverse chronological on my web page?

I know there is an option on the top of the plugin. But not all users know about it and the sorting order is confusing.

Jan Turoň · Answer 1 · 2013-09-01T10:54:42.343

14

I was googling a lot without success, so I solved this by some reverse engeneering...

Use some browser code inspector to see which iframe was inserted by facebook javascript that adds the comments plugin into the page. Copy the facebook_crazy_url of that iframe (see step 2). The inserted iframe seems to be the only thing that is needed to run the comments properly
Get rid of the FB javascript and insert your own iframe instead: set the url to "https://www.facebook.com/plugins/comments.php?channel_url=facebook_crazy_url&order_by=reverse_time"

edited Sep 01 '13 at 10:54

answered Oct 02 '11 at 10:23

Jan Turoň

31,451
23
125
169

I tried this and it didn't seem to work for me. Anyone else get this to work? Currently. – CaptainBli May 15 '12 at 16:39
This only works for users that are logged out of FB. Go figure – adamJLev May 21 '12 at 11:45
@Jan: I've tried your solution on my site and it worked. I only have one observation: I couldn't get the height dynamically set according to the number of posts I set on the "num_posts" parameter. It works on the default Facebook SDK Javascript/HTML code, but not with this approach. Any thoughts? – XpiritO Jun 08 '12 at 18:26
@XpiritO: You can add your own javascript to adjust the iframe height to fit its contents, see the answer [here](http://stackoverflow.com/questions/525992/resize-iframe-height-according-to-content-height-in-it). But after clicking the *show more* link the height changes. To check the iframe every cca 50ms and adjust it again is the only solution I can imagine. – Jan Turoň Jun 10 '12 at 10:37

score 3 · Answer 2 · edited Jul 12 '13 at 11:09

3

Another option inspired by Jan Turoň's solution:

put your fb:comments in a div with id "comments":

    <div id="comments"><fb:comments ...></fb:comments></div>

use jQuery to change the generated iframe's src:

    $('#comments iframe').attr('src', $('#comments iframe').attr('src') + '&order_by=reverse_time')

Of course, you can do this without jQuery.

It loads the comments' frame twice, but it works in all cases without harcoding the iframe's src.

edited Jul 12 '13 at 11:09

sakibmoon

2,026
3
22
32

answered Dec 17 '11 at 23:43

Fabrice

3,094
3
28
31

1

...and the jQuery code needs to be placed AFTER the FB javascript (both codes are synchronous) – Jan Turoň Dec 18 '11 at 20:24
what does that "after th FB javascrip" means". I tried to load js sdk synchronously and then put that line of jquery code at the end of the html page. but it does not work – Eddy Chan Feb 03 '12 at 13:38
@Eddy Chan: The facebook javascript creates the iframe, Fabrices' jQuery code updates src of that iframe, so it has to be called AFTER the iframe is done. – Jan Turoň Feb 20 '12 at 21:37
I tried this and I could not get the results. It is not ordering by reverse time. It is only doing the stupid Social Ranking that does not help my users. Is there anyone that is currently doing this? – CaptainBli May 15 '12 at 16:41

score 2 · Accepted Answer · edited Jul 12 '13 at 11:06

2

Just guessing I added

 data-order-by="reverse_time"

to the div provided by Facebook and it worked nicely. So, loading the pluging with the standard html5 code provided here: https://developers.facebook.com/docs/reference/plugins/comments/

just add the data-order-by attribute like this:

<div class="fb-comments" data-href="YOUR_URL" data-width="470" data-num-posts="6" data-order-by="reverse_time"></div>

edited Jul 12 '13 at 11:06

sakibmoon

2,026
3
22
32

answered Apr 24 '13 at 22:39

Jorge

831
13
18

Exactly what I needed. This worked even when setting the default in the moderation page did not. Thanks! – Kelly Oct 16 '13 at 16:49

score 2 · Answer 4 · answered Sep 20 '11 at 11:01

2

You cannot change the default sort order of the comments plugin. To achieve something like this, you could retrieve the comments yourself, e.g., using FQL, but then you need to build everything else, too. Or use something like Disqus.

answered Sep 20 '11 at 11:01

chwk

441
2
7

4

I just can't believe that such a famous plugin doesn't have such an elementary feature... – Jan Turoň Sep 20 '11 at 14:37
Well, the social plugins do not have a means of styling them with CSS anymore either -- even though that makes integrating them very difficult for many web site designs and many developers have expressed their dissatisfaction. Facebook wants us to use the "social relevance" sorting and they are enforcing it. It's sink or swim. – chwk Sep 21 '11 at 11:37

score 0 · Answer 5 · answered Aug 01 '16 at 01:47

If you visit https://developers.facebook.com/tools/comments/{Your_app_id}/ and then click the Settings link, it will let you edit the "Sort Comments By" setting.

The choices are:

Top
Newest
Oldest

According to https://developers.facebook.com/docs/plugins/comments/#moderation-setup-instructions, your webpage must have a tag like <meta property="fb:app_id" content="{YOUR_APP_ID}" />.

P.S. Unfortunately for me, since I'm using ClickFunnels, adding this tag doesn't seem to have any effect. I would instead need to be in complete control of my webpage (and not use a simplified tool like ClickFunnels).

Setting Facebook comments web plugin

5 Answers5

Linked