A quick follow up to my “Quick and easy way to display tweets on a static website” blogpost in the wake of the retirement of Twitter’s API v1, as the json method used on that tuto isn’t working anymore.

Right, so you were using Twitter’s former API (v.1) to display your latest tweets on your website, and now you’re getting a blank section. If you look under the hood with the dev tools, you probably will see an error such as “Failed to load resource: the server responded with a status of 410 (Gone)”.

As Twitter announced it on June 11th, API v1 is now retired, and we need to switch to API v1.1. This isn’t the biggest news of the week. The plan had ben laid out for us some six months ago.

I had made a mental note to sort it out before it happened.

Needless to say I had done absolutely bugger all about it. Partly because I was lacking motivation. All this bollox – you’ll admit it – does not make much sense, especially since our timelines are already publicly available. But that’s another story, hence let’s not get philosophical.

So what does the API change imply?

Stricter rules

Take a look at Twitter’s documentation on the subject.
There is an overview of the new API, a detailed page on timeline embedding, and what rules you need to follow in terms of twitter status display.

In a nutshell, you have very little room to get excentrique with the way you want to integrate your twitter status within your website.

Procedure

Side note: There are many ways to connect to Twitter, but this post isn’t about how to make authenticated calls to the API. Here, we are just going to focus on the simple display of a timeline without authentication.

1. Log into your twitter account
2. Go to your widget management page using https://twitter.com/settings/widgets
3. Create your widget choosing the timeline source of your choice (user, favs, list or search)
4. Copy and paste the code into the HTML of your site.
5. Change the settings you are able to change (which isn’t much) to your liking (read from Client Side Options and onwards on the embedded timelines page)

Example

A simple example with a status timeline limited to 5 tweets (data-tweet-limit=”5″), a transparent background, no header, no footer (data-chrome=”nofooter noheader transparent”), and the color of my choice for the links (data-link-color=”#1BB5E0″) and borders (data-border-color=”#B5DDE8″).

Tweets by @shoogledesigns

Follow @shoogledesigns

Still not happy?

Frustrated about the new api, the new setup, and more importantly the new rules? Feeling rebellious? Then Jason Mayes’ post will be of great interest to you, since he found a way of returning the raw text of his tweets using Javascript, the way it used to be with the json/api v1.0 back in the days,…a couple of days ago I mean.

Well, it didn’t take long, did it? lol

Check out his JS fiddle.

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Follow @shoogledesigns

Most Recent Posts

Special Recent Posts

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

June 9th, 2014

We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]