How do I use Facebook Connect Playground on Yola?

  • 4
  • Question
  • Updated 9 years ago
  • Answered
Been trying to figure this out, but don't see a how to or guide. Am I missing it? I'm talking about this: http://developers.facebook.com/tools.... Thanks!
Photo of Axel Buhrmann

Axel Buhrmann

  • 4 Posts
  • 0 Reply Likes
  • looking for advice

Posted 9 years ago

  • 4
Photo of Christo

Christo

  • 95 Posts
  • 13 Reply Likes
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/js/api_lib/v0.4/FeatureLoader.js.php/en_US" 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:


&lt;script src=&quot;http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;FB.init(&quot;<your API key here>&quot;);&lt;/script&gt;


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
Photo of Axel Buhrmann

Axel Buhrmann

  • 4 Posts
  • 0 Reply Likes
Thanks for the quick and detailed response - will be playing around with it shortly!
Photo of Axel Buhrmann

Axel Buhrmann

  • 4 Posts
  • 0 Reply Likes
Howdy. Clearly I am doing something wrong here - it doesn't look half as interesting as your "Red Pencil" mockup (nice template, btw, is it new?)

See http://web2africa.co.za/

Look under the iPhone/Twitter-feed image; I get some big letters saying "Profile Picture" and "Friends profile pictures", but no Connect logo, as in your example?
Photo of Christo

Christo

  • 95 Posts
  • 13 Reply Likes
ah ... here's the problem:

Get Satisfaction truncated my url in my paste above:

src="http://static.ak.connect.facebook.com..."


.. I added a code block on my yola site ... copy that code instead and it should work i think.

Red Pencil is one of the new templates that was released with the premium styles (it's a free template though) .. the quality on the new templates is pretty good i think :)
Photo of Axel Buhrmann

Axel Buhrmann

  • 4 Posts
  • 0 Reply Likes
Aha! OK, that works out; I see Vinny manages to get his pic on there as one of my contacts! :-)

Now, how does this app relate to what Facebook is talking about here?

http://developers.facebook.com/tools....
Photo of Christo

Christo

  • 95 Posts
  • 13 Reply Likes
Well ... basically, you need an app in order to be able to do what facebook is talking about there (which is, incidentally the code you have pasted into your Yola site ;) ).

How it works is that you register an app with Facebook. When the user clicks on the connect button, Facebook asks the user if they are ok with your app accessing their facebook stuff (Facebook requires that applications are explicitly authenticated by the user). Once the user has granted your application access to their facebook ('connected' it so to say), then you can do stuff like retrieving their profile pictures, friends .. etc.

So basically the application you just set up is your registed identity with Facebook as a developer.

... hope that makes sense!
Photo of John-Scott Dixon

John-Scott Dixon

  • 35 Posts
  • 1 Reply Like
Facebook requires 5 users to submit your application. If it isn't submitted, how does one get users? Just trying to set up Facebook Connect on Yola! See attached error message.
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hi John-Scott - I'm not sure, I guess you have to find people who would be interested in submitting your application for you. I'll ping Christo to see if he can give you any feedback :)
Photo of John-Scott Dixon

John-Scott Dixon

  • 35 Posts
  • 1 Reply Like
Applications built for the sole purpose of Facebook Connect are of little use to anyone else. So, that requirement isn't logical. I must be missing something - thanks for passing to Christo.