Creating a Custom jQuery Twitter Feed (API v1.1)

15 December, 2012 by Tom Elliott

This jQuery Twitter feed guide is designed to help anyone wanting to build a custom twitter feed to get the latest tweets from a user timeline. It uses the new API 1.1 authentication required by Twitter for all Twitter feed requests.

The latest version of the twitter feed has many customisable options such as tweet display limit, tweet actions, highlighting links, hashtags and is ideal for anyone who needs a customisable feed and design which isn’t available with the standard Twitter widgets. Check out the twitter feed demo.

Update: many of the features in this custom Twitter feed have been used for www.socialbearing.com, a Twitter search and analytics tool I recently launched

This guide is split into 2 parts: 1) Twitter Feed Authentication – required by the new Twitter 1.1 API – and 2) feed integration and styling. There is also an additional (optional) tutorial for twitter feed caching to speed up loading of Tweets.

If you want to animate your twitter feed, checkout my posts on fading a twitter feed or the Twitter Carousel

In this guide, I’m using my twitter username @tomwebdev and will be tweeting any new features when they become available.

Part 1: Authenticating a Twitter feed

Head over to the twitter feed authentication post. The authentication tutorial gives a solution in PHP but the same principles apply for other server-side languages. Once you’ve got you’re tweets output to .json format, proceed to part 2

Part 2: Integrating and Styling a custom JQuery Twitter Feed

We start by setting up a basic styled twitter feed, using JavaScript and jQuery to parse the .json encoded text we created from the PHP file. We will output the .json as HTML and style it using CSS. The JS Twitter feed displays the tweet, relative time, twitter profile image and tweet actions. view the twitter feed demo here.

1. The HTML:

Nice and simple; 3 links required between the head tags for jQuery, the twitterfeed.js file and a CSS file.

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/twitterfeed.js"></script>
<link href="css/twitter-styles.css" rel="stylesheet" type="text/css" />

This is followed by a single DIV with ID ‘twitter-feed’:

<div id="twitter-feed"></div>

2. The JavaScript:

Copy/Paste JavaScript code here

The twitter feed JavaScript has 3 functions; the main JSON call to the live twitter feed, a function to calculate how long ago the tweet was made and a function to detect and add links to any URLs and hashtags within the feed. The $.getJSON() call requests the live feed from the authenticating PHP script and the call is asynchronous, which means any other JavaScript can execute before waiting for the twitter request to be successful.

Replace the twitterprofile variable to the twitter username and tweak the variables below that to determine if the URL/hashtag links, profile pic, tweet actions and retweet indicator should be displayed. The displaylimit variable determines how many tweets are shown.

Also make sure the php file in the getJSON request on line 20 reflects whatever name you gave to the get tweets authentication file.

The below JS makes a request to a PHP script that authenticates for Twitter V1.1 API, please see my Twitter authentication tutorial

The Twitter feed also displays a loading graphic, a twitter bird image in the header along with a tweet actions sprite which you’ll probably want to grab.

The CSS

The CSS layout is straightforward; twitter-feed is the main container div, each tweet sits in a twitter-article class and the tweet text, profile image and tweet actions as divs within the article container.

To change the width of the twitter feed container, just modify the width style of the #twitter-feed div.

body {
	background-color:#333;
	font-family:Arial, Helvetica, sans-serif;
}

img  {
	border:none;
}

#loading-container {
    padding:16px 0px 16px 0px;
    text-align:center;
}

#twitter-feed {
    width:258px;
    margin:auto;
    font-family: Arial, Helvetica, sans-serif;
    margin-top:60px;
    padding:8px 10px 5px 10px;
    border-radius:12px;
    background-color:#FFF;
    color:#333;
    overflow:auto;
}

#twitter-feed h1 {
    color:#5F5F5F;
    margin:0px;
    padding:9px 0px 9px 0px;
    font-size:18px;
    font-weight:lighter;
}

.twitter-article, #loading-container {
    width:100%;
    border-top:1px dotted #CCC;
    float:left;
    padding:8px 0px 8px 0px;
	position:relative;
}
.twitter-pic {
    position:absolute;
}

.twitter-pic img {
    float:left;
    border-radius:7px;
    border:none;

}

/* -------- TEXT STYLING ------*/
.twitter-text {
    width:100%;
    float:left;
    font-size:11px;
    padding-left:52px;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.twitter-text p {
    margin:0px;
    line-height:15px;
}
.twitter-text a,  h1 a {
    color: #00acee;
    text-decoration: none;
}
.twitter-text a:hover,  h1 a:hover {
    text-decoration: underline;
    color: #00acee;
}

.tweet-time {
    font-size:10px;
    color:#878787;
    float:right;
}
.tweet-time a, .tweet-time a:hover {
    color:#878787;
}

.tweetprofilelink a {
    color:#444;
}
.tweetprofilelink a:hover {
    color:#444;
}

/* -------- FEED  ACTIONS ------*/
#twitter-actions {
    width:75px;
    float:right;
    margin-right:5px;
    margin-top:3px;
        display:none;
}
.intent {
    width:25px;
    height:16px;
    float:left;
}
.intent a{
    width:25px;
    height:16px;
    display:block;
    background-image:url(../images/tweet-actions.png);
    float:left;
}
.intent a:hover{
    background-position:-25px 0px;
} 

#intent-retweet a{
    background-position:0px -17px;
}
#intent-retweet a:hover{
    background-position:-25px -17px;
}
#intent-fave a{
    background-position:0px -36px;
}
#intent-fave a:hover{
    background-position:-25px -36px;
} 

/* -------- RETWEET INDICATOR ------*/
#retweet-indicator {
    width:14px;
    height:10px;
    background-image:url(../images/tweet-actions.png);
    background-position:-5px -54px;
    margin-top:3px;
    float:left;
}

Hooray! You should now have a fully functioning Twitter feed. If you run into any problems, the error handling might help or check out the troubleshooting tips below. Once everything is working, you may want to remove the error handling alert from the JavaScript (line 124) as this can sometimes get triggered if a visitor presses the browser back button before the tweets have loaded.

Updates

– Added retweet indicator
– Added intent actions for tweet, retweet and favourite
– Added link to hashtags which open up Twitter search, when ‘showtweetlinks’ is set to true
– Added error handling
– Fixed bug with URL links sometimes cutting off on retweets
– Fixed bug with broken links when enclosed with non standard quote marks
– Improved CSS to make it much easier to resize the twitter feed width (set by #twitter-feed)

Note: the Twitter feed should now comply with Twitter’s new display ‘requirements’ brought in after the old API v1 depreciation. Whilst it is unclear how Twitter are going to enforce these requirements (if at all), please be aware that changing the default parameters in the feed JavaScript may result in a feed that doesn’t comply to these rules.

Twitter feed troubleshooting tips

1. Make sure the twitter get tweets php file is correctly outputting the tweets in .json format
2. It’s worth outputting at least 30 tweets in the php as the JS is set to skip past any direct tweets
3. Check the php source and make sure no HTML is included after the closing ?> tag
4. The get tweets php should be in the same folder as your main twitter feed page
5. Uncomment the alert(feeds); line in the feeds function to make sure the array of feeds has been parsed
6. Try an absolute path to the php for the $.getJSON call
7. Make sure you’re using the latest jQuery file and that this appears in the HTML before twitterfeed.js
8. If you are getting a JavaScript error: ‘Uncaught TypeError: Property ‘$’ of object [object Object] is not a function..’, adding a ‘$’ in the document ready function should fix it. i.e. jQuery(document).ready(function ($) {

If you want a set of tweets from a specific search phrases, hashtag or twitter handle instead, check out my tutorial for a custom Twitter search

If you need to make a cross-domain call to your JSON encoded tweets, checkout my guide on cross-domain AJAX/JSON calls

JQuery Twitter Feed: Caching Tweets

Caching a twitter feed to a local file will speed up twitter feed load time and avoid Twitters rate limiting.

Twitter Feed Animation

Extend your twitter feed by adding some animation! Checkout the below posts:
1. Fading tweet rotation
2. Twitter feed carousel

You may also like Limitations with Twitter Search (https://twitter.com/search)

---

---

Related posts

Authenticating a Twitter Feed for OAuth API V1.1 – Timelines & streams »
Twitter feed authentication (API 1.1) for search »
Creating a Twitter Search & Analytics tool »

---