Display Twitter Feeds Using Simple JavaScript

After the initial release of Twitter API v.1.1, I was pretty frustrated. Older and simple JavaScript solutions were not good enough to display twitter feeds and the newer solutions were very complicated. I did not want to add the default widgets solution from Twitter either. So, I basically abandoned the total idea of displaying twitter feeds on my site. But seems like finally I found a very simple solution. So, if you are looking for a custom solution to display your twitter feeds on your site, this post for your. Get ready.

Create the Twitter Widget First

Let's start with the simple things first and create a custom widget from your Twitter account. On one of my previous post I already explained how to create Twitter Widgets. So you can watch that video tutorial or simply follow the following steps.

Step 1: Login to your Twitter Account.

Step 2: From your "Profile & Settings" menu (top right hand corner of your screen) select "settings". A new window should open.

Step 3: Click on "Widgets" menu item (left hand side menu). Widgets window should appear on the right side of your screen.

Step 4: Click on "Create New" button for our custom widget. Make necessary changes from the "Configuration" column and press "Create Widgets" button.

Step 5: Now take a look at the URL on your web browser. You should find a big number, something like this 11122233344455566. Copy this number and paste it somewhere since we would need this afterwards.

You can log out from Twitter at this point and we are done with out first step.

Let's Play with Custom JavaScript

Now we will need some JavaScript files to pull your latest tweets using the widget ID that you just copied. Then we will simply add them on our site.

Step 1: Go to Github and download the ZIP file. You should find the "Download ZIP" button on the right hand side of the screen. A big thanks goes to Jason Mayes for his amazing script.

Step 2: Once you are done with downloading the ZIP file. Extract the folder and copy the "js" folder on your site's root directory or anywhere you like. Open up the "js" folder and you should see three JavaScript (.js) file. We will need only two of them. We definitely need "exampleUsage.js" and lets pick "twitterFetcher_min.js" as it is smaller in size.

Step 3: Now open up "exampleUsage.js" with your HTML editor or Notepad. Scroll through the page and you should see some sample code block which looks something like this:

// ##### Simple example 1 #####
var config1 = {
  "id": '11122233344455566',
  "domId": 'example1',
  "maxTweets": 1,
  "showUser": true,
  "showTime": true,
  "enableLinks": true };

There are multiple sample block code available pick anyone of them. I am using the first (simple example 1) one for demonstration purpose.

From the code above, change the ID number with your Twitter widget ID (you copied it from the URL). Also change the domId value "example1" with "tweets", this should be your DIV element ID (we will create it soon) that would catch your tweets and display them. Change the "maxTweet" value from 1 to any numerical value. This value would detemrine the number of tweets that you want to display on your site. Save this file.

Step 4: Let's call these JavaScripts within the <head></head> tag on your HTML file. It should be like this:

<script src="https://www.urdomain.com/js/exampleUsage.js"></script>
<script src="https://www.urdomain.com/js/twitterFetcher_min.js"></script>

Step 5: Now, lets create a DIV element on the HTML page within the "body" tag like this:

<div id="tweets"></div>

Save your HTML page and refresh it. You should see your latest tweets. Now you can inspect your tweets from your web browser to see the basic structure of your tweets and style them anyway you want with CSS. That's it you are done.

Custom Twitter Post Fetcher

Using simple CSS, I could achieve something like this. Definitely you can get more creative with your CSS but I would rather leave it up to you Mr. Einstein. Do your magic and impress your site visitors.

Note: This is a very basic example. You can actually do little more than whatever I discussed on my post. Please read the notes within the JavaScript files for additional parameters and features. Try it out on your PC first then upload it on your site. I am taking questions now.


Commenting is disabled.