Dale Dietrich
friedman: always supply your comparative advantage
Random header image... Refresh for more!

Why and How to Integrate Facebook Connect with Disqus

Categories: bloggingcloud computinghow-tosocial networkingweb apps
Tags:

 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.

Digg! Digg Del.icio.us  

  • Garry Cleeves

    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.

  • http://www.jwgeorge.com/ Jonathan George

    Hey Dale. I know this is an old post, but is there still a way for users to publish back to their profile that they commented on your site? (or mine)

  • http://www.daleisphere.com Dale Dietrich

    Jonathan, while I wrote, and rewrote, this post some time ago, I think the post is still up-to-date in terms of accuracy. In order for your comment to publish back to your Facebook profile, which is what I am assuming you want to do, you have to login with your facebook account and not a disqus account as it appears you have. If/when you login and comment via facebook connect one of the options is to publish your comment back to facebook.

  • http://www.nuevayoresblogs.com/ Henry Ramirez

    i been triying this for my blog,and got me lost,help

  • http://www.nuevayoresblogs.com/ Henry Ramirez

    you need tu set up a api on facebook app

  • Austin_Szelkowski

    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).

    My 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.

    But honestly, I have no idea. I've tried everything, and I'm about to give up on this thing.

  • Austin_Szelkowski

    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.

  • http://www.daleisphere.com Dale Dietrich

    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.

    …Dale

  • http://www.facebook.com/tomairaksinen Tom Airaksinen

    I just want to see what it looks like when I add a comment, being logged in through Facebook connect. I hope I can delete it myself, if not you can remove this comment anytime… Sorry for messing around.

  • http://www.daleisphere.com Dale Dietrich

    Hey, no worries. I'm glad you got it working. That's what the blog post is for.

    …Dale

  • Austin_Szelkowski

    Hey, no worries. I appreciate your response. All the best!

  • http://landseo.ru landseo

    I think it's cool, isn't it? thank you.

  • http://www.theviolent.net giant slayer

    I saw your article and was just curious as to how it looked on my facebook feed when I commented. Thanks for sharing.

  • http://www.theviolent.net giant slayer

    I did not see it show up in my facebook feed.
    hmmm…. I'm not sure what I am not doing correctly.

  • http://www.easyrecovery.co.uk data recovery

    Thanks for this info,it helped me.

  • http://www.facebook.com/people/Serina-Osman/1123296819 Serina Osman

    Its look like not working anymore to my site.. I dont know what happend..

  • http://www.facebook.com/people/Serina-Osman/1123296819 Serina Osman

    Its look like not working anymore to my site.. I dont know what happend..

  • Anonymous

    Great post. Thanks

  • http://www.facebook.com/people/Dale-Dietrich/776450619 Dale Dietrich

    So, yes, it seems to work if You connect with Facebook Connect BEFORE writing your comment/reply. This isn’t good. I need to fix this at some point. n

  • http://www.facebook.com/people/Dale-Dietrich/776450619 Dale Dietrich

    Humm, my attempt to ‘Reply’ and then click on Facebook Connect option didn’t seem to work. I wrote my reply, attempted to send it and it disappeared. It did, however, log me in with Facebook Connect but threw away my first comment. Let’s see if this works.n

  • http://www.cashforipads.com/ sell ipad

    thanks for sharing :)

  • Anonymous

    Very nice information is posted here. I am searching from so many time and it is great thing that I got it. Thanksu00a0 for this. I like this post very much and want to visit again to get nice information.nGraphic Design Schools

  • http://www.scholarshipsforhighschoolseniors.org/ High School Scholarships

    Disqus sure seems to be a stable platform for web2.0 communication and driving traffic to one’s money site or blog. First there was talk about integrating disqus with wordpress, now with facebook… I wouldn’t be surprised to see twitter thrown in there somewhere!

  • http://www.facebook.com/sulabhkjain Sulabh Jain

    Friends, that was a nice post, but still if someone is LOOKING FOR HELP nin installing these FACEBOOK SOCIAL PLUGINS on their website, we can do nit in hours, just visit my website and avail our services nhttp://www.ezdia.com/ma/fau200bcebook-connect-integrationu200b.php?utm_source=webqueries

  • Anonymous

    Disqus is such a great commenting system for me.nipad 3

  • Anonymous

    u00a0The information is very interesting With great pleasure I read your blog. Its really nice.

  • Anonymous

    Really interesting topic. i like this pretty awesome blog..thanks for the share and am gonna safe this blog for my friend.. Cheers. You made quiet a point there, will check back later for more awesome points.nninterestingly awesome, really liked it. Will love to check back more readings later.nnGlad to be here, really liked your way of describing. will check back later for sure.nnI have to admit that I have never heard about this information I have noticed many new facts for me. Thanks a lot for sharing this useful and attractive information and I will be waiting for other interesting posts from you in the nearest future.keep it up.nnYou got me there, Very well written, You seem to know a lot more than I do Iu2019d love to know your sources. Really liked it though.nnHow long have you been in this field? You seem to know a lot more than I do Iu2019d love to know your sources. Cheers!nhttp://iphone5hacks.org/n

  • Anonymous

    Great Tutorial but i;m having some problem since now FaceBook has changed a lot!

  • http://www.chiarafashion.co.uk/maxi-dresses/ Maxi Dresses

    The information may be very interesting With fantastic enjoyment I read your website. Its seriously nice.

  • http://www.globaltowncar.com/ Seattle Airport Transportation

    That is awesome information. Thanks for sharing.

  • http://207Rewind.com/ 207Rewind

    Hmmm well after reading your article I was convinced to add disqus to my own website but was kind of disappointed once I installed it and saw that unlike other website’s and your screen shot above disqus on my website doesn’t show the connect with facebook button or connect with twitter button above the comment box. Was really the whole reason why I switched to it thinking it would boost user interaction. Am I missing something here or is this just not a feature disqus has anymore? http://207Rewind.com

  • http://profile.yahoo.com/PHWP7LXBDBPBIQGC4GNRNLM3MQ columbus

    Yeah, that’s much clearer now. Thanks a lot for this detailed explanation!   Try this
    pdf editor
    .  Very useful!
     

  • http://www.facebook.com/dsnehi Davinder Snehi

    yes

  • http://www.facebook.com/profile.php?id=590646643 Jean Qeuleuaveuo

    test fb login via disqus