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?
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.
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.
- Log into your twitter account
- Go to your widget management page using https://twitter.com/settings/widgets
- Create your widget choosing the timeline source of your choice (user, favs, list or search)
- Copy and paste the code into the HTML of your site.
- 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)
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″).
Still not happy?
Well, it didn’t take long, did it? lol
Check out his JS fiddle.
Most Recent Posts
Special Recent Posts
July 7th, 2014
I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]
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'[...]