Development

20 Excellent Facebook Scripts and Resources

December 15th, 2009

Networking has certainly become important to our daily life. Whether light-hearted interaction with friends or communicating with business clients the world over, socializing is integral to our personal and professional relationships. Facebook has gotten most of the buzz in the past few years, allowing members to easily stay connected with friends, family members and business associates.

Adding friends, sending messages, chatting, joining causes and networks for your institution or workplace, you can do it all here. Here, we’ll introduce you to 20 scripts that are typical for the Facebook user experience. Web designers and developers who want to integrate Facebook-like features into their websites and applications are in for a treat.

1. Post-To-Wall Application Using jQuery and PHP

A lot of information is made available on Facebook’s wall message board, including message content, users, senders, comments, dates, times and other relevant details. Though this may seem like complicated work, this tutorial by Antonio of woork.blogspot.com makes it easy for you to implement a similar post-to-wall feature on your own website. Use the few lines of Javascript and PHP code from the tutorial and watch your website flourish like never before. To make it easy for beginners, the tutorial deals with only one piece of information on the wall: the message content.

Facebook inspired post-to-wall application by employing JQuery and PHP

2. Lightbox

A lot of lightboxes are out there, but why not make the perfect one, like the one on Facebook? This great lightbox script was created by famspam. Writing code for even routine tasks can be cumbersome. But with the simplicity of JQuery, you can have a lightweight Facebook-style lightbox for your website. Capable of displaying DIVs, images and even entire remote pages, the lightbox creates pop-ups that are visually appealing and easy to use. You can get started here.

Facebook inspired lightbox

3. Auto-Suggest Search With jQuery

Automatically suggesting potential search results based on just a few letters entered by the user, this Facebook-style auto-suggest search engine is a true time- and effort-saver for users and enhances their experience of the website. For example, typing the letters “Fra” could bring up “France” or the user’s friend “Frank” as suggestions. This stylish search engine makes use of BSN Autosuggest libs and employs jQuery for the AJAX framework. Some of the features of this Facebook-style search are:

  • AJAX and auto-suggest support;
  • Renders support for search plug-ins;
  • Provides support across different browsers (Firefox, IE 5.5 and above, Opera, Safari);
  • Supports cache.

Download this Facebook-inspired auto-suggest search feature here.

Facebook inspired autosuggest search with jQuery

4. Modal Box Using MooTools

Stylish, lightweight and subtle, Facebook’s modal box is the best and most coveted of all current modal boxes. This JavaScript creates modal dialogues and wizards — i.e. dialogue sequences — without resorting to conventional page reloads and pop-ups. These are also sometimes used to display large versions of small images. The tutorial here takes the CSS and imagery from Facebook and combines it with the amazing functionality of MooTools in order to create the Facebook effect.

Employ MooTools to create Facebook like modal box

5. Elastic Plug-In

A major hit on Facebook, this jQuery plug-in is now counted among the most functional UI effects on the Internet. This elastic plug-in automatically shrinks or expands text areas according to the amount of text inputted by the user. The weight of this plug-in is what gives it its edge over competitors. Now, you can recreate this impressive Facebook-style effect of an elastic text area by simply following this tutorial.

Facebook style elastic plugin

6.Tipsy Plug-In

Wondering how to make a relevant tooltip pop up as users move their cursor over the title attribute of an anchored tag? Facebook provides inspiration for this jQuery plug-in, and you can implement this cool tipsy plug-in on your own website now. Aside from being a neat trick, the plug-in is easy to configure and lightweight. Read the tutorial to learn how to incorporate the Tipsy plug-in on your website.

Tipsy plugin inspired from Facebook

7. Activity Stream

This innovative plug-in for Movable Type 4.1 allows you to share, control and aggregate all of your activities around the Internet, along with several of your profiles from different services. The plug-in emulates the Facebook streams that adorn your wall. So, if you have a Movable Type blog and wish to exercise complete control of your activities on the ‘net, including showing or hiding certain activities, this tutorial on Facebook-like activity streams is sure to be a great help. To keep you from being locks in to any particular service, this plug-in can also publish your stream with the hAtom microformat and Atom.

Facebook-like action streams

8. Icons

Chatting with friends online is fun, but words are sometimes not enough to convey our feelings. Icons come in handy because they’re a cute, simple way to express emotion. Of course, saying “I love you” has a powerful effect, but an icon of a little heart pumping is so much more stylish. Facebook icons are a hit among users, and you can download 28 of them here, for free. They are available in SVG and high-resolution PNG format.

Facebook icons

9. Sliders Using CSS And MooTools

Website developers are constantly looking out for great ideas with which to enhance their websites. The slider controls on Facebook have caught the eye of many professionals. To implement similar-looking sliders for your project, read the tutorial here. It explains how to create them and how to control the height, width and opacity of images. The credit for this easy three-slider tutorial goes to David Walsh, a successful Web developer in his own right. Hats off!

Facebook-like sliders with CSS and Mootools

10. JBolo

Having to switch between two websites every few seconds — or even few minutes — can be annoying: for example, to chat with a friend on Gmail and browse photos on Facebook. With that in mind, Facebook took social networking to the next level when it integrated chat functionality. And now you can integrate a similar feature on your Joomla website using this tutorial. The distinctive name of this application is taken from the Hindi word “bolo,” which means to talk. So, get to work and let your visitors start talking!

JBolo

11. Boxy

Styled like the dialogue box on Facebook, this flexible box supports size tweening and dragging. What distinguishes Boxy from several other overlays is the availability of an object interface to control dialogues after creating them. To make usage even simpler, it also provides you with a jQuery plugin that allows you to include forms and links automatically, along with the “Ask helper” to present the user with an array of choices. Read the tutorial to implement the Boxy dialogue box on your website.

Boxy

12. Gmail- And Facebook-Style jQuery Chat

Everyone loves Facebook’s chat module. And this jQuery module lets you seamlessly integrate Gmail- and Facebook-style chat into your website. This chat script has many features, such as keeping chat boxes open and preserving a box’s state (and data) even when the page has been refreshed, just like on Facebook. Also, this chat is extremely simple to integrate. Learn more about this Facebook-style jQuery chat.

Gmail/Facebook Style jQuery Chat

13. Alert Confirmation Box Using CSS And jQuery

It happens often enough that while performing a particular action, we lose focus and mess up the task. Alert confirmation boxes can be a great help here. In asking for your confirmation of an action, the box makes you think through your request before finalizing it. For instance, to remove a friend from your friend’s list on Facebook, you need to click on the “X” button, which brings up an alert confirmation box asking you, “Are you sure you want to delete so-and-so from your list?” You are given the option of “Yes” or “No,” which finalizes the action. Alert boxes can help visitors to your website complete important actions, such as deleting items from a shopping cart. This tutorial shows you how to make an alert confirmation box like the one seen on Facebook.

Facebook-like alert confirmation box with CSS and jQuery

14. AJAX Pagination Using jQuery

Designing Facebook-style pagination to break up a long list of search results into several pages is no longer a difficult task. Though page numbers are not displayed at the top of Facebook, you are given the option at the end of the page to see more results. To create a similarly subtle yet helpful feature on your website, go through the tutorial here.

Facebook style ajax pagination with jQuery for will paginate

15. Cometchat

This is the best script for inline chat similar to the kind seen on Facebook. Get the script to give your visitors a chat environment to interact in while they browse your website. They can also update their status, like “Available,” “Busy,” etc. Facebook-style AJAXification ensures the feature does not reload every time a visitor clicks to another page. Hash URLs and notifications in the footer are some of the other features integrated in Cometchat.

Facebook style Cometchat

16. Image Cropping

The crop tool hides unseemly parts of a photograph and brings focus to the subject. Facebook introduced such a tool that members can easily use before uploading and sharing their pictures. To achieve this nifty combination of Javascript and PHP, check out this amazing tutorial.

Facebook inspired image cropping

17. Input Box

Integrated with the auto-complete function, the input box on Facebook allows you to search for and send messages to your friends. To include a flexible Facebook-inspired input box for your website, just grab this MooTools 1.2-compatible script and get started.

Facebook Style Input Box

18. Chat Room And Instant Messenger

Does the instant messenger and chat room on Facebook make you green with envy? Give your website the same with this Joomla module. Visitors can sign in to the messenger with their Facebook ID and password and use their friends list from Facebook. It really is as simple as that.

Facebook-like chat room and instant messenger

19. vBStatus (Status Display)

Isn’t it great that you can share what’s on your mind with all your friends in an instant, and vice versa. These status updates are one of the main features of Facebook. And below them is room for your friends’ comments and a option to “Like” your status. This feature is referred to as “vBStatus,” and you can include the same on your website by downloading it here. Users will have the flexibility to quickly change their status whenever they want using AJAX.

vBStatus - Status Display, the Facebook way

20. Facebox

Facebox is lightbox script that gives you the look of Facebook pop-up message windows. It can contain images, Flash movies, HTML and more. Facebox is a MooTools alternative to the original Facebox jQuery script. Read more about Facebox here.

Facebox

(al)

Tags: ,

78 comments for „20 Excellent Facebook Scripts and Resources
  1. Chandan on December 15th, 2009 at 8:12 am

    very nice scripts..

  2. Deineshd on December 15th, 2009 at 8:39 am

    Being a Facebook user I really like its features.Thanks for listing them here.

  3. The Lone Grainger on December 15th, 2009 at 10:17 am

    Very nice set of scripts. This will be very useful. Thanks for all your work!

  4. iMezied on December 15th, 2009 at 11:44 am

    cool scripts

  5. Peter Butler on December 15th, 2009 at 2:01 pm

    Excellent list, many thanks for bringing all these together in one place

  6. Belinda on December 15th, 2009 at 2:42 pm

    These are great – thank you!

    I was wondering if anyone knows of a way to pull Facebook status updates into a widget for a website, the way that you can with Twitter. There used to be a way to do it by taking the RSS feed, but now the feed appears to be gone (or they’re hiding it REALLY well). Has anyone been able to find a way to do this?

    • app103 on December 20th, 2009 at 9:00 pm

      You can do it with friendfeed. If you have a friendfeed account and connect it to your facebook account, it can pull in your facebook status updates.

      Then it’s just a matter of embedding a very focused search for only your facebook updates into your site and styling it.

      The url to use for the search would be this:

      http://friendfeed.com/search?q=service%3Afacebook+from%3AUSERNAME

      I have one styled and embedded into the sidebar of my blog, with all my activities, not just the ones from facebook.

      • Belinda on January 10th, 2010 at 9:11 pm

        Wow, thank you! I’ll check this out :-)

    • Belinda on January 12th, 2010 at 7:25 pm

      Actually, I found the Facebook RSS feed. It took a while – my GOD they are hiding it well – but it’s doable :-)

      • anggiaj on February 2nd, 2010 at 7:30 am

        Where? Please give told me :)

  7. el7cosmos on December 15th, 2009 at 5:48 pm

    Really nice scripts…im gonna look at it!

    • test on July 29th, 2010 at 10:26 pm

      very nice

  8. Ocim on December 15th, 2009 at 9:07 pm

    veri great collection you have, and i love facebook too

  9. Eko Setiawan on December 15th, 2009 at 11:58 pm

    Thank you, this is very useful for us

  10. Alec on December 16th, 2009 at 3:04 am

    Thanks for the link to CometChat… I bought it and its AMAZING! :D Thank you. I never knew it existed.

  11. Rene on December 16th, 2009 at 4:16 am

    Quite interesting!

  12. BeyondRandom on December 16th, 2009 at 5:53 am

    Thanks for the link to the Facebook icons…been thinking of using a few of theme but wasnt too sure on where to find them :)

  13. Sam Logan on December 16th, 2009 at 10:12 am

    Thanks for the great scripts, the Cometchat looks like a good script, I wonder whether it works better than the current Facebook chat.

  14. Waheed Akhtar on December 16th, 2009 at 10:14 am

    very useful scripts. thanks for sharing them.

  15. PelFusion on December 16th, 2009 at 11:22 am

    useful scripts

  16. rolin on December 16th, 2009 at 3:13 pm

    I fell so happy from your works sir.

  17. smash on December 17th, 2009 at 3:13 am

    nice info , thx

  18. Jenny on December 17th, 2009 at 5:55 am

    Cool Facebook scripts. Thanks for sharing.

  19. chandan on December 18th, 2009 at 1:01 pm

    wow man :) great list

  20. pix_l on December 19th, 2009 at 10:09 pm

    Really great collection of scripts! It’s really going to help me out! Keep em coming!! Stuff like this is priceless help!

  21. SD webmagic on December 21st, 2009 at 8:05 am

    Thanx.
    do you know any script that can read URL like Facebook does.
    you know with getting the title and thumbnail and part of the text.
    Regards.

  22. Ken the tech on December 21st, 2009 at 7:19 pm

    Well done. I’ve just tought to add some facebook funtionalities to my wordpress blog and this article is giving me some good ideas. Thanks for sharing :)

  23. Harsha M V on December 22nd, 2009 at 12:48 pm

    awesome post mate.

  24. SMiGL on December 23rd, 2009 at 11:26 am

    Good collection. jQuery is excellent framework

  25. eric on December 27th, 2009 at 6:33 pm

    Wow… thanks for tutorial

  26. 4fr1 on December 31st, 2009 at 1:14 pm

    Great article. That’s good idea for the script.

  27. denbagus on January 19th, 2010 at 12:02 am

    thank you for great information ..

  28. anggiaj on January 28th, 2010 at 4:47 am

    try to implemented :D

  29. Anton Hilman on February 22nd, 2010 at 8:31 pm

    nice script to build php like website heheheh

  30. Ward Meixner on March 5th, 2010 at 12:31 pm

    Thanks for the excellent post. Is this a wordpress website? I like that platform, really nice.

  31. hung on March 25th, 2010 at 6:59 am

    Gud Gud Gud! especially, the middle part of your blog. I have made a formula using which you can super traffic to your blog, it tells you about making a fan page that will add 50K fans in 30 days only and will give you superb traffic. Chk at my site, it is free and you will like it. Thanks

  32. Shantelle Nao on April 1st, 2010 at 12:21 pm

    I wanna thank the blogger so much not only for this post but also for his all previous efforts.

  33. Nick- BMW Parts Expert on April 12th, 2010 at 12:57 pm

    This is so helpful! We have our own Facebook Fan Page for BMW Parts and Upgrades but it is so plain. Thanks for sharing these tips.

  34. anika on May 5th, 2010 at 11:37 am

    very good. but as i dont know php. so i cant use it.

  35. ALBERT SJOERDSMA on May 9th, 2010 at 11:13 am

    Thank you for sharing the details. I found the information quite helpful. Just bookmarked the site and will be back soon.

  36. MySpace Girl on May 14th, 2010 at 9:30 pm

    awesome videos, that made my brain wet!!

  37. Sava Intl on May 26th, 2010 at 10:51 pm

    Very good,amazing,this is helpful in Developing like facebook applications.

  38. orkut scraps on June 24th, 2010 at 11:18 am

    please add a lesson for sending images to facebook wall

  39. Leda Focht on July 12th, 2010 at 11:19 am

    Ryan Schermer

  40. Brad Hollister on July 23rd, 2010 at 9:41 pm

    Awesome Stuff! Great loads!

    Brad Hollister

  41. Khurram on July 27th, 2010 at 10:11 pm

    These are very help full for us. Also here is another tutorial which is also best for this category “Facebook Style data extracting with URL using JQuery and PHP” on http://www.99Points.info

    Thanks and keep rocking noupe…

  42. edwin nyagano on August 5th, 2010 at 2:15 am

    tahnx, thats cool stuff

    • Bob on September 23rd, 2010 at 11:54 pm

      yeahh great collection!!

  43. Kamran on August 28th, 2010 at 10:07 pm

    Awesome Collection, Check out some other super facebook style tutorials over http://www.99points.info/category/facebook/

  44. Adolph Tango on September 6th, 2010 at 2:38 pm

    Hit me up for Marketing, Social Media and the like, videos, photography, flyers, design and promotional work I do it

  45. Ashley Lyndon on October 10th, 2010 at 1:03 am

    Some interesting information on here. Slightly off topic but I am so excited !. I saw Cats The Musical for the first time and the music plus the dancing is outstanding. It is an emotional journey that all the audience gets involved with !. ‘Cats’ will make you laugh and smile and touch certain places in your heart. Everybody left the theater singing, delighted and uplifted. If you get a opportunity to go and see ‘Cats’ I really recommend it.

  46. Vidhyatharan Kumaravelu on October 25th, 2010 at 2:58 pm

    Wicked scripts … using some of them on my site!

  47. Grow Followers on November 20th, 2010 at 9:27 am

    Hey! What a refreshing post! I mean it’s a good share. Thanks for sharing :-D

  48. benn on November 29th, 2010 at 3:02 pm

    bk web site design and hosting

  49. neo on December 25th, 2010 at 8:30 am

    a definite guide! will read about and implement this on my social net site :)

  50. Praveen on December 31st, 2010 at 11:06 pm

    Thanks sir.
    Really good collection.

  51. GoranB on January 4th, 2011 at 12:41 am

    hi all … some very useful stuff here but unfortunately havent found solution for my problem … as Iv opened my account it turned out to be my favorite music collection of bands I luv… now Im getting to point where its very frustrating to scroll alll the way down just to check if I already posted the same one …plz if someone has solution with specialized search that filters only my wall ? many thanx

  52. Mark on February 14th, 2011 at 10:26 pm

    Thanke for this good script for fesbook.it !

  53. Liz Salway on February 17th, 2011 at 12:13 pm

    I discovered your blog web site on google and check just a few of your early posts. Continue to maintain up the superb operate. I just additional up your RSS feed to my MSN Information Reader. Looking for forward to studying more from you in a while!…

  54. Amit on March 2nd, 2011 at 6:05 am

    Hi friends, http://www.amitpatil.me here you can find 3-4 facebook clone scripts ! enjoy ! hope u will like it.

  55. Dhawal D on March 19th, 2011 at 2:33 pm

    Very good resource compilation ..thanks

  56. Aaron Kay on March 20th, 2011 at 6:57 am

    Wow, great list of resources thanks!

  57. Joe on March 23rd, 2011 at 1:42 pm

    Need some major assistance here…. As a disclaimer – we are NOT programmers or have programming skills, therefore, we’d like some assistance in accomplishing the following….

    We have a new Facebook Page called Songward: facebook.com/pages/Songward-Purveyor-of-Great-Songs-From-Great-Artists/197141713650984.

    What we’re trying to accomplish is to bulk-post comments/links/photos, etc unto the Pages we have under our LIKES. For example – when using Facebook as a Page under Songward, we “Like” Filter Magazine, New Normal Music, New Music Seminar, etc, etc. as you can see. We can post comments, links, photos, etc to each of the Like Pages as Songward (the company). What we’re seeking is to post in bulk to the Pages we have as Like, so that we do not have to visit each Page individually in order to post our material, be it a comment, link photo, etc.

    Is this possible??

    Thanks!!!

  58. arif on March 31st, 2011 at 9:20 am

    Nice Script, It’s very usefull

  59. nnamdi on May 21st, 2011 at 7:23 pm

    Thanks a lot for takin the time to share this scripts. May God bless u

  60. Rodney on June 8th, 2011 at 12:32 am

    how dose face book get that pointer that points to the icon on share where Status, Photo, Link, Video or Question

  61. Steven on July 23rd, 2011 at 8:40 pm

    Where can I find a script or tutorial on how to copy the facebook function where when you post a link in the posting box, a image icon is automatically posted or pulled from that URL? This would be greatly appreciated!

  62. Shahbaz on September 18th, 2011 at 12:41 am

    Thanks for these scripts

  63. Mike on September 23rd, 2011 at 6:28 am

    This one helped me a lot. Greatly appreciated! :)

  64. Kevlyn on October 20th, 2011 at 2:08 pm

    Excellent Post. Thank you very much. Its very much helpful.

  65. Ios Greece on February 16th, 2012 at 5:16 pm

    Great post. This one really helped me with our pages

  66. penko on February 20th, 2012 at 2:14 am

    It is also much shorter and easy to develope your own App for facebook.

    i am using PHPforFB framework the best Facebook toolkit i ever seen.

  67. Arifur on May 6th, 2012 at 7:18 pm

    Hello all
    I need facebook viral script from that script
    have a admin panel
    mysql database
    If on ther any visitor gone than i can post his wall and his friennds wall.
    Thanks
    skype@ seasons.team

  68. vicky on May 14th, 2012 at 11:26 am

    Nice script tutorial. it help a lot to me

  69. KedarLasane on August 20th, 2012 at 1:11 pm

    I want to create my own like button like facebook.How they do that?

  70. Kapil Patil on September 10th, 2012 at 2:19 pm

    Thanks for this useful resources. Great collection.

  71. Indra Al-Sasak on October 10th, 2012 at 7:17 pm

    NICE Post…
    I like this post…

    I’ll try it one by one…. :D

    Thanks..

  72. Hassan Mehmood on January 30th, 2013 at 5:24 pm

    NICE Post…