Twitter Widget or Feed Not Working? Update to Use Twitter API 1.1

On June 11, 2013 Twitter finally retired the version 1 (v1) API which provides, among other things, the “Recent Tweets” feed commonly found on websites.

If your Twitter widget is has mysteriously disappeared recently, it may be time to update to an embedded timeline.

The Old Method

You can still embed a timeline for Tweets from an individual user, a user’s favorites, Twitter lists, or any search query or hashtag on your site. However, the old, two part code for doing so:

<div id="twitter_div">
 <a href="http://twitter.com/vancebell" id="twitter-link">Latest Tweet:  </a>
 <span id="twitter_update_list"></span>
</div>

<!-- Start Twitter Feed API call -->
<script type="text/javascript" src="https://twitter.com/javascripts/blogger.js" > </script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/vancebell.json?callback=twitterCallback2&amp;count=3" > </script>

Will no longer return any results. “It’s dead, Jim.”

Creating and Registering Embedded Timelines

Instead, you are required to register a new widget specific for your site via your Twitter account.

The steps for doing so:

  1. Login to your Twitter account
  2. In the upper right, select the Settings submenu under the Gear symbol
  3. From the left navigation, select Widgets
  4. In the upper right, select Create New

You will arrive at a page similar to the one below:

Create a Twitter user widget

From this panel it is possible to customize your embedded timeline (e.g, specify feed(s), light or dark visual design scheme, link color, widget height, etc.).

The number of visual customizations allowed through this panel are limited, however, and in all likelihood the timeline’s default appearance will not match your site or your prior implementation. This can be addressed to large degree through further effort described in the section below.

Once you complete your setup, the Create New button will register the widget with Twitter and return a code snippet you can use to embedded the widget on your site.

An generic example of the widget’s code:

<a class="twitter-timeline" href="https://twitter.com/yourusername" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @yourusername</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Customizing Twitter Widget Appearance

While all of the configuration settings you made above are stored on the server, you may override specific options on the client side (your website) by customizing the embed code. These settings are as follows:

Theme: Set by adding a data-theme=”dark” attribute to the embed code.

Link color: Set by adding a data-link-color=”” (e.g. data-link-color=”#790000″attribute. Note: some icons in the widget will also appear this color.

Width: Set using the standard HTML width attribute on the embed code (units are pixels).

Height: Set using the standard HTML height attribute on the embed code (units are pixels).

Chrome: Control the widget layout and chrome (container or framing decoration) by using the data-chrome=”nofooter transparent” attribute on the embed code. Use a space-separated set of the following options:

  • noheader: Hides the timeline header. Twitter would like you to refer to the timeline display requirements when implementing your own header design. Meh.
  • nofooter: Hides the timeline footer and Tweet box, if included.
  • noborders: Removes all borders within the widget (between Tweets, cards, around the widget). See also: border-color below.
  • noscrollbar: Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website.
  • transparent: Removes the background color.

Border Color: Change the border color used by the widget. Takes an #abc123 hex format color e.g. data-border-color=”#cc0000″

Language: The widget language is detected from the page, based on the HTML lang attribute of your content. You can also set the HTML lang attribute on the embed code itself.

Tweet Limit: To fix the size of a timeline to a preset number of Tweets, use the data-tweet-limit=”#” attribute with any value between 1 and 20 Tweets (e.g. data-tweet-limit=”5″ to display 5 tweets). The timeline will render the specified number of Tweets from the timeline, expanding the height of the widget to display all Tweets without scrolling. Since the widget is of a fixed size, it will not poll for updates when using this option.

Web Intent Related Users: As per the Tweet and follow buttons, you may provide a comma-separated list of user screen names as suggested followers to a user after they reply, Retweet, or favorite a Tweet in the timeline. Use a data-related=”nameone,nametwo” attribute on the embed code.

ARIA politeness: ARIA is an accessibility system that aids people using assistive technology interacting with dynamic web content. Read more about ARIA on W3C’s website. By default, the embedded timeline uses the least obtrusive setting: aria-polite=”polite”. If you’re using an embedded timeline as a primary source of content on your page, you may wish to override this to the assertive setting, using data-aria-polite=”assertive”.

When the above are set in the embed code directly, they will override the server side settings.

Creating a Pared Down Version

Many users trying to customize the widget to appear as it did previously, or nearly so at least, will find it useful to eliminate many of the elements in the default widget.

For instance, setting a link color of #a66c2a while removing the scrollbar, background, header, footer and border elements, specifying three tweets and switching to a dark theme compatible with a dark site background, would yield a code snippet similar to the following:

<a class="twitter-timeline" href="https://twitter.com/yourusername" data-widget-id="YOUR-WIDGET-ID-HERE" data-chrome="noheader nofooter noborders transparent noscrollbar" data-tweet-limit="3" data-link-color="#a66c2a" data-theme="dark">Tweets by @yourusername</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>

From this version it should be easier to style the widget’s output to match your previous implementation or site.

Alternative Solutions

If you dislike the default options available in the embedded timeline, you may consider one of these solutions:

For WordPress

WooDojo Plugin. Updated 6/13/13 for compatibility with v1.1 of the Twitter API. Additional information available on the necessary step of setting up a Twitter Application.

For Developers

OAuth2 and the Twitter API – Creating A WordPress plugin

Create a Twitter Widget, Smashing Magazine

Authenticating a User Timeline For Twitter OAuth API v1.1

Javascript method, Twitter Post Fetcher

Best of luck everyone!

Documentation

Overview: Version 1.1 of the Twitter API

Embedded Timelines

Vance Bell

Vance Bell

Hi there, glad you made it! I'm Vance Bell, a freelance web designer/developer and frequent marketing consultant.

Monday to Saturday I help businesses and organizations grow attention and revenue. Sometimes on Sunday I take a break and binge watch Netflix.

Owner of Pixel Engine, a Philadelphia-based web design and online marketing studio.

If you'd like to hire me, I'd love to hear from you. If you just have a question, feel free to ask.

Comments

  • June 20, 2013
    reply

    C Campbell

    Seems pretty straightforward. Wish I had heard about it earlier, but I guess I’m out of the loop. The new timeline seems decent lookin. thanks.

  • June 21, 2013
    reply

    J Smith

    Our web development company charged us 2 hours for each website for this – do you think this is reasonable?

  • June 24, 2013
    reply

    J Smith

    Thanks Vance – that’s really helpful 🙂

  • July 3, 2013
    reply

    We had a scrolling twitter box, it scrolled between 5 most recent tweets, one at a time. Is this still possible?

    The code looks like this:

    Thanks in advance for any help…

  • December 14, 2013
    reply

    Rick Hedeman

    Hi Vance,
    I’m using this new generation of Twitter widgets. They worked beautifully on mobile phones then completely stopped. Still work fine on PC and Mac. What’s up with that? Many thanks!

Post a Comment