JavaScript Request Tweets

GeekThis remains completely ad-free with zero trackers for your convenience and privacy. If you would like to support the site, please consider giving a small contribution at Buy Me a Coffee.

If you want to add a Twitter Timeline to your site it is really easy if you don’t want to customize it. If you navigate to https://twitter.com/settings/widgets you can create various widgets and add them to your site.

To create a custom Twitter Timeline for your site, you will need knowledge of JavaScript, HTML and CSS, or just how to copy and paste.

Notice:

Twitter now requires all API Calls to use API 1.1, you can do this by viewing the new updated tutorial over here.

First we need to create a request to the Twitter Javascript Callback.

<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=USERNAME&include_rts=true&count=5&callback=TwitterCallbackForJS"></script>

Replace USERNAME, and you can modify count and include_rt values in the URL. What this does is load the following URL, and treats it as Javascript. The page then returns a call to the function TwitterCallbackForJS with a parameter with all the tweets you requested as an array of objects.

Now we create a Javascript function called TwitterCallbackForJS with one parameter. We handle this parameter the way we want all the tweets to get handled. You can load the above URL in a web browser and see the data that it will return, or I prefer console.log() in Javascript since Chrome Developer Tools will organize the data for us.

<script>
	function TwitterCallbackForJS(tweets) {
		console.log(tweets);
	}
</script>

Make sure you place the above function before the request to Twitter, since the function has to first exist before it can be called. Below is an image of what the result will look like in Developer Tools, and you can do this for your self to find all the possible values you can use.

Developer Console

Next we have to loop through the tweets, create HTML elements for them, and then place generated HTML into the main website, all dynamically of course.

<div id="twitter-feed"></div>
<script>
	function TwitterCallbackForJS(tweets) {
		var finalHTML = new Array();
		var currentTweet;
		for(var i = 0; i < tweets.length; ++i) {
			currentTweet = tweets[i];
			finalHTML.push(
				'<div class="tweet"><p>' + currentTweet.text + '</p><span class="author">' + currentTweet.user.name + '</span><span class="posted">' + currentTweet.created_at + '</span></div>'
			);
		}
		document.getElementById('twitter-feed').innerHTML = finalHTML.join('');
	}
</script>

We simply show tweets, username, and the date it was posted. This data should be parsed more to add links for hashtags, usernames and websites. Also should make the time relative to the current date, such as “1 day ago”, or “4 hours ago”. But that is not part of this tutorial, this tutorial was for getting Tweets from Twitter using Javascript.

If you have any issues you can e-mail us or post a comment below. Remember, most issues can be resolved by looking at the Javascript Console.

Related Posts

Bypass Google Analytics Opt-Out Extension

Easily bypass Google Analytics Opt-Out browser extension with a few lines of JavaScript and start tracking all users again.

Solve JavaScript Scroll Event Delay

Read this to learn how to fix JavaScript scrolling event delays.

JavaScript Tag Cloud

Learn how to create a tag cloud using only JavaScript along with sample code to use.

HTML5 Game Development Basics

Learn how to get started with creating games using HTML5 and JavaScript without any libraries.