Facebook Style Add Friends Script

I really appreciate facebook guys for making such a excellent UI.Whenever i see any new feature in facebook i get amazed “How did they made it?”.One day i saw a script for adding multiple recipients to messages and this script grabbed my attention like other scripts on facebook.In first look this script seem critical and innovative to me (may be because i was new to web development that time) but later on after long time i found that it was nothing but sight Cheating.i decided to make exact same script and I MADE IT.

I have made this with jquery,

Live DemoDownload

 

Implimentation Step By Step

  • 1) Include javascript and stylesheet
    <script src="js/jquery.js"></script>
    <script src="js/facebookStyleInput.js"></script>
  • 2) Creating wireframe
    <link rel="stylesheet" type="text/css" href="styles/facebookStyleInput.css">
    add below text to your page
    <div id="fb_holder">
    <input type="text" name="friends" id="fb_inputbox">
    </div>
    id=”fb_holder” can be anything you want. you can replace “fb_holder” with any other string.
  • 3) Attach wireframe to javascript (initialisation)
    <script type="text/javascript">
    var mainHolder   = "#fb_holder";
    var inputBox     = "#fb_inputbox";
    var ajaxFilePath = "";
    </script>
    Assign whatever element names you have used in wireframe to the javascript variables.
    ajaxFilePath will hold path of file that will return matched list.if your file is in folder ajax then ajaxFilePath = “ajax/ajax_server.php”
  • 4) Database Installation
    a) In the same directory you should find files named facebook.sql and config.php.
    b) Import facebook.sql to Mysql.
    b) Open config.php file and make neccessary changes in it.
  • 5) Other Settings
    Make sure that ajax_server.php file resides in same directory where index.php file is,but if you want to change its location then you need to make change in configuration variable named ajaxFilePath enter full path of ajax_server.php file.
  • 6) And you are ready to go…!
Contact

Comments and suggestions are always welcome, your suggestions will help make this script more useful.so if you have suggestion do contact me at www.amitpatil.me/contact or follow me on twitter

 

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 the info

  2. mailto.amitabh@gmail.com' Amitabh Roy says:

    Hi Amit,

    great script,just like google suggest, great work.
    Can you get in touch with me at 9681298317 or my email please.

  3. I’m going to take a stab at using this with just classic ASP with access database. Me likey :)

  4. I’m not sure how it works, really. Do you put this codes in your own website and let people to suggest their friends? Please contact me via email as I may need your help…Many thanks in advance.

    • Nice to hear from you. well, this is just a simulation of facebooks page. this script is not connected with facebook anyhow. i have just made its UI and functionality like one of facebook page.
      i m sure u r under impression that this script automatically adds frinds to facebook friends list, if so its not.

  5. chamilsanjeewa@gmail.com' chamil sanjeewa says:

    Thank u very much
    Love U

  6. Just wanted to drop a note and say thank you. Had to make some edits to pass an id for the user, but easy to do:) Thanks!

  7. pls am new to php programming.and i will love to develop one myself.can you help me go about it.i followed you up from planet source code and i really love your application.more power to your elbow.

  8. how we can post all values added to textbox

  9. Hello visitors,

    I have updated the script and from now onwards you can pass ids to next page. Thanks for the suggestion.
    My idea behind making this was just to copy facebooks UI so i never thought about passing selected ids to next page. it should be there otherwise this is just useless.

    So i have added this feature.

  10. Good points all aornud. Truly appreciated.

  11. hi nice sir thanks for help

  12. hello sir nice help me for second time

  13. Works great in firefox and chrome, but in ie the main div (#fb_holder) becomes wider than the set width (all added elements appear on a single line instead of wrapping within the main div). Any suggestions? Thanks!

  14. I really appreciate with the above information. Thanks for this interesting information.

  15. I keep getting an ‘object doesnt support this property or method’ error, in jquery.js
    It seems to only happen in IE. But if you refresh a few times it does sometimes work.
    Do you know why this is?
    Thanks

    • I have also faced this crazy and funny thing with IE. It happens a lot in IE 6. Every time there was different solution, so i cant suggest a specific solution. Do u know for which line/word its causing problem ??

  16. It will be awesome if you can explain us, how can we select one friend and if this friends is selected, it doesnt appear more on the list … :wink:

    THANKS FOR ALL

    • u will need to pass textarea values to ajax page and make change in query like “where id not in($comma_separated_values_from_textarea)”

  17. The error is:

    Message: Object doesn’t support this property or method
    Line: 123
    Char: 183
    Code: 0
    URI: /messages/jquery.js

    Thanks

    • is this error related to my script or you are making something else ? which browser u r using ? if u are using IE < 7 then there are few in jquery that IE doesnt support. are u using minified jquery version or regular version ?

  18. Its related to your script. Im using IE8. I am using regualr version of jquery.
    Thanks

  19. Solved! I seem to have sorted it, i just installed the latest jquery version and now its working fine. Thanks for your help.

  20. THANKS,GOOD ARTICLE
    I LIKE THIS BLOG TIPS.

  21. Amit, could please provide a sample to how to pass the textarea id’s to an ajax form?

    • what do u mean by ajax form ?? do u mean ajax request ? if so then u can simply pass textarea value by using $(“#selected_ids”).val();

  22. Thanks, Amit. This is an amazing post. I just have a problem in the autocomplete function. When I have list tags on top of this facebook script, they are selected when clicking the arrow down button. Please help identify the problem.

  23. Thanks, Amit. This is an amazing post. I just have a problem in the autocomplete function. When I have list tags on top of this facebook script, they are selected when clicking the arrow down button. Please help identify the problem. Thanks in advance.

  24. here you go… thanks!
    http://postimage.org/image/xg7nbevs3/

    • Aha…now i got the idea :)
      When u use key up-down, other list elements on page become active…right?? I have had this problem before. I will make changes to the script and will get back to you soon…

  25. I have been try to make this script work for multiple inputs in a while loop.

    For instance, see the below html code.

    And i have done the below in the javascript code to get the id of each field of the html form.

    var each_id = $(‘.main_fb_inputbox’).attr(“id”).replace(‘fb_inputbox’,”);

    But still, it only works for the first html form.

    Is there any way you can help me out? Thanks in advance…

    • I am sorry to say but the autocomplete script i am using supports only one instance on 1 page. But if you manage to use any other autocomplete script which other code intact it should work.

  26. Hai, i am still looking on you as regards the question i asked. Thanks…

  27. The major problem now is how to avoid adding multiple ids to the selected text area box.

    That is, how to check if a specific id has already been selected and avoid showing it to the user the second time.

    • Its simple. suppose u have 20,21 selected then send this ID to ajax_server.php file via ajax request. And at the server side make change in query like “where id not in (20,21)” so that values with id 20,21 will get removed from result.

  28. what about insert this data to database Amit…….?

    • Yes whenever you select any value it stores its id in a textbox which u can use to store in database.

  29. is there a way to limit the number of tags? Can i set a max # of tags?

    • Open index.php and define “var inputLimit = 5;” and in the “facebookStyleInput.js” goto “jQuery.fn.addFriend = function(text,id)” and replace that complete function with this code

      	jQuery.fn.addFriend = function(text,id) {
      		if((($(mainHolder).find(".added").length)) < inputLimit){
      			if(text)
      			{
      				if($(mainHolder).find("div").attr("class") != "added")
      					$("
      "+text+"x").prependTo($(mainHolder)); else $("
      "+text+"x
      ").insertAfter($(inputBox).prev()); // hide list $(".list").css("display","none"); // clear textbox $(inputBox).val("").focus(); } // insert selected id to array ids.push(id); // print selected ids in textbox $("#selected_ids").val(ids); }else{ alert("You have reached limit"); } }
  30. Hi,

    Im new to php, I dont understand anything :)
    I have register login script (ofcourse not made by myself),
    Can this be added to that script?
    What would be the way?
    I read your installation file but…Im confused.

  31. click2madan@gmail.com' Mikmark says:

    hello Amit,
    I want to remove dublicate added Country name field in TextArea.How can i achieve this through your code so that i should avoid already added country name?Pls provide me help in this issue.
    Thank you

  32. very nice artilce you have and tricks here thanks

  33. Thanks for wonderful script

Trackbacks

  1. [...] that this should be something divine, like i was thinking about one of the facebook’s script, add friends to the list. In case of facebook it was sight cheating but in case of google its not sight cheating its purely [...]

Speak Your Mind

*


*

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