Facebook is the most popular social networking. The Facebook User Interface is one of the most attractive, simple and easy to use. Facebook has many Ajax driven features and applications that are very impressive. Facebook is one of the showcase of great UI design.

In this post, we bring you tutorials and resources for creating facebook style interface. This round up aimed to help Web designers and developers who want to integrate Facebook-like features into their websites and applications. Below, you will find scripts, jquery plugin, mootools plugin, photoshop tutorials that are typical for the Facebook user experience.

Creating a Facebook-like Registration Form with jQuery

In this tutorial, you will learn learn how to create a facebook-like sign up form. This tutorial using jQuery and the $.ajax method to create a real time, asynchronous registration form, complete with error checking and browser redirects.

Facebook Style Footer Admin Panel Part 1

In this tutorial, sohtanaka teach us how to recreate the Facebook footer admin panel with CSS and jQuery.

How to implement a Post-to-Wall Facebook-like using PHP and jQuery

This tutorial show us how to implement Post-to-Wall Facebook-like in a website using just some lines of PHP and JavaScript code .Take a mind, every post in the Facebook Wall contains a lot of information (user, sender, message content, date, number of comments, …):

Facebook-Style Modal Box Using MooTools

Facebook’s Modal box is the best modal box around. It’s lightweight, subtle, and very stylish. davidwalsh is taken Facebook’s imagery and CSS and combined it with MooTools’ awesome functionality to duplicate the effect.

ajaxflagmenu

AjaxFlagMenu is a simple vertical menu developed JavaScript, design is inspired from a social website Facebook, this menu is dynamically through functionality of Ajax by the XMLHttpRequest object.

Facebook like Autosuggestion with jQuery, Ajax and PHP

In this tutorial we will learn how to developed Facebook like Autosuggestion user search with jQuery, Ajax and PHP. It’s simple and clean just you have to change the database details.

FCBKcomplete v 2.7.4

FCBKcomplete is jQuery plugin that allow us to create Fancy facebook-like dynamic inputs with auto complete & pre added values.

TextboxList meets Autocompletion

If you used Facebook on a regularly basis, you’ve probably come across their cool autocomplete method of adding multiple recipients to messages. Guillermo Rauch set out to build something similar and he did a very good job of mimicking this behavior using MooTools v1.2

jquery-bottomless-pagination

jquery-bottomless-pagination is a facebook-like jQuery plugin built on top of the Rails will_paginate plugin where results are returned and appended to the end of a list.

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 9lessons had combined some of my old tutorials demos in single page.

Elastic – Make your textareas grow Facebook style jQuery plugin

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

Reloaded: Facebook Style Wall Posting and Comments System using jQuery PHP and Ajax

Facebook style wall posting and commenting system. Try a new reloaded version of demo which is almost similar to Facebook style. My previous Facebook style posting system was not so much like the original Facebook posting style and also there was no commenting system. So I created this tutorial again to complete the commenting system and I tried my best to give my dear users a complete posting script with comments.

Facebox

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

tipsy - Facebook-Style Tooltip Plugin for jQuery

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.

jQuery Plugin: Tokenizing Autocomplete Text Entry

This is a jQuery plugin to allow users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook.

Gmail/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.

Facebook Style Image Cropping

While others are sun bathing somewhere on the shores of Black Sea I received another interesting task – to implement cropping for user uploaded profile images. My first idea was to port MooCrop to Mootools 1.2 and apply couple of modifications, but the customer wanted the cropping to be exactly like in Facebook. For those who don’t know it is plain old boring mouse drag.

Facebook Sliders With Mootools and CSS

Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and the slider. A slider allows the user to drag a slider across a given plain to set a value instead of the boring, tedious text box. Davidwalsh has created a very simple 3-slider system that allows a user to modify the height, width, and opacity of an image using just sliders!

PHP Facebook Paginator

While building the Viddler Facebook application, kyleslattery needed to create a pagination tool that worked just like Facebook’s. After looking at their HTML and their logic of what pages to display, He came up with one, which he releasing for anyone to use.

An Alternative to Pagination : Facebook and Twitter Style

This article is about how to create a similar stuff to twitter and Facebook’s way of displaying data.

fcbkListSelection v 1.1 – like facebook friends selector

fcbkListSelection – fancy item selector (like facebook friends selector) with wide range of options.

FaceBook Like – jQuery and autosuggest Search Engine

FaceBook Autosuggest Like is a powerful jQuery plugin to transform an input field into a real time autocompletion search engine, designed like facebook one.

Facelist

Facelist provides an autocomplete suggestive search built with jQuery and a little CSS3 wizardry. Its easy to set up, implement and is completely open source, meaning you can edit, cannibalise and change the underlying code.

Display Collapsed Comments like Facebook with Jquery and Ajax

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

Facebook like suggestions with jQuery content appears and disappears

This post 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.

Facebook Style Alert Confirm Box with jQuery and CSS

Facebook Style Alert Confirm Box with jquery plug-in jquery.alert.js. It’s simple just changing some line of CSS code.

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’ve seen by providing an object interface to control dialogs after they’ve 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.

Incoming search terms for the article:

• facebook sign up
• fcbkcomplete tutorial
• How to implement a Post-to-Wall Facebook-like using PHP and jQuery
• faceboo
• facebook like interface
• sign up form
• facebook form
• facebook wall css
• facebook style tutorial
• facebook interface