Display your latest tweets with the new Twitter API v1.1

On June 11, 2013 Twitter retired v1 of its API. If you display a Twitter feed on your WordPress website you need to upgrade to v1.1, otherwise the feed will stop working.

If you rely on a plugin to display the Twitter feed, you don’t need to wait for the developer to get around to updating it. Disable the plugin and add it yourself.

Here’s a quick tutorial to get your Twitter feeds working again.

  1. Login to Twitter
  2. Click the Gear icon in the top right, and select “Settings
  3. Select “Widgets” from the menu on the left, then click “Create new” from the top right
  4. Select a source for your widget (User timeline, Favorites, List, or Search). I’ll be using the User timeline.
  5. Next fill in any configuration options. You can display a feed from any public Twitter timeline.
  6. Now click “Create Widget
  7. Copy the code snippet that appears below the Preview panel
  8. Paste the snippet into your website. (Either paste it directly into the template file, or from your WordPress dashboard go to Appearance > Widgets and paste it into a text widget in the appropriate widget area).

That will get the Twitter feed to display on your website again. But chances are you want to customize it a little bit more. If you head over to Twitter’s Embedded Timelines documentation you’ll get a nice overview of what you can do with the API.

Scroll down to “Client Side Options” to see how you can override some of the specific options to make the widget fit the look and feel of your site.

Here’s how I’ll be doing mine:

    • I’ll change the link color to match the rest of my blog (data-link-color=”#a30234″)
    • I want to remove the timeline header and footer, take out the scrollbar, and make the background transparent (data-chrome=”noheader nofooter noscrollbar transparent”)
    • I’m putting the widget in the footer, so I want to limit the number of tweets to just the latest one (data-tweet-limit=”1″)

Check out the documentation for all the other customization options.

The final snippet looks like this:

<a class="twitter-timeline" href="https://twitter.com/robgolbeck" data-widget-id="YOUR_WIDGET_ID_HERE" data-link-color="#a30234" data-chrome="noheader nofooter noscrollbar transparent" data-tweet-limit="1">Tweets by @robgolbeck</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.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

That should do it.

Comments 3

  1. Hey fazal and Matt – great question. I just spent some time searching around for an answer. Lots of people asking for this, but it doesn’t appear to be an option at the moment.

    See this comment from one of the developers in one of the many threads I found.

    Basically, it may get implemented in future. Why it wasn’t an option to begin with? Who knows.

Leave a Reply

Your email address will not be published. Required fields are marked *