Junal on the run

Connecting with “Facebook Connect”

Posted on: August 5, 2008

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 ..

<script type=”text/javascript”>

FB_RequireFeatures([“XFBML”], function()

{

FB.Facebook.init(“YOUR_API_KEY”, “xd_receiver.htm”);

});

</script>

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.

Facebook Connect Button

Facebook Connect Button

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…

Log in form

Log in form

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..

include_once(‘facebook.php’);

$api_key = ‘API_KEY’;

$secret_key = ‘SECRET_KEY’;

$facebook = new Facebook($api_key, $secret_key);

$array=$facebook->api_client->friends_get();

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 …

$count =0;

foreach ($array as $id)

{

$count++;

?>

<div class=”img”>

<fb:profile-pic uid='<?=$id?>’ linked=’true’ size=’square’/>

</div>

<?php

if($count==20)

break;

}

and I have used a simple css class to show thumb image nicely …

.img {

float: left;

padding : 20px 5px 5px 10px;

width:50px;

overflow: visible;

}

have a look at the output ….

Showing 20 friends from my friends list

Showing 20 friends from my friends list

for more please have a look at the following links ……..

http://wiki.developers.facebook.com/index.php/Trying_Out_Facebook_Connect

http://wiki.developers.facebook.com/index.php/XFBML

http://wiki.developers.facebook.com/index.php/Facebook_Connect

1 Response to "Connecting with “Facebook Connect”"

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

View Junal Rahman's profile on LinkedIn
Subscribe to me on FriendFeed

Follow Me on Twitter

Archives

My photos

Downtown, Ottawa

Dream

Jasper, AB

Jasper, AB

Banff, AB

Folkfest, Bangladesh Pavilion Saskatoon

Lovely Sky

Stunt bikers on summer festival, Saskatoon

More Photos

Blog Stats

  • 420,271 hits
%d bloggers like this: