Adding a facebook comment and like button

Today I decided to add a comment area to one of my demo´s. I decided to use the facebook comment app as I really didn’t have time to write one my self. There are other benefits as well (spam being a major one) and I wanted a ‘like’-button anyway.
This wasn’t completely pain-free so I’ll just put up a shot “how-to”:

1. Create a facebook developer account

Go to http://developers.facebook.com/ and create a developer account. This requires you to have either a mobile phone or a credit card. Now, it’s not that I don’t trust facebook to have my credit card, but I don’t. So I used my cellphone.

 

2. Create a facebook application

When you’ve created an account, you’ll be transfered to the developers area. Once there, press the ‘+ Add New Application’-button to add your page. I’ve come up with an example page we’ll use that shows how to do this (oh the irony :)).

When you’ve pressed the button you’ll see something like this:

Fill in the form as I have (with your own name of course) and continue. You’ll be asked to handle an impossible captcha. If you can solve it, you’ll end up here:

At the end of the screen there’s a save button, so save your progress.

In the top menu select Documentation and then Core Concepts and lastly Social plugins:

 

Comments:

Scroll down and select the Comments (either in the page content or in the sidebar further down). In this page there is a form you can fill in to create code to paste in to your page. Fill in the form and press ‘Get Code’:

You’ll get your code:

 

Paste the first section of code right after your body-tag and the second section where ever you want it to show up.

 

Like-button

Go to the social plugins section again and select Like Button. Like with the comments plugin you’ll see a form in this page, fill it in like this: (some of the stuff turns up in swedish in my image because I’m swedish)

Press Get Code and you’ll get a similar window like in comments. Paste into your page according to the instructions and you’ll have a like button as well on your page. Style both comments and like-button to your liking and you’ve got yourself something like this:

http://demo.maffelu.net/web/facebook/comments/

Now, if you want to know how to control what image and text are shown in peoples facebook profile when they’ve liked your stuff, check out this entry for an explanation:
http://maffelu.net/select-image-and-text-for-facebook-like-button/

Select image and text for facebook like-button

I’ve just implemented a like-button on a page and I want to decide what should show up as text whenever a user ‘likes’ my page. Well, this isn’t completely obvious from the start and google wasn’t very helpful, so here goes.

When I first added a demo page and like it all I got in my account updates was this:

Doesn’t really look awesome. No image and a whole lot of no text. Well.

Luckely there is a developers debugging tool which is quite useful. It’s located here:

http://developers.facebook.com/tools/debug

If you go there you’ll get to enter the URL to your website there and test it:

 

Argh! That’s a whole lot of errors! Well, there are properties to be set in order to enjoy the full experiance and you have to set them in your head! Here are is the example properties I’ve set on the demo-page:

<meta property="og:title" content="Facebook Comments And Like-button Demo" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://demo.maffelu.net/web/facebook/comments/" />
<meta property="og:image" content="http://demo.maffelu.net/web/facebook/comments/DemoSquare.png" />
<meta property="og:site_name" content="Maffelu.net" />
<meta property="fb:admins" content="1219770633" />
<meta property="og:description" content="A demo on how to implement facebook comments and a like-button on your website!" />
<meta property="og:locale" content="en_US" />

Well, that’s it. The demo page is found here:
http://demo.maffelu.net/web/facebook/comments/

Good luck!