Create A Dead Simple Twitter Feed with jQuery

Introduction

In this tutorial, we will be creating a jQuery script that retrieve twitter tweets from user account. It's quick and easy, come with link, hash tag, alias parser as well as time posted (calculated relatively). Most importantly, everything has a class and will be flexible to style and match your design!

UPDATE #2: I forgot to mention one thing! Twitter has rate limits. You can only call this API 150 times per hour per IP. The best way to solve this is using cache. So, instead of calling the API in $.ajax call, you get it from your server. A PHP is scheduled (a href="http://adminschoice.com/crontab-quick-reference">CRON Job to retrieve updated twitter feed in certain time and create the cache file once it's loaded. Don't worry, nettuts just released a tutorial about it :) How to Create An Advanced Twitter Widget

HTML

We need a simple HTML layout, linked with jQuery framework and twitter script. Also, a div with id called "jstwitter" - we will be appending all tweets from twitter server, processed it and chuck it inside.

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

How can i use this to make more div load twitter. ?
Something like JQTWEET.loadTweets('#jstwitter2'); JQTWEET.loadTweets('#jstwitter'); Reply

Gregory

Wed, 28th November 2012

Its not working for me.. Even when I click on the 'Demo' button both in Chrome & Firefox (mac) No feed is shown, only the header tag info.. I downloaded it and put my twitter user name in, same problem.. I see no feed what so ever..

As of today, March 5, 2013, Twitter has started blackout testing that will shut off the JSON API. They are moving over to a REST API that requires authentication and stricter display guidelines on how Tweets appear. Any updates on how to use the new API? Reply

Kevin Liew Admin

Sat, 9th March 2013

Hi Josh, I'm working on a new tutorial with the new API. stay tuned :) Reply

rossb

Sun, 17th March 2013

Hey everyone,

If you're using jquery 1.9.x you're going to have an issue with this implementation.

Hello, I'm using Tweetsharp to get and display my mentions which is working ok. However I need to linkify my tweets such that the handles and hashtags link back to twitter and theURLs are linkified as well. How do I adapt your javascript to my asp Mvc3 project? Reply

Kevin Liew Admin

Sun, 24th March 2013

Hi Clement, if you look at the javascript line 111, that's the function to linkify hashtags, links and username. You can take that part and adapt it to your script. Reply

Dom

Wed, 27th March 2013

This code isn't working in Chrome when hosted but does work locally. It is fine with mozilla and safari. Any simple updates? Reply

Russ

Wed, 3rd April 2013

How do I get the authors Profile pic to show next to the tweet with this script?
Thank In Advance!!! Reply