How do I use Facebook Connect Playground on Yola?

Hi Axel

You can use facebook connect with Yola.

There are a few minor gotchas.

1.) make sure you have created an app with Facebook.
- you should be able to see your apps and create new ones here:
http://www.facebook.com/developers/ap...

2.) next, you need to set your connect url on your facebook app so that it knows where it is allowed to send users back after they authenticate.
From the app page:
- Choose your app from the apps page above
- on the list of links on the right, click edit settings
- choose 'connect' from the submenu on the left
- set your connect url to your site's base url (in my example, I used http://www.toast38coza.com)

3.) now that we've got everything set up on facebook, we just need to paste the code into our website.

- Drop and html widget onto the page. For my example, I simply used the code from the example you provided above. Here's what I used:


<script src="http://static.ak.connect.facebook.com..." type="text/javascript"></script><script type="text/javascript">FB.init("4c6165bac76f24c5699880a8cfa4eca7");</script>
<fb:login-button length="short" size="medium"></fb:login-button>

<h2>Profile Picture</h2>
<fb:profile-pic uid="loggedinuser" size="square" facebook-logo="true"></fb:profile-pic>

<h2>Friends profile pictures</h2>

<div id="profile_pics"></div>
<script type="text/javascript">
var widget_div = document.getElementById("profile_pics");
FB.ensureInit(function () {
FB.Facebook.get_sessionState().waitUntilReady(function() {
FB.Facebook.apiClient.friends_get(null, function(result) {
var markup = "";
var num_friends = result ? Math.min(5, result.length) : 0;
if (num_friends > 0) {
for (var i=0; i<num_friends; i++) {
markup +=
'<fb:profile-pic size="square" uid="'+result[i]+'" facebook-logo="true"></fb:profile-pic>';
}
}
widget_div.innerHTML = markup;
FB.XFBML.Host.parseDomElement(widget_div);
});
});
});
</script>



NB: for the connect button, you want to use your API key where it says FB.init(). like so:


<script src="http://static.ak.connect.facebook.com..." type="text/javascript"></script><script type="text/javascript">FB.init("<your>");</script>
</your>

You can find your API key under the basic information for your application on your application's page on FB.

I've mocked up an example here:
http://www.toast38coza.com/facebook-c...

That should be enough to get you started. If you play around there's loads you can do! It's pretty cool :).

Hope that helps!
Cheers,
Christo