Connecting with “Facebook Connect”
Posted August 5, 2008on:
Before start with Facebook connect lets be familiar with 2 things that are essential to use Facebook Connect APIs.
What is Facebook Connect?
Facebook Connect is the next evolution of Facebook Platform — enabling you to integrate the power of Facebook Platform into your own site.
With Facebook Connect, you can enable your users to:
- Seamlessly “connect” their Facebook account and information with your site
- Connect and find their friends who also use your site
- Share information and actions on your site with their friends on Facebook [from facebook wiki]
What is XFBML ?
Facebook uses XFBML as a way for you to incorporate FBML into your HTML. To see the all supported XFBML tags, please have a look here.
Now, I would like to use Facebook PHP client library to get my all friends in my site !
First of all, lets install an application to get the API key. In my case I named it as “fbconnect-test“. So we got an API and a SECRET key to bring Facebook in my site 🙂
it will be much easier to download given examples source code by facebook developers here. Lets open one HTML file (it could be demo1.htm) then renamed it as demo1.php
now, put your API key here ..
up the file(s) in your server and then run it. You suppose to see a log in button if you used the source code.
If you are not logged in Facebook then a log in prompt will appear so that you can insert your log in information. In my case it looks like the following…
ok once im logged in, I can access my friends list and show them in my site ! So let’s do that for time being …..
we have got API and SECRET KEY right ….
lets up the Facebook PHP client library in the server and then call friends list API to show them in our site..
$api_key = ‘API_KEY’;
$secret_key = ‘SECRET_KEY’;
$facebook = new Facebook($api_key, $secret_key);
this $array supposed to return our friends list…lets show our friends picture in our site from the array….
in my case i’m just showing 20 friends …
foreach ($array as $id)
<fb:profile-pic uid='<?=$id?>’ linked=’true’ size=’square’/>
and I have used a simple css class to show thumb image nicely …
padding : 20px 5px 5px 10px;
have a look at the output ….
for more please have a look at the following links ……..