Wednesday, December 24, 2008

How to Add Facebook Connect to Blogger in 12 Simple Steps

UPDATE for December 9, 2011: It's been almost three years since I posted this, and it's still getting hits. The instructions here are completely out of date and are absolutely useless at this point.


But! I'm guessing you came here searching for a way to integrate Facebook with your Blogger blog in some way.


Well, I have an answer for you. Or rather, a resource. It's not going to answer all of your questions, but trust me when I say, that as of today, December 9, 2011, your first and last stop when integrating Facebook functionality into your Blogger blog is to visit the Social Plugins page from Facebook itself.


Here it is: https://developers.facebook.com/docs/plugins/


Good luck.

UPDATE for APRIL 20, 2009: Ladies and gentlemen, Thank you for all your awesome participation. I learned a lot from your comments. Due to your comments I have had a change of heart. It appears the JS-Kit comment system is in fact the superior service, hands down. I recommend it. It comes pre-packaged with Facebook Connect functionality, along with oodles of other benefits Disqus does not have. Go to http://js-kit.com to install it on your blog right away.

This blog post is still 100% useful though, if you still want to install Disqus comments on your blog. It really is a great service - just not as good as JS-Kit.

To the people at Disqus: You guys have a beautiful product, and in some ways it is friendlier to use than JS-Kit. I wish you all the best in your quest to beat JS-Kit in the comment system wars. Good ol' competition makes us ALL better.

Sincerely,
Will Conley
Man of Many Words


Do you have a blog on Blogger, WordPress, TypePad, Tumblr or Movable Type? Do you want to add Facebook Connect to your blog so that your readers can log in and comment using their Facebook accounts? Of course you do! There's just one problem: your mamma don't code and your daddy don't XML. That's right, I said it, and you ain't much hipper than they are. So what do you do?

Well kid, you've come to the right place. As of yesterday morning there is a quick-and-dirty way to integrate Facebook Connect into your Blogger comments section. The only specialized knowledge required is literacy. I did it myself in about 30 minutes. Try it out for yourself, right here on Man of Many Words. Scroll down and view the comments section for this post, select the option to log in with Facebook Connect, and then drop a holler. Cool, right?

So how did I do it? Just add Disqus and stir:

1. Open a new tab in your browser and keep this one open so you can refer to it.

2. Go to http://disqus.com (pronounced "discuss"). Follow the simple instructions and install the Disqus comment system into your blog. Don't worry, you can keep all of your existing comments. (Are you worrying? Don't. No need.) Once you have set up Disqus for your blog, move on to Step 3.

3. Open another new tab and go to http://www.facebook.com/developers/createapp.php. This will take you to the "Create App" page on Facebook.

Congratulations in advance, you are about to become a Facebook Developer! Wow! Unfortunately for your ego, it's really, really easy to do what you are about to do. It requires almost no coding skills whatsoever. Sorry. On the bright side, you won't have waste hours and hours of your holiday season trying to understand what all those tech sites are talking about when they blast a load of Javascript in your face and expect you to thank them for the hot tip. I mean, come on, add Facebook Connect in just 8 minutes? I sneeze in 8 minutes. Ain't no way anyone is adding Facebook Connect in 8 minutes. Not me, not Stephen Hawking, not anyone. They only say that to make you feel bad about yourself. Don't listen to them. You are smart. We shall now continue:

4. On the "Create App" page you navigated to in Step 3, fill in the field labeled "Application Name" with the name of your blog. Simple!

5. Agree to the Terms of Service and click "Save Changes". This will take you to the Edit page of your new app.

6. In the "Edit" page of your new app, fill in the field labeled "Callback URL" with http://disqus.com.

7. Scroll down to the bottom of the page and click "Save Changes". Don't close the tab.

8. Go back to the first tab, navigate to your Disqus Settings under "Admin".

9. Scroll down until you see the Facebook Connect logo. Tick the box at left.

10. Copy and paste the API Key from your Facebook App into its corresponding field on your Disqus settings.

11. Copy and paste the Secret from your Facebook App into its corresponding field on your Disqus settings.

12. Scroll down to the bottom of the Settings page on Disqus and click "Save".

Et voila! You have successfully added Facebook Connect to your blog. Season to taste. Serves millions. To try it out, you will need to log out of your Disqus account so that you will be able to see what your readers see.

Three things to consider:

  • This how-to guide applies for all platforms that use Disqus comments. I just targeted it at my Blogger friends who are still trying to hop upon the clue train.
  • Facebook Connect and Disqus aren't cooperating very well in Safari. As a workaround, set Safari to accept all cookies.
  • As Disqus and Facebook Connect are both new platforms, there are bound to be some bugs.

Please let me know how it goes, and Happy Festivus to all.

UPDATE: Looking for detailed instructions on how to install the Disqus comment system on other platforms? Well here you are: