Pros and Cons of the new Facebook Comments plugin

Published: March 5, 2011

This week Facebook released a mayor upgrade to their existing Facebook Comments plugin. This plugin, part of Facebook’s Social Plugins, lets visitors comment on your site’s content. In this post some details about the upgrade and an issue I ran into when upgrading the plugin on one of my sites.

The intro video is quite cool, I suggest you check it out and read the instructions page and the post on the Developer Blog, if you want to use this plugin.

What’s so cool about this upgrade?

1. Most interesting comments first (friends and “most liked” comments first)

2. You can reply from the news feed which will be synced back to the comment box on your site. So this allows for easier interaction with your content’s comments and potentially more traffic to your site.

3. When somebody replies to your comment you will be notified in Facebook

4. Admins have control via a whole new moderation dashboard which let you handle comments of all your FB apps. Also moderation has more options now.

5. Easy to upgrade the first version of the comment plug-in by adding migrated=”1″ in the fb:comment tag

What is less cool?

1. Privacy. One aspect that might disturb people is that Facebook shows more context about the person that places the comment, like country and work place. Of course this can be minimized by adjusting your privacy settings, but I can imagine that people might be surprised when they put their first comment on another site that uses the new version of the plugin.

2. Issues with the migrating and fql-ing all comments of an app .. see further down

3. Fixed width of 500px, if you use a smaller width, different text elements will overlap. I reserved 410px for the previous version so I had to tweak the CSS of my app to neatly fit in the 500px box. It could be that Facebook will address this in the future.

Code

As before, it’s plain easy to deploy:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="YOUR_CANONICAL_URL"></fb:comments>

(with the migration="1" flag if you upgrade an existing code snippet)

Migration issues

On sharemovi.es I have comment box per movie url, so I had a serious challenge to check back and forth v1 and v2 of the plugin.

I had to skim through the comments on the developer blog to figger out that when you didn’t use the XID flag in the first version of fb:comments , like :

<fb:comments xid="YOUR_XID" migrated="1"></fb:comments>

.. you wouldn’t see your comments in the new version. Holy crap, all the movie comments were gone! In the end I got it fixed by urlencoding the URL. There was a bug in the code requiring you to urlencode the url twice. Facebook got this quickly fixed and the comments came back with the following snippet (pff.. )

<fb:comments migrated="1"
  xid="<?=urlencode("http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"])?>">
</fb:comments>

Querying comments with FQL

Another thing that got ‘broke’ was the listing of number of comments. A shame, because I was quite glad with my code that could extract the number of comments per movie URL. Clicking the number would get you an overlay with the comments, styled with my own CSS. So comment box generated content extracted to other parts of the site.

Unfortunately this doesn’t work anymore

$fql = 'select xid,count from comments_info where app_id=<<my_app>>';
  $param  =   array(
  'method'     => 'fql.query',
  'query'     => $fql,
  'callback'    => '',
  'access_token' => $session['access_token']
);
$fqlResult = $facebook->api($param);

The newer method Facebook proposes would be something like the following, but I cannot get it to work for my URLs:

select post_id, fromid, time, text, post_fbid from comment where object_id in (select comments_fbid from link_stat where url=”http://developers.facebook.com/blog/post/472″)

I will be checking this further of course, when I have the solution I will post it here .. Of course if somebody reads this and has found the solution, please put a comment here with the solution :)

Number of comments

Just new in the FAQ of the comments plugin is the number of posts for a particular URL. Unfortunately it doesn’t work for sharemovi.es but it is a cool new feature, and it seems Facebook replied very fast on requests from users here:

<fb:comments-count href=http://example.com/></fb:comments-count> awesome comments

<iframe src="http://www.facebook.com/plugins/comments.php?href=example.com&permalink=1" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:16px;" allowTransparency="true"></iframe>

Examples new comment plugin

Currently I am using the comment box on my two Facebook Apps to let users comment on movies and books:

sharemovi.es (blog post: Sneak preview: sharemovies)

my reading list (blog post: Hi folks, what are you reading? Share it on “My Reading List”

Like this post?

Share it using the social media buttons at the top and bottom of this post. Or post a comment, I like to hear from you ..

You might also like:

FQL: a powerful way to query Facebook's Graph API

Some tips to make a developer's life easier

Finally here: The google+ API

Rails 3 is out

Enjoyed this article?

This entry was posted in Programming, Social media and tagged api, comments, developer, facebook, social media. Bookmark the permalink. Trackbacks are closed, but you can post a comment.

Zwendkos

I have tried to migrate to the new version on my site, and everything seems to work except when people post, the link on their profile/news feed says “John Doe commented on THIS WEBPAGE on facebook.com” instead of “John Doe commented on THIS WEBPAGE on MYSITE.com” — the link on THIS WEBPAGE is fine, but it says on facebook.com instead of on MYSITE.com? Do you have a solution?

Anonymous

Yes you should set the href attribute with the link of the site where you installed the comment box. This is new, before you had the xid attr. Hth

Zwendkos

When I do that using:

xid=”"

the old comments are gone?

Anonymous

I am not sure. I wasn’t using it and putting the urlencoded href in the new comment box, got my comments back. So I think href/urlencode, as shown in the blog post, should do the trick. But you might want to check the FB Developer’s blog en Comments plugin manual of FB + the comments there for the actual status. HTH

http://indigodergisi.com Mehmet Karaarslan

Since I am kinda new to this, I don’t know how to generate this comment box for each page of my website. Instead, it is generating the same comment box for whole site. Can we make it specific for each page? What am I supposed to do? Thanks.

Anonymous

See post and provided links: you need to set the href attribute within the fb:comments tags

http://www.facebook.com/people/Chris-Sentman/96800707 Chris Sentman

I think I am already setting the href attribute but I am getting the same trouble — comments show for the entire site instead of comments related to that specific post. Can you clarify how to fix this? Here is my code:

Anonymous

I checked the source of one of the movies on sharemovi.es, for example http://sharemovi.es/habanablues , and I used the migrated flag and the unique url as “xid” :

that is on sharemovi.es, on reading list I do use the new version:

for url http://www.bobbelderbos.com/books/?googleID=LvvhQgAACAAJ

http://twitter.com/bbelderbos Bob Belderbos

good news: facebook seems to have edited the css of the comment box: width < 500px is allowed now, for example http://sharemovi.es/thesocialnetwork
http://twitter.com/theromulans Brett Daniels

Thanks Bob, shame about the lack of CSS customisation though… guess it’s another reason to use DISQUS.

Anonymous

Thanks for reaching out to my blog
I posted a reply to this post : < 500px width is supported now by facebook. on sharemovi.es I could revert back to 400px (yes!, no ugly css workarounds anymore ;)
For the rest, afaik, you cannot do much styling of the box, but I like it as it is, it is not too obtrusive in my point of view

http://www.facebook.com/people/Lynda-Cyrulik-Strom/100000722458571 Lynda Cyrulik Strom

Hi, I’m trying to upload the new fb comments plug-in into Dreamweaver 5, w/o success. Here’s the code I’m inserting into my html:

I get this error message: “Adobe Flash Player Security. Adobe Flash Player has detected a potentially unsafe operation. The following local application on your computer or network: C:Documents and SettingsuserDesktopKirley WebKirleyWebIndex1.html is trying to communicate with this Internet labeled location: static.ak.fbcdn.net. To let this application communicate with the internet, click settings. You must restart the application after changing your settings.” Should I click settings or click ok?

Will this work at a width of 300 or do I need to use a width of at least 400 px?

Is there any info that I must input in my header to get this to work? I see mention of a canonical url. Is this the FB URL or my website URL?

I am not familiar w/ PHP and plug-ins. Does uploading the above code into my html require any additional steps other than copying and pasting into the html?

Thanks!

Anonymous

the code snippet contains all you need. you can move the script src=”.. to your header, but that is not strictly necessary. the error seems to come from adobe. I am not familiar with newer versions of dreamweaver. this seems a compatibility issue with parts of this software and facebook plugins. I suggest you search the web on the error you got and/or try with the dreamweaver community

honestly I left dreamweaver when I stumbled upon this kind of issues. the problem with wysiwyg is that you don’t see what is going on under the hood. moreover, it generates a lot of extra code I could not make sense of.

I prefer to build my webs from scratch these days: php or whatever server language generates the html, css styles it and then I add JS (usually jquery) to add behavioral stuff. the fb plugins fall under this last category and I never had any dependency problems like your example.

btw, since few weeks ago FB improved the only-500px-width limitation. I have it working fine with 400px width: no overlapping content anymore.

http://www.facebook.com/randoogleit Randy Hunt

RE: Querying comments with FQL
I’ve gotten it to work, but not with the app_id. I had to use the object_id and a subquery. Of course, I’m using the javascript api and not PHP. This code handles comments after they are posted using the FB.Event.subcribe(‘comment.create’,response) method.

var query = FB.Data.query(“select post_fbid, fromid, object_id, text, time from comment where post_fbid=’{0}’ and object_id in(select comments_fbid from link_stat where url=’{1}’)”,response.commentID,response.href);

The idea (I guess) is that you use the page url and not app_id to find the specific comments object ID from the link_stat table. I could be wrong though, but it works in javascript.

Unfortunately, I can’t seem to use the same code for replies.

Anonymous

Thanks Randy, I will check it out. I will post a followup post on querying comments. This probably will be useful

Anonymous

x11
Anonymous

Hi,
I am trying to find a website that actually uses the new facebook plugin, but none of the new comment boxes seem to feed facebooks comments back to the website.
Could you give me an example of someone that is already using the new Facebook comment pluggin?

Anonymous

Hi Carlota, I use it at both sharemovi.es and bobbelderbos.com/books. I tested it with one of the movies making a comment on a comment that somebody made and was posted back to his wall. So commenting on his comment on his wall, the comment was synced back to the URL where I used the facebook comment plugin (v2)

Sites as techcrunch.com embrased the plugin as well. It is as simple as using the code fb generates at https://developers.facebook.com/docs/reference/plugins/comments/

Let me know if it works for you and where you will deploy it …

http://www.facebook.com/people/Andrew-Croxall/814782229 Andrew Croxall

Glad it’s not just me that can’t get comments by app ID. This is massively annoying if, like me, you want to pull down all comments for the whole site, not have to specify a page (e.g. for a ‘latest comments’ box on the homepage). If FQL were closer to SQL you could get round this by using LIKE when specifying the URL, but no dice – that gets you an error.

Anonymous

I did get it to work with v2 of the comment box: http://bobbelderbos.com/2011/07/fql-powerful-way-query-facebook-graph-api/, but at sharemovi.es with clean urls and a migrated v1 comment box I can’t get the comments easily, the old ones I can but the new ones not. Querying comments in the graph makes me pull my hair out.

http://www.facebook.com/profile.php?id=1479819421 Amaury Bargioni

hi, I have an issue with the comment plugin, in all browsers except safari, the comment box has a fixed height so we can only see half of the second comment.

What can I do?

Thanks

Anonymous

do you have the site were you implemented the box ? if you send me more details via the contact form of this site, I might be able to help you. you could also post a comment on the facebook api documentation page. the FB developers are quite responsive. as far as the css and afaik only the width is scalable.

Anonymous

quickly checking
view-source:http://www.bobbelderbos.com/books/

I see I have:

so only IDs, no text and no curly braces. but the comment moderation tool is tricky to say the least, even buggy, because on the mentioned site there are comments that I don’t see in the moderation tool :(

if you find out more about the bugs and fixes FB has for this, please let me know …
http://valerieleuba.com Valerie

(You have enabled a App on Facebook integration for your app, but have not specified a Canvas URL.)What does this mean and where do I find the Canvas URL?
I also have this warning? How do I fix? Warning: this comments plugin is operating in compatibility mode, but has no posts yet. Consider specifying an explicit ‘href’ as suggested in the comments plugin documentation to take advantage of all plugin features.

Anonymous

Hi Valerie,

Could you please be more specific on the canvas issue? You can specify the canvas url in facebook.com/developer when you create your app.
The comment box message means you didn’t specify the URL option in your fb:comment plugin. I had the same issue because I assumed it would take the current URL per default. And it was only recent one of my readers alerted me on this message. After specifying the URL the message went away. Example syntax:

Anonymous

test
http://bobbelderbos.com/ Bob Belderbos

Hi Valerie, I sent you a PM via your website to try to help you with your canvas question …
Anonymous

Any way you could share how when someone does comment and does get
posted to facebook too that it grabs an image from your post instead of a
random image from the main blog? Do you know what I mean?

http://bobbelderbos.com/ Bob Belderbos

as far as I know it depends on the og:image being set

http://twitter.com/moustafamin moustafa

thanks
http://www.facebook.com/tailz Tal Flanchraych

Thanks for all this info!

http://bobbelderbos.com/ Bob Belderbos

you are welcome

My Links

my tweets my facebook my skype my linkedin

Get every post by email or RSS
Search
Post categories
Bob’s Reading List

<p>Your browser does not support iframes.</p>
Some of my Apps