Ajax CSS HTML jQuery

Fetch Facebook friends and Facebook suggest friends script

In this Fetch Facebook friends demo i am going to demonstrate below things, in short…for more info please see the code.

1) How to Fetch Facebook friends

2) How to imitate facebook suggest friends script using css and jquery

I assume everyone knows how to use facebook login for those who dont know how to use facebook login follow this link.
once you are logged in start Fetch Facebook friends.

Once you done fetching all the users info, css part starts. All you need to do is arrange them in different divs so that you can add remove different classes to it.
I have arranged them in this way…You can arrange it in a different and better way
Once you done screen would look look this Fetch Facebook friends

Its really easy to implement live search with jquery…just few lines of code and wooooow ! its Done.
Take a look at the code snippet below

Now lets take a look at mouseover effect and selecting friends.
Jquery has done 80% work done…u just need to link it one after another.

Here is how “Fetch Facebook friends” looks like finally !

I have tested this script in FF 3.6, Google crome 12, IE 7 and Opera. and below are the test results.

Firefox 3.6 Works Perfect !
Google Crome 12 Works Perfect !
Internet Explorer 7 No Rounded corners, Misplaced tick mark. There is less support in IE (It always sUcKs ! needless to say ๐Ÿ˜ก )

In case of IE script fails to show rounded corners while moving or selecting user (friend), but u can overcome this limitation by using rounded corner images instead of background colors.
I hope you enjoyed thisร‚ย Fetch Facebook friends script….If not i will try again in my next post ๐Ÿ˜‰


View Demo Download

For More info follow

Facebook Developers Home
Facebook Login Authentication
Facebook Javascript SDK
Facebook Javascript SDK Login


Leave a Comment


Notify me of followup comments via e-mail. You can also subscribe without commenting.


Let your friends know what are you reading

Share this post with your friends!