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. 1) How to Fetch Facebook friends

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

  
 FB.api('/me', function(response) {
  var i=0;
  var result="";
  var query = FB.Data.query("SELECT uid, name, pic_square, birthday FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me()) order by name");
  query.wait(function(row) {
        friends_array=row;
        for(i=0;i<row.length;i++)
        {
           // Process user info here
           // Uid = row[i].uid;
           // UserImage = row[i].pic_square;
           // UserName = usernamerow[i].name;
        }
   });
});

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

result+=" <div class='fbfriends' id='"+row[i].uid+"' >
            <div class='user float_left' >
               <img src='"+row[i].pic_square+"'/ >
               <div class='tick' ></div >
            </div >
            <div class='friend_name float_left'>"+row[i].name+"</div >
          </div>";

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

$(".fbfriends").each(function() {
  if($(this).find(".friend_name").html().toString().search(new RegExp(frd_name,"i")) == "-1")
     $(this).css("display","none");
  else{
     $(this).css("display","block");
     // show search count
     $("#filter").html($("#fb_friends_list").find(".fbfriends:visible").size()+" Matches Found !");
  }
});

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.

$(".fbfriends").live("mouseenter",function(){
	$(this).addClass("selected");
});
$(".fbfriends").live("mouseleave",function(){
	$(this).removeClass("selected");
});
$(".fbfriends").live("click",function(){
	if($(this).hasClass("clicked")){
		$(this).removeClass("clicked").removeClass("selected");
		$(this).find(".tick").css("display","none").css("position","relative");
		$("#filter").find("span:nth-child(2)").html("Selected ("+$('.clicked').size()+")");
	}else{
		$(this).addClass("clicked");
		$(this).find(".tick").css("display","block");
		$("#filter").find("span:nth-child(2)").html("Selected ("+$('.clicked').size()+")");
	}
});

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 :x )

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

 

About Amit

   Myself Amit Patil from Maharashtra (India). I have been working as a Web Application Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically i am a PHP developer but now a days exploring more in CSS and javascript.

Comments

  1. Thanks for this tips, really useful. :D

  2. Nice Post 8)

  3. Hi,

    Great script. I installed it, but it has your api key and authent dialogue, so it wont work on my site. I tried looking for this in the script so i could change it to my own fb developer key/app, so that it would work. Where do i change this within the script to get it working on my site? Thanks. :)

  4. Greetings Amit,

    Thank you. I had originally done what you described above but could not find where to change the app id in the script. After reading your reply i had a second look at the php page and found where to change it (: Works now. Greatly appreciated!

  5. P.S,

    With your skills, another very interesting script you could make could be a Facebook like script. Similar to the friends script but showing a persons favored likes on Facebook. That would be awesome! too..

    If you do decide to make one, please let me know.
    Thanks again.

    • Hello Mike, There are 22 script in my todo list :) facebook like “Like” script is also there. Same request has been made by one more visitor. I will try to find some time to make this script. thanks for the idea.

  6. Awesome. Looking forward to seeing it, and others you come up with :)

    Thanks again.

  7. Really nice tips. Before reading this tips, I don’t know how to fetch facebook friends. I am beginner in this developing type. I don’t aware much about this type of script. Really Nice Amit.

Trackbacks

  1. [...] on Facebook Sliders With Mootools and CSSFetch Facebook friends and Facebook suggest friends scriptMore Information on Fetch Facebook friends and Facebook suggest friends scriptFacebook Style Input BoxMore Information on Facebook Style Input BoxLightFaceMore Information on [...]

  2. [...] fetch facebook friends and facebook suggest friends script [...]

Speak Your Mind

*


*

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

More in Ajax, CSS, HTML, jQuery (23 of 41 articles)


     I was working on on of my clients project in which i came across Table manipulation with jQuery, tds and ...