Home > Web dev > 16 Javascript Tutorials Inspired By Social Networking Sites

16 Javascript Tutorials Inspired By Social Networking Sites

October 11th, 2009 Leave a comment Go to comments

Social networking websites play a big part in most peoples lives these days. They play an even bigger part in the lives of web designers/developers. So these websites are a good place to get inspiration.

As an amateur developer this may become a problem, if you see a site like Facebook with a nieve view of javascript it would be very hard to mimic the effects going on there. Some of them are really quite amazing. However with the fairly recent surge in popularity of javascript libraries it has become very easy for us to pull of brilliant effects.

So here’s a short list of a few tutorials on how to mimic the effects seen on social networking websites using libraries such as  jQuery, Mootools and Prototype.

1. Facebook Style Chat Using jQuery

Facebook has a brilliant instant messenger built into it which works really well. This tutorial shows you how to make something similar.

2. Twitter Like Ajax Search

On twitter you can search for tweets, although it has changed recently, but it was a nice example of an ajax search engine. This tutorial shows you how to do exactly that.

3. Facebook-Style Modal Box In Mootools

Modal boxes, sometimes called lightboxes, can be seen throughout Facebook and it works very well. Sometimes things like that can be obtrusive.

4. Facebook Modal Boxes In jQuery

Same as above, but in jQuery

5. Twitter Drop Down Login Box With jQuery

Twitter has recently changed their home page, this features a drop down login form which looks great. This tutorial shows you how to recreate that.

6. dZone Voting System

dZone has a voting system which looks like every other link sharing voting system. But it works well, so this shows you how to replicate it.

7. Facebook-like Inputs With Prototype

I love facebook’s input boxes, they look great. This tutorial shows you how to do that with Prototype.

8. A Digg Style “Share” Tooltip With jQuery

If you look below a post in Digg you will see a “share” link. When you click it a few options of how to share it show up. Quite a nice feature which would fit into almost any website. So get learning this tutorial.

9. Facebook Auto Complete

This tutorial was inspired by facebook’s autocomplete feature. Works very well. This will show you how to mimic it with jQuery. No demo available unfortunatly.

10. Twitter Load “More” Widget With Mootools

This is another one of Twitter brilliant ways of bringing ajax to us. When you click the “more” button at the bottom of the page it loads more posts. This tutorial shows you how to mimic that.

11. Twitter Style Alert With jQuery

I really like Twitters alert system, it’s very unobtrusive yet gets your attention. Something which I’ve introduced on other websites.

12. Recreate the Digg Header With jQuery

Digg has quite a nice header, it’s not spectacular but it works well. And usability surely has to come before sexyness right?

13. Twitter Follow and Unfollow System

Twitter seems to be dominating this post, but it’s a well made site. So heres another tutorial on it.

14. Facebook Inputs With Mootools

Similar as mentioned before, but with Mootools.

15. Twitter Like Character Countdown With Mootools

When you write a new post in Twitter you have 140 characters to play with. Next to the textarea there is a countdown. This tutorial will show you how to mimic it with Mootools.

16. Recreate Twitter

This fully featured tutorial will show you how to recreate the whole of twitter using Mootools, PHP and MySQL. You will learn lots following this tutorial.

  1. No comments yet.
  1. No trackbacks yet.