How to get your tweets displaying on your website using JavaScript, without using new Twitter 1.1 API

By Jason Mayes

Why does this exist?

Recently I was quite frustrated to find out that the old API on Twitter was depreciated and the overhead in setting up a system to perform OAUTH just to get my already publicly available tweets was too damn high (see https://dev.twitter.com/discussions/11564).

Even worse I couldn't find any simple solutions for JavaScript. All code examples were server side. So after much thinking I invented the following solution. It makes use of the over bloated widgets Twitter gives us to put on our sites, cuts out all the nonsense (and non semantic markup), and returns to you your raw tweet text so you can do with it as you please and style it how you want on your own website - like it should be. Instructions on how to get it working with your tweets are in the code comments, just do what it says! Enjoy!

Browser support

All popular browsers supported. Chrome, Firefox, Safari, Opera, Internet Explorer 7, 8 and 9.

Download

See latest link at top right of the page to grab the latest build. Dont forget to check back soon for updates.

Show me the sexy code baby

Please read comments in JavaScript for examples on how to use and how to generate a widget id to use with the component - it is really easy! Here are some examples on CodePen:

1. How to use the JavaScript component.
2. 3D Twitter Cube - by just changing CSS you can make anything you want as shown here!.

Show me it in action!

Below is the first example above - remember you can change the style to anything you want just by changing the CSS:

Change log

• UPDATE 1: First version released!
• UPDATE 2: Due to popular demand, you can now specify how many tweets you want returned which can be any number between 1 and 20, as the third parameter to the function call :-) Let me know if you have any other requests below.
• UPDATE 3: Due to even more requests, solution now gets recent tweets for user, favourite tweets, list tweets, or hashtag search
• UPDATE 4: Script now handles writing HTML to an element with an ID of your choice making it even simpler to use and allows you to queue up many requests so you can have many items on the same page doing different things eg one might show recent posts with a specific hashtag, whilst the other shows your latest 5 tweets.
• UPDATE 5: Script now supports grabbing who posted the tweet, their profile photo, and link to profile. Also adds the time they posted at the end. All customizable with CSS to look how you want.
• UPDATE 6: You can now specify a custom date formatting function to format the twitter post date however you wish! See comments for how to use.
• UPDATE 7: Now supports IE 7, 8 and 9, Firefox, Chrome, Safari and Opera.
• UPDATE 8: You can now not show retweets via a new parameter in function call. See comments in code.
• UPDATE 9: Now supports a custom function callback when data is ready allowing you to have full control over its output.
• UPDATE 10: Now supports Replying / Retweeting / Favouriting.
• UPDATE 11: Due to popularity of this component and number of requests I have now moved its source to GitHub.

Got suggestions? Feedback? Feature requests? Tell me!

At time of writing I have made over 132 changes, and many are the result of feature requests from people like you! I want to help all the developers out there get tweets on their sites once again - with ease, as it should be. Talk to me: Via Google+, twitter, or my website.

Disclaimer

This is by no means an official solution - it is something I created to solve a problem I had, and has now grown in to a full component. Twitter may change its system in such a way to cause this to stop working. I of course will try my best to adapt to any changes and all future versions of this code shall be posted here, on this site. I suggest you check back regularly for any updates. This is however the only solution I know of to date to get public data from Twitter without using the new 1.1 API which otherwise requires OAUTH tokens with every request and is a lot harder to set up. Lets keep it simple!

With that out of the way, I hope you enjoy this component, and that it makes your life a bit easier. Jason Mayes