Why and How to Integrate Facebook Connect with Disqus

 Using Facebook Connect with Disqus
The primary reason I switched from Intense Debate to Disqus, is Disqus’s integration with Facebook Connect. Below I describe why this is important. I then provide a step-by-step ‘how-to’ guide on how to integrate Facebook Connect with Disqus.

[This Post was Updated on April 18, 2009 to reflect the changes made to the setup process, both on Disqus and the Facebook developer pages.]

1. Why Facebook Connect is a Big Deal

Discussion via comments draws users back for repeated visits to their site while engaging them in conversation with the blogger and other commenters. Bloggers want traffic to drive more ad sales and, frankly, they want more people reading their content. Otherwise, what’s the point?

Users are understandably reluctant to leave comments on blogs. Most bloggers, including myself, require users to leave a name, email address and an optional URL. The reason for this, at least in my case, is to weed out spam commenters and to develop a sense of community among commenters. Requiring such information has the unfortunate side effect of dissuading most readers from commenting because they don’t want:

  1. the ‘sign up’ hassle just to leave a comment; and
  2. to provide personally identifying information.

Facebook Connect solves these two problems and provides other terrific benefits.

If the user is already logged into their Facebook account (and if they had previously granted appropriate permissions (see section 3 below)) when they read a blog post they’ll see an “Add New Comment” box like this:

disqus - facebook connect - logged in

They’ll automatically be logged in, ready to leave comments – the blue and white ‘f’ box in the bottom right corner of their picture indicates they are logged in with Facebook. All the user has to do is type a comment and click on the ‘Post Comment’ button. That’s it.

With Facebook Connect:

  1. commenters are automatically logged into a blog’s comment system – without doing anything;
  2. commenters do not need to sign up for anything beyond the authorization step described in point 3 below;
  3. commenters do not need to disclose any personally identifying information to the blog;
  4. commenters do not need to have a gravatar account in order to associate their picture with a comment -their Facebook picture is automatically linked to their comment;
  5. the commenter’s name above the comment is automatically linked back to the commenter’s Facebook profile; and most importantly
  6. at the commenter’s option (see picture below), links to the comment can, appear on the commenter’s Facebook wall/feed for their Facebook friends to see. This has the potential to draw new readers to the blog from a huge pool of Facebook users that would never have found the blog on their own.

facebook connect post confirmation

Sweet!

The few people left on Earth without Facebook accounts can choose to login with a Disqus account, if they have one, or they can leave posts anonymously by clicking on the ‘Unclaimed’ option.

I’m convinced!

2. What Happens When a Facebook User is Not Logged into Facebook?

If a Facebook user is not currently logged into their Facebook account, they are presented with the generic Disqus ‘Add New Comment’ box:

disqus - facebook connect - add new comment box

Clicking on the ‘F Connect’ button, will log the reader into their Facebook account (via the permissions dialogue – see point 3 below) after which the Facebook-specific ‘Add New Comment’ box with the Facebook photo and ‘f’ icon, depicted two images above, will appear.

3. Granting Permissions

The first time the user chooses the Facebook Connect option on a given blog, they are presented with the following ‘permission screen’ notifying the user of the consequences of using Facebook Connect on the blog:

 

disqus - facebook connect - permissions screen

4.  How to Integrate Facebook Connect with Disqus

You can view Disqus’ very short original updated set of instructions on how to integrate Facebook Connect in this ‘Disqus – Facebook Connect Setup Page’. [April 18, 2009 Update: Despite being updated, as of April 18, 2009, this page still contains factual errors in its setup instructions. I have notified the Disqus team and hopefully it will be updated soon].

Or, keep reading. I fill in the gaps and walk you through the process step-by-step below.

4.1 Login to your Disqus Admin/Account Settings page: To begin, login to to your Disqus Admin/Account Settings settings page.

4.2 Check the Facebook Connect Box: Check the box beside the ‘’f  Facebook Connect’ box shown below. Notice the ‘(How do I get this ?)’ link (circled in red) under the ‘Enter Facebook API Key’ box. Clicking on this link exposes the five bullet point instructions and the sample Facebook ‘Create App’ form shown below:

disqus - facebook connect settings page

4.3 Objective: Your objective here is to obtain the API Key from Facebook to copy and paste back into the designated field.

4.4 Getting The API Key: To get the API Key, you’ll need to ‘Set up a New Application’ on Facebook as a Facebook developer. Either click on the ‘fill out a new ‘Create App’ form pointed to by the green arrow above, or click here to go there directly.

If you are not logged into Facebook you’ll be taken through the Facebook login screen.

4.5 If you Are Not Already a Facebook Developer: If you are not already a member of the Facebook Developer group, you’ll be presented with this ‘Allow Access?’ screen (skip to section 4.6 below if you are already a Facebook developer):

facebook connect - allow access screen
Click ‘Allow’ to proceed. If you are not willing to join the Facebook Developer group, you will not be able to enable Facebook Connect in your blog.

Clicking ‘Allow’ brings you to the ‘My Applications’ page:

disqus - facebook connect - my applications screen

Click on the ‘+ Set Up New Applications’ button circled in red above.

4.6 Set Up New Facebook Application:

If you:

  • followed the steps in section 4.5; or
  • were already a Facebook developer, after clicking on the link in section 4.4 above; 

you will be taken to the following Facebook ‘Create Application’ screen:

disqus - facebook connect - create applicatoin screen

  • Fill out the ‘Application Name’ field: In my case ‘The Daleisphere’
  • Click on the radio button beside ‘Agree’ if you agree to the Terms of Service; and
  • Click the ‘Save Changes’ button

You’ll be taken to the ‘Basic’ tab Facebook Application settings screen depicted below:

facebook connect - edit settings screen

4.7 Copy/Paste Facebook API Key: Copy and paste the API Keys(blurred and circled in red above)  into the corresponding fields (indicated in section 4.2 above) on the Disqus settings page. Don’t forget to click the ‘Save” button at the bottom of your Disqus options page (you may have to wait until after completing step 4.8 before clicking the save button however).

4.8 Edit and Save the Connect & Account Reclamation URL: Fields:

Next click on the ‘Connect’ tab on the Facebook Application settings screen – depicted below:

connect tab on facebook application settings screen

Type in the full URL, including the ‘http://’ part of your blog’s domain into the ‘Connect URL’ field. Type in just the root/base domain of your blog’s URL in the ‘Account Reclamation URL’ field as indicated in the picture above. 

Scroll down to the bottom of that page and click on the “Save Changes’ button.

4.9 That’s It! Assuming everything went as planned, that should be it.

Your Facebook commenters will be able to leave comments as described in section1 above.

5. Problems

5.1 Newsfeed Functionality currently Disabled: As of January 26, 2009, comments made using Facebook Connect are not fed into a commenter’s Facebook newsfeed/wall. In response to my query on this issue, Disqus Community Manager, Giannii, made this remark on the Disqus-Facebook newsfeed being disabled issue:

“Currently, the functionality for comments to post to your newsfeed is
disabled. We are waiting on a few items from Facebook and it will be
good to go.”

Note: As of April 18, 2009 the problem identified in the prior section 5.1 is resolved. I’ll need to do more testing before I can determine whether or not the issues identified in points 5.2 and 5.3 below are solved. They appear to be after some very basic testing.

5.2 ‘That Wasn’t Supposed to Happen’ & Other Errors: Testing Facebook Connect with Disqus on this blog with various browsers on different computers is sometimes resulting in the following error message:

disqus - facebook connect - 'that wasn't supposed to happen' error

I got that message when trying to post a comment (after having successfully connected to Facebook Connect) using IE 8 in Windows 7 Beta and when using Safari on my iMac. A friend of mine is getting that error in both Firefox and IE 7, on two different XP computers. I tried once again with IE 8 the next day and it worked fine. So the performance seems spotty at best with some browsers.

5.3 Having to Connect with Facebook Connect Over and Over: Jack reported this problem in the comments below and I have also experienced it.  Sometimes when a comment is left with Facebook Connect immediately after another comment was made with Facebook Connect (even in the same blog), the user has to go through the permissioning step discussed in section 3 above, over and over. Disqus is not always remembering previously verified Facebook users. This is not how this is supposed to work. Again.

Comments

comments

70 Replies to “Why and How to Integrate Facebook Connect with Disqus”

  1. I did not see it show up in my facebook feed.rnhmmm…. I’m not sure what I am not doing correctly.

  2. Sorry Austin, its been 10 months since I wrote the update. I don’t remember the particulars any more. I strongly suggest you use Disqus support. They were usually terrific and responsive whenever I had problems. Good luck.nn…Dale

  3. I have removed my 404 URL from the Cross-Domain Receiver URL field on the Disqus main settings page, but I’m still having the same problem. However, I’m not sure that the change has propagated yet, as new posts still appear without reloading the page.

  4. Thanks Dale for being the only person to bother to put together a reasonable and accurate tutorial for this. That being said, I’m still having a problem when I try to login using facebook connect. I followed your steps exactly, and the FC login screen comes up. Filling the form and pressing return simply reloads my homepage in the same window that came up for FC login. Navigating back to the place where I want to leave a comment in that window shows that my status is still as a “guest.” The wierd thing is that it will sometimes work if I am already logged into facebook, and filling in the FC form on my site actually logs me into the normal facebook site if I visit afterward. I don’t know what is going on with this. The other logins work just fine (twitter and the like).nnMy url is: strengthandhope.com (the site is under construction, so don’t be surprised by ugly formatting). My best guess at the problem right now might be that I am using a “cross domain receiver URL” in my disqus general settings page. Entering a known 404 URL into the field at the bottom of the disqus general settings is supposed to allow for such things as posting comments without reloading the page. I’m using: http://example.com/does-not-exist/ for my known 404 URL.nnBut honestly, I have no idea. I’ve tried everything, and I’m about to give up on this thing.

  5. Another reason why facebook beats out other social networking sites. It just has diverse applications. I read hundreds of essays in my class on why the kids surf the net and alost all of them wrote down facebook.

  6. I am also having the same problem. I’ve tried including the xmlns in the HTML tag, I’ve tried including the js file from facebook… but neither works.

  7. I’m having a problem getting Facebook Connect to work in my blog. I’ve created several applications just like you instructed but when I try clicking on the facebook connect button on my blog–a facebook page loads that says “The page requested cannot be found”. Ive tried several application with different API keys to no avail.

  8. Hello bartunde:

    1) When you use Disqus, your WP blog's settings (re: only permitting registered or verified users) are overridden by Disqus' system. You have no choice as to what options are available. Try clicking on the 'Options +' button on this post and then logout of Disqus. The four options you see are the four options you get. It has nothing to do with Facebook Connect. FBC just ads one more option to Disqus' default three.

    2) I just got this going yesterday. I don't think there is any integration. I believe most commenters would use one or the other – not switch back and forth. Hell, most users won't even know what Disqus is and will use Facebook by default. As you can see when you came here, you were already logged into Disqus, so by default you, and other Disqus users, will be defaulted to post a comment as a Disqus user. That continues even with Facebook Connect integrated. I believe how it works is, if you are logged into both Disqus AND to Facebook, the commenter will login to the blog post comment thingy as a Disqus user. As I dsecribed in point 1 above, if you logout of Disqus, that will drop the commenter back to being a Facebook commenter (if they are logged into Facebook and have given the necesary permissions – described above). If the user is not logged into either, then all four options present themselves and the user can pick which one they want to use (and login to whatever one they want).

    You may be interested in Section 5 'Verifying / Claiming Your Comments' in my other related post:

    https://www.daleisphere.com/how-to-integrate-dis

    There is a neat feature of Disqus that lets any commenter reclaim their prior posts if they were left with varying email addresses/credentials. How and if it works with Facebook Connect comments I don't know.

    And, as I alluded above, you are exactly right. You won't see the Facebook Connect option, or any of the other two commenting options depicted in the first graphic of this post, unless you log out of Disqus, which you can, as I said, by clicking on the 'Optons +' button and choosing to logout. Then you'll see the Facebook Connect and the other two options.

    Play around with it. You can login and logout at your leisure.

    I'm willing to cut the Disqus guys some slack. They really are a small team of developers working their asses off. They integrated FBC before their primary competitor Intense Debate. No doubt they'll hear the grievances and continue to make the system work better and better all the time – just as the Intense Debate Team is doing. They are both terrific groups of people and have been very helpful to me personally in response to my support emails. They have always responded within 24 hours.

    Hope that helps.

  9. Thanks Dale.

    I've been disappointed by the random and incomplete response from Disqus on a few key FB Connect issues. Perhaps you can help

    1) Will FB connect work with Disqus if you've set your blog to only allow comments from Registered or Email Verified users?

    2) Does Disqus integrate comments posted under a Disqus login and FB Connect login if they are from the same person? We have hundreds of commenters and THOUSANDS of comments people have invested in. I'd like to offer the FB connect convenience, but not at the cost of splitting our users' comments and identity.

    Both of these questions have been asked repeatedly on this thread at Disqus, and they have noticeably not been answered.

    http://blog.disqus.net/2008/12/23/facebook-conn

    Also, I don't see an FB connect option on your own blog. I'm already logged in to Disqus. Does that prevent me from connecting via FB?

  10. last word for now. every time i want to leave a new comment, I have to choose how:

    – unclaimed
    – register
    – Disqus login
    – facebook connect

    That's going to get tired after a while. My Disqus login remains persistent across hours and even days, but the FB Connect login to disqus keeps booting me after each comment.

    unsustainable

  11. Finally… (i feel like columbo)

    My comments here are not showing up on my Facebook wall. Isn't that the point?

    Also, when I originally tried to post this comment under my FB login, I got a browser popup stating “please enter a name” which makes no sense. I was logged in. When I clicked on my FB avatar, my entire facebook profile was loaded INSIDE the comment form window. Yuck.

    I'm now logged back in to Disqus

    I'm going to wait a few more weeks or months until Disqus and FB Connect get all this sorted out. I'm not in a position to test uncertain technologies on my community right now.

    thanks again

  12. Hey Dale.

    On #1. it's not my blog's settings I'm referring to. There's a setting in Disqus which allows you to control how open your comment system is. I read that if you have this set to Registered Disqus Users Only or Registered + Email verified, that FB connect does not work.

    On #2. We have certain commenters at http://www.jackandjillpolitics.com who have THOUSANDS of posts. It's just because they are so active that I'm interested in pulling them in via Facebook so their own FB friends can see how much they're contributing to our blog and follow them over. However, if the comments of these high volume users under their FB login don't associate with their Disqus profile, they are losing out. It's a strange, and seemingly unnecessary tradeoff in my mind.

  13. Your comments should never show up in YOUR facebook wall. That's not how it works. They will show up in your Facebook Friend's feeds. I tested it by logging in with another Facebook account of a friend and could see my comments there.

  14. #1 OK, gotcha … I had (and now have again) set it to 'anyone' can comment. I just did a test and set it to 'registered' and you are right, when you restirct it to 'registered' users the Facebook Connect option does not appear. Not an issue for me though because I don't mind if non-registered users comment.

    #2 I think I understand it. You want current Registered Disqus users to connect their current Disqus account to Facebook so that when they leave comments they are fed into Facebook – without having a separate Facebook Connect login id. Isn't Disqus already set up for that. For example, if you click on my image you'll see that I registered my Facebook ID with Disqus (as I did with my Twitter and LinkedIn profiles). Wouldn't/doesn't that already feed comments I make to my Facebook news feed? If not, that's how Disqus should / could set it up.

  15. I don't think that's now how it works for me. I just logged into Facebook Connect to leave this comment. I'll now leave this comment and see if it retains my Facebook login.

  16. OK, exactly as I thought. I am now posting a second comment using Facebook Connect and it remembered who I was. I didn't have to re-register, re-login etc. It remembered my Facebook status and I just had to type this and click “post comment' – easy peasy. I'm not sure why its working differently for you.

  17. Yupp, you are right … Disqus doesn't connect your/my comments made with FBC with your Disqus registered comments.

    But, this is now my third comment in a row with it remembering I am logged in under my Facebook Account.

  18. yeah i just tried logging into a friend account, but my comments here aren't showing up there either. I'm not denying that your own activity does show up, but mine aren't, meaning there's some problems in the system.

    again thanks for all your time on this. i'll check back on the FB connect in a few months and hopefully it will have more predictable behavior.

    cheers

  19. OK, I just checked this again and you are right Jack. My comments here using Facebook Connect are NOT showing up in Facebook (either in my friend's account or mine).

    I was mixing up my friend feed feeds – they ARE showing up in Facebook but not these. I wonder if I have to do something else as a “Facebook Developer” in order to make this work. There was nothing else in the Disqus instructions suggesting I had to do anything more.

    Still not a deal breaker for me … but a bit upsetting.

    Perhaps it requires some additional time for my API keys etc. to flow through all their servers?

  20. Jack:

    Gianni got back to me about this in response to a query I left on the Disqus Forum (see new section 5.1 above). He said:

    “Currently, the functionality for comments to post to your newsfeed is
    disabled. We are waiting on a few items from Facebook and it will be
    good to go.”

    So it looks like this function will be coming soon. Note also that I added a new section 5.3 to reflect the fact that you have to keep logging in sometimes. I have now experienced that too. Grr.

  21. This is very cool, thanks for the info. I had no clue you could integrate facebook like this. I'm going to look into it because facebook is quickly taking over everything.

  22. Dale,

    Followed you from my post at home office envy. This Disqus integration appears to have nothing to do with the FB Connect Comment Widget that was released recently (correct?)

    One of the problems I have with the latter is that it doesn't record comment counts in WP (since it was not exclusively meant for WP) – I assume Disqus is for WP blogs and so it would be integrated. Also, as I'm typing this comment, I see that there's no option to check “Post comments to my profile” – will this be posted by default to my profile? I suppose I'll find out shortly.

    Thanks.

  23. Yes, indeed, the Facebook Connect Comment Widget is very different from what Disqus is doing. The FBC Comment Widget is designed for stand-alone bloggers and websites to integrate Facebook Connect into their sites. When I last checked it has very limited functionality compared to what Disqus provides for us. The Comment Widget, effectively is trying to solve the same problem as Disqus' Facebook Connect functionality provides … it just doesn't do it as well.

    Diqus works on more than just WP blogs. It supports a half dozen different blogging platforms directly and provides instructions on how to use it with other less common blogs

  24. I just recently discovered your site and appreciate you sharing your bout with facebook application development with the world.but this site also search best knowledge facebook application development.

  25. Both Disqus and Intense Debate write comments both to their servers and to your WordPress MySQL database so that if you leave Disqus or ID all your comments remain. If this wasn't the case I wouldn't use either. The only problems with this is that if you edit or delete a comment with ID or Disqus this does not delete or edit the underlying comment left on your database. This is a big problem for those of us wanting the option to leave. So, whenever I edit or delete a comment I go into the underlying comments and edit/delete them.

    You'll also loose structure. Disqus does not save the structure of comments (ie: the indenting / threading). I'm not sure about Intense Debate. If you leave Disqus you'll loose the structure.

    …Dale

  26. I'm not concerned that Disqus will die. I'm concerned that if I choose to leave Disqus one day for a better commentint system that I'll loose the structure of all my comments (eg: the indents in this discussion) and, to the extent I do not edit/delete comments in my database when I edit/delete them here – or when users edit their own comments, my historical comments will not syc up exactly with the comments as they were just before I left Disqus.

    These are issues Disqus obviously knows about but they don't have a big incentive to fix them because fixing them makes it easier for people to leave Disqus. The problems are not well known to prospective new Disqus users for there to be much of a demand from them to have them fixed before moving to Disqus.

    So, I expect they may never be fixed and when/if I leave Disqus one day, I'll leave with a somewhat hobbled set of comments.

  27. Thank you so much for this writeup! The step-by-step was very helpful. Thanks!

  28. Thanks for the information. Feel a bit ridiculous that I spent half the day trying to figure it out with the Disqus help pages. Your post took me all of 10 mins. Where do I apply to Disqus to get my time value back?

Comments are closed.