The Facebook User Interface is one of the most popular, attractive and simple to use. At the same time, it is a challenge for designers to create these kind of user interface. These jQuery plugins help designes to create facebbok style UI with ease.

1. Boxy – Facebook-like Dialog Overlay With Frills



Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I have seen by providing an object interface to control dialogs after they have been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.



2. Facebook Style Alert Confirm Box with jQuery and CSS



I received a request from my reader that asked to me how to implement facebook style alert box. So I had designed Facebook Style Alert Confirm Box with jquery plug-in jquery.alert.js. It is simple just changing some lines of CSS code.



3. Facebook style Unobtrusive Ajax Pagination for will paginate with jQuery

I really like the pagination that Facebook provides on their status tab. It is not true pagination in that the result set is changed, but it does add additional results to the bottom of the set. Anyway, I went ahead and created a plugin for jQuery based on the wonder Rails plugin will_paginate. Introducing, jquery-bottomless-pagination.



4. Facebook style information box with jQuery

On Facebook there is a big information page in each profile, there is also a smaller one to the left and this time the requirement was to create exactly the same functionality. We need to show certain information that the user wants to show there, and also having a small control box with check boxes that when checked or unchecked will send an Ajax call to the server to update which fields are shown



5. Facebook style photo tagging with jQuery, Ajax and Joomla

This tutorial explains how to create facebook style Photo tagging with jQuery.



6. How to create a Facebook Friend Selector using jQuery and PHP or Grails

Create a Facebook Friend Selector using jQuery and PHP or Grails.



7. Facelist jQuery Plugin

Media By Ian Tearle presents the jQuery Facelist project. Built for the sole purpose of providing a Facebook style autosearch, Ian is letting you build upon this excellent product.



8. FaceBook Style Image Editing jQuery Plugin

I have just finished making my first jquery plugin, the FaceBook Style Image Editing jQuery Plugin. It is not so hard after all. This will add a link when hover on image. For instance, if you hover on your profile image on facebook. This Plugin meanwhile works on Div Only



9. FaceBoox style autosuggest with jQuery

This autosuggest search engine is inspired from facebook for design, uses jQuery as ajax framework and BSN Autosuggest libs. This autosuggest search engine is inspired from facebook for design, uses jQuery as ajax framework and BSN Autosuggest libs.



10. Facebook Autocompletion JQuery Plugin

I was evaluating all the available JQuery plugins to get a Facebook-like contact autocompletion functionality, and deemed the one by Ian Tearle to be the most complete available. However, most complete does not mean fully done, or bug free, and I learned this the hard way doing an initial implementation on a project I?m doing at work.Spending all day with the lovely Firebug debugger and testing in both Firefox 3 and IE7, I can say I have it working the way I need it to. My version fixes the f



11. TextboxList jQuery Plugin

TextboxList turns normal textboxes into a widget which can be navigated with the keyboard, effectively turning your input into a ?list? of items that can be easily deleted. It comes with an Autocomplete plugin.



12. Facebook like suggestions with jQuery content appears and disappears

This post IS about how to implement Facebook-like users Suggestions. When you click delete(X) button “Do not show this suggestion” the content disappears slowly and to get the new suggestion content appears. I had developed this using jQuery, PHP just some lines of code.



13. Facebook like multi Toggle Comment Box with jQuery and PHP

Implement Facebook like toggle comment box for every updated wall. I had designed a simple example it contains of very simple jQuery and PHP code.



14. Facebook Style Wall Post Application with jQuery and Ajax

Are you looking for Facebook style wall post application. It contains update, comment and delete with jquery animation effect. In this post I had combined some of my old tutorials demos in single page.



15. Elastic – Make your textareas grow Facebook style jQuery plugin

This Jquery plugin makes your textareas grow and shrink to fit its content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and its competitors is its weight.



16. Display Collapsed Comments like Facebook with Jquery and Ajax

In this post I want to explain Facebook like Collapsed Comments, while clicking View all Comments link it displays all the existing comments. I made a demo with jquery, ajax and php.



17. Facebook Style jQuery Chat

Everyone loves the gmail and facebook inline chat modules. This jQuery chat module enables you to seamlessly integrate Gmail/Facebook style chat into your existing website.



18. FCBKcomplete

FCBKcomplete allows to generate fancy facebook-like dynamic inputs with auto complete & pre added values.



19. Facybox

Facybox is a jQuery-based, Facebook/Fancybox-style lightbox which can display images, divs, or entire remote pages. It is simple to use and easy on the eyes.



20. Tipsy – Facebook-style tooltip plugin for jQuery

Tipsy is a jQuery for creating a Facebook-like tooltips effect based on an anchor tags title attribute.



21. Simple facebook-like textbox dropdown jquery plugin

I created this plugin as a colleague of mine asked to do similar functionality as the status dropdown on facebook?It is very very simple, and could be extended with a lot of functionality, but I will leave that as a challenge for later or others.



22. Creating a Facebook-like Registration Form with jQuery

Facebook is a showcase of great UI design. And as it has become a major part of our lives, it has also raised the bar for web development, pushing developers to meet higher expectations. This however has a good side ? it challenges web developers and designers to better themselves and constantly improve their work. In this tutorial, we are going to learn from the best, and create a facebook-like sign up form. So go ahead and download the demo files to start learning!



23. Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It is simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

40 Responses to “23 Best jQuery Facebook Style Plugins”

  1. saurabh shah says:

    This is really awesome post ! i love it ! thanks for sharing it …

  2. [...] 23 Best jQuery Facebook Style Plugins [...]

  3. avanzaweb says:

    Nice tutorial about how to redesign with facebook style

  4. Matt says:

    A decent enough overview but why is every screenshot skewed and horrifically angled with a gradient overlay on the corners?

  5. ntoupis says:

    Number 13 is a MooTools plugin.

  6. [...] 23 Best jQuery Facebook Style Plugins | jQuery Wisdom (tags: jquery facebook plugins javascript inspiration development) [...]

  7. Jim says:

    Hi ntoupis,
    Thanks for informing :) . I have linked to the jQuery page of the plugin now.

  8. Jim says:

    Hi Matt,
    It is a style of beautifying the images in the site. I’ll try to skew it better the next time :) ..and i guess it won’t be horrific :P

  9. [...] 23 Best jQuery Facebook Style Plugins | jQuery Wisdom (tags: webdesign inspiration jquery plugin) [...]

  10. Dzinepress says:

    excellent plugins of jquery.

  11. Konstantin says:

    Very sweet Jim, thanks for the list!

  12. [...] Shared 23 Best jQuery Facebook Style Plugins | jQuery Wisdom. [...]

  13. Suren says:

    Very cool and impressive collection work.
    Thank you.
    Suren

  14. sao sang mo says:

    I’m searching for the tutorial about function which can fetch the content of one links automatically. Hope you help me!
    thanks

  15. Sedat Kumcu says:

    Great list. Thanks for this list.

  16. Sedat Kumcu says:

    Thanks for this great plugins. Best regards.

  17. Karl says:

    You are my hero thank you.

  18. ghoper trias says:

    Hi,

    Im a novice developer, you have a nice tutorials but I have a request, can you give me a link of a tutorial of facebooke like atocomplete search engine because I read one of your tutorial about it but it doesn’t work properly when I press arrow down nothing happens although it suggest data from database.

    Thanks,
    ghop’z

  19. omkar says:

    Hello this is amazing post. should i use any one from this is my asp.net website. becuase I m new bee in web devlopement. so i don’t have idea about how to use jquery in asp.net.

    Please help me or guide me to intigrade any sample in my web site.

    Thanks And Regards
    Omkar

  20. Manohar Solanki says:

    Hey,
    I saw each one of the above.
    Need a suggestion about how the http://jqueryui.com/demos
    works?
    Let me know.

  21. Budi Susilo says:

    Great post.. Thanks

  22. neo says:

    great tutorial. im just overflowed with information

  23. Sammy says:

    Very interesting stuff.
    Thank you very much!

  24. grafikmaker says:

    Das ist eine schöne Sammlung. Hier findet man wieder neue Anregungen für eigene Projekte.

    Thanks.

  25. Mayank Mehta says:

    Awesome post …very very helpful …..

    JQuery plugin for GMAIL/FACEBOOK is for PHP and MYSql …. i would like to see something with ASP.NET …

  26. Mike says:

    We also have a JQuery Facebook style component that lets developers create their own site tours like the new Facebook pages.

    Visit here to see a demo…
    http://www.redcritterguide.com

    Use promocode TRYRCVIP for access to your free invitation only membership – invitations are first come first serve.

  27. Andry Fixa says:

    Great!!! This is very useful for me!

  28. Chichote says:

    Excellent site, I let my contribution, a gallery of images facebook style.

    http://chichote.com/2011/galer.....ery-y-php/

    Greetings

  29. Martin says:

    I wish I would have found this site earlier. It would
    have saved me from getting wiped out

  30. Etay says:

    Simply Amazing – Thanks a LOT

  31. rimpe says:

    Great collection can be a source of inspiration. Thanks a lot.

  32. [...] 23 Best jQuery Facebook Style Plugins | jQuery Wisdom [...]

  33. zayar says:

    Thanks for your excellent collection. I am looking for the Facebook like commenting system. Your No.8 is what I am looking for.

  34. tam says:

    this really a excellent post, save my time

  35. nandida says:

    big top list of plugins!

  36. Jesuskaoz says:

    thanks a lot.!!!! this post is awesome :D

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>