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.

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.

Web Site
Download

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

Web Site
Demo

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

Web Site
Demo

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

Web Site

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.

Web Site
Download

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

Web Site

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.

Web Site
Demo
Download

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 following issues:

• - Not all results that are returned are displayed
• - Duplicate contacts can be inserted
• - When searching, the user is not notified that a search is being performed
• - The ID was being displayed with the search results, this has now been removed

Web Site
Demo
Download

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.

Web Site
Demo
Download