Add Your Twitter Feed using JavaScript

Here is a method to show your Twitter posts on your own web site using jQuery, JSON, and the Twitter API.

Check out the demo or download the project files.

Note: This demo is written using jQuery 1.4.4

The Twitter API provides a vast amount of data. But we're just looking for the tweets and the time that they occurred. For more information on the various methods at your disposal, be sure to check out the Twitter Developer site.

This script fetches your feed in the JSON format provided by Twitter and writes it to a bullet list. All hyperlinks are converted to actual links. All hashtags are converted to Twitter search links. All Twitter @usernames are converted to Twitter profile links.

You'll want to change the "username" variable, in the head of the demo document, to your Twitter username. The "numPosts" variable tells the script how many tweets to display.

  1. <script type="text/javascript">
  2.         $(document).ready(function () {
  3.                 var username = "twitterapi";
  4.                 var numPosts = 10;
  5.                 GetTwitter(username, numPosts);
  6.         });

Formatting dates in JavaScript is an ugly process. You may want to augment this script with something like Pretty Date to transform your dates into a relative time format (i.e. "2 minutes ago")

Doing this client-side is really the way to go. You don't want your server-side processing to rely on a third-party's uptime.


No comments yet.

Comments are closed.

© 2015 Jon Plante. All Rights Reserved. Hosted by DreamHost. Send me a line, or check out my celebrity comics.