Development, Social Media, Tutorials, Javascript, PHP & MySQL

Display Tweets from Twitter for API 1.1

Twitter as of 11th of June 2013 has turned off access to its API version 1.0. All requests now need to use version 1.1 this means all requests must first be authenticated using oAuth! Also to display your tweets on a website a Twitter app must first be created.

The official Twitter widget

Twitter does provide a widget to embed tweets at

Once the widget is created the page provides a few lines of javascript copy and past that into your page to use.

<a class="twitter-timeline" href="" data-widget-id="345810990073532416">Tweets by @daveismynamecom</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+"://";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Which results in following widget being shown:

It's a nice looking widget but there's going to be times when you want to have full control over the layout and style.


A jQuery plugin I've used in the past its very flexible and can be styled very easily, this plugin has stopped working with the Twitter API update but thanks to Stan Scates who has written an update which works perfectly with seoofcloud!

How to use it

Download the twitter file from github then update twitter/index.php with the settings from your twitter app (you will need to create an app first at then include jquery and the updates tweet js file:

<script language="javascript" src="" type="text/javascript"></script>
<script language="javascript" src="twitter/jquery.tweet.js" type="text/javascript"></script>

Then call the js function to display the tweets.

<script type='text/javascript'>
              username: "daveismynamecom",
              join_text: "auto",
              avatar_size: 32,
              count: 3,
              auto_join_text_default: "we said,", 
              auto_join_text_ed: "we",
              auto_join_text_ing: "we were",
              auto_join_text_reply: "we replied to",
              auto_join_text_url: "we were checking out",
              loading_text: "loading tweets..."

Adjust the parameters as needed (To see the full list of options look inside jquery.tweet.js) next create a div for jquery to add the tweets too.

<div class="tweet"></div>

The result is a simple html list that can easily be styled with your own css or by using the CSS file from seoofclouds

David Carr

David Carr

For the past 12 years, I’ve been developing applications for the web using mostly PHP. I do this for a living and love what I do as every day there is something new and exciting to learn.

In my spare time, the web development community is a big part of my life. Whether managing online programming groups and blogs or attending a conference, I find keeping involved helps me stay up to date. This is also my chance to give back to the community that helped me get started, a place I am proud to be apart of.

Besides programming I love spending time with friends and family and can often be found together going out catching the latest movie, staying in playing games on the sofa or planning a trip to someplace I’ve never been before.