Facebook Connect: Why and how to use it on your website

Back in July (when the weather was a little sunny and not bitterly cold) i wrote a blog post about using your Facebook profile on Digg. Just to recap, it was regarding the rather great ability to use your Facebook profile to login to Digg without registering an entire new Digg account, on top of that it also allows Digg to post information back to your wall as a news feed to let all your friends know what you have been Digging.

Well after allowing websites like Digg, and Stumbleupon to use Facebook connect it seems that the big FB are set to allow any website to use Facebook Connect on November the 30th and you should be quickly scurrying to work out how you are going to incorporate it into your site. Here’s why and how…

Firstly. The Why?

There are really three major reasons why you should be using Facebook connect on your website, and i am sure that as the platform progresses, there will become many many more.

  1. Users can use their existing Facebook profiles to login to your site:
    Whilst many people may think that not having users register with you could damage your site, this probably will not be the case at all. I am sure there has been many a time that you or I have come to a website for some information only to find that you have to go through a long registration process to get the information you want. I can certainly say that i have hit the back button and got the info from elsewhere. With Facebook connect your users can simply hit the Facebook login button, find the information they want, and stay on your site.
  2. You get information back about the user:
    Amongst other things, Facebook can tell you how many of the user’s friends are already members of your site. You can put a link somewhere that says, “Three of your friends already use the site – invite them to connect.” This can dramatically increase engagement of your existing users by drawing them back to your site. Not only this you can show the friends activity on a page within your site, so that users have yet another reason to return.
    Facebook also let you pull certain information about the user such as basic profile info, avatar image etc, this can save you space on your server by hosting everything in a centralised location.
  3. You get to advertise on Facebook for free:
    Whenever a user on your site does an action, you can post this information onto their wall. Obviously i don’t need to tell you how valuable this is, as not only does it appear in the news feed it also encourages their friends to click through onto your site and then we are back to point number 1.

Stumble reviews posting back to Facebook

You can see a great example of how Facebook Connect is working on the Facebook Example Site

Secondly. The How?

The first thing to do is go and check out the Facebook Wiki on The Anatomy of a Facebook Connect Site then bring yourself back here, and we’ll go through a few steps incase your still unsure of how to implement it.

Back already? Gee you are a fast reader, ok now take a look at the image below to get an idea about how Facebook Connect works in the background…

So the image above explains how it all works, but how do you put it into your site?

  1. Download the sample code that is provided by Facebook – This is the code used for their example site and will be a great help.
  2. The code above will show you all the little neat tricks of Facebook, such as the friends selector, group links, events links, that you can implement to allow users to effectively share your site on Facebook
  3. You need to go into Facebook and enable the Developers application, if you can’t find it simply do a search for Developers on the Facebook search bar.
  4. Set up your application using the instructions found in the Facebook wiki
  5. Insert your application API key into the test code that you downloaded above and visit your demo site. You should now see the Facebook connect login button which will allow you to login using your details.

Finally, just go and read everything on the developers wiki to get yourself up to speed with other features, and then you can start to look to implement the sections of code into your site. Start of by getting the login button working, then by getting some information back from FB about the user. Once you have mastered that you can then get onto the good stuff like writing back to users walls, and allowing them to invite friends to your site.

There is no doubt in my mind that Facebook connect will be a massive step forwarding in bringing around a centralised way of logging into websites and getting meaningful information about your users. From a search marketing perspective you can gain literally hundreds of new visitors a day to your site. If you have a login form then you should be looking at this now.

I would love to hear other people’s thoughts on Facebook Connect, and if you think you will be implementing it on your site.

Leave a Reply

37 Comments on "Facebook Connect: Why and how to use it on your website"

Notify of
avatar
Thomas Baugh
Guest

Great stuff Chewie. I didn’t even know you could do this, but I shall be connecting everything up at the earliest opportunity.

The thing I’d worry about is annoying my actual friends by having all my Digg & Stumble stuff popping up in theirs news feed.

Suppose I could set up a second Facebook account though.

Ben Mckay
Guest

Note claiming to be the best coder or anything but that code looks pretty simple. Cheers for the tips! Might have just the thing to test it on…

Cheers Dean,

Ben M

Will
Guest

Very cool, I count myself in the “I had no idea that was possible” category. I have several clients that would find this interesting, thank you for the great info!

william
Guest
There is noting “Open” about “Open” Social. It can only been seen for what it is; a plan by Facebook to continue to raise their revenue and values on backs of other sites content and members. Developers and content creators of the world, it is time to free yourselves from the share cropping model that is web 2.0. What will facebook give back to the developer community for their efforts ? Will face book share a percentage of the value that is created in their company with the developers and content creators that have added the most value. The value… Read more »
trackback

[…] week a wrote quite a comprehensive post about Facebook Connect and how you can use it on your site. I also showed some quick steps on how you can implement it […]

trackback

[…] into my blog over the coming days to see how easy it really is. Remember to check out my post about Facebook Connect: Why and how to use it on your website for in depth information about Facebook Connect and its […]

trackback

[…] should know by now that i am a very big fan of Facebook Connect and it is great to see that it is now being implemented directly in programmes along side web sites […]

shibly
Guest

Hey,
Its great to see your article about fbconnect but for me it doesnt work right. I cant see the Connect logo on the page even though i edited the header. Please advise me.

Tanvir Hussain
Guest

I will integrate this into my website once new version facebook get stabled…!!!

blogpreneur online marketing
Guest

wow, nice reasons why we should have Fb Connect

wayne robbins
Guest

We implemented facebook connect on tribesmart in April 2009 – it is a really good application and we are seeing the benefits already.

niksa jakovljevic
Guest

Nice article, but it isn't all so great.
Facebook isn't giving you anything except few ids (userId,eventId…) and you totally depend on them. It's not just Facebook, it's any other vendor ( Twitter, Google Friend Connect). I'm thinking that in future we shouldn't be locked in with FB,Twitter or any other vendor, but to create system where every user has full rights over their Internet profile and can choose what profile info to expose to others and over API.

Best Regards,

Niksa Jakovljevic
Software Engineer
Webcom Inc.

mansharnand
Guest
Mr. Chewie, Thanks for the article. It is really nice. But the problem is, I see the same kind of info in lots of places. Everybody talks about the cover, not much about the inside stuff. You said in one of your past comments, ****From a developer stand point, Facebook have been very open and helpful about getting content onto the site and allowing people to create applications which can also generate revenue. **** I am not sure that statement is right. Most of the code is available for PHP developers. I am not a PHP developer and I am… Read more »
Eric
Guest

I agree with this.

The developer wiki wastes a lot of your time before giving you the real meat.

It's also very short on details if you are not making an FB Connect/native FB app.

And the forums seem to be mostly fellow 3rd-party developers posting problems and trying to help each other. Most of the time you won't get any response from an FB developer.

facebook connect
Guest

facebook connect users are volume getting higher day after day , i think it will be the highest used facebook thing.

Chewie
Guest

Yep, according to http://www.insidefacebook.com – Facebook Connect now has
60million active users per month and is used on over 80,000 websites.

2009/12/11 Disqus <>:

mfarney
Guest

I've noticed that all the big social sites are slowly coming together. We can log in using Facebook or OpenID for our Disqus accounts, Digg for Facebook and so on. Google can get info from all our accounts to give us additional data for our searches. The internet is soon gonna be just one big organism.
___________
Mathew Farney – Web Hosting

Neil
Guest

But isn't it rather irritating for users to have stuff from external websites posted up in their newsfeeds. I mean not everyone likes to make everything they do go public on facebook. And with the number of Logins these days, i'm sure anyone can just about use any other login like Twitter or OpenID to sign in.Is there any provision for a user to not have stuff published to his wall when he uses his facebook connect account?

Chewie
Guest

Hey Neil,

Basically, before any content can be pushed to you wall you have to tick a
box and allow it. You can easily not allow anything to be posted back to
your profile.

2010/1/2 Disqus <>

Muhamad Azree
Guest

i love u

Cheap Facebook Developer
Guest

facebook connect users to a website. And it getting popular day by day. I hope it will launched apps version soon.

Fabian Yañez Galvan
Guest
delllaptopbatteries
Guest

I know the stumbleupon to use Facebook connect it seems that the big FB are set to allow any website to use Facebook ,so I want to solve the problem

Pankaj Mittal
Guest

gr8

Anne kuria
Guest

hi chewie…i loved ur talk during the google forum at strathmore university in Nairobi….n this article is great!

SJ
Guest

The FB connection coming to a site near you… Thanks for the article

Forklifts Australia
Guest

Cheers Chewie, you kept it simple. I might do this way. Hopefully it will increase my traffic

ankit jayant
Guest

thanx mate u have been a lot more help to mr doin great job keep it up

Facebook App Developer
Guest

Facebook have been very open and helpful about getting content onto the site and allowing people to create applications which can also generate revenue.

Arichatterjee
Guest

Hey Chewie,
                  how quickly a facebook connect be setup? I am looking to setup this app for one of my websites.
-Ari. 

Saif
Guest

The best thing about this is that you can get free exposure. This is awesome!

wpDiscuz