The New Twitter API

If you’ve had a Twitter feed in your website or blog you will likely have noted that the Twitter API no longer functions.  On June 11, 2013 Twitter retired version 1 of their API which provided, among other things, the “Recent Tweets” feed commonly found on websites.  You can view the Twitter developer page for the official notice: https://dev.twitter.com/blog/api-v1-is-retired

The old embed method no longer functions, but fear not, 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. What’s even better is now one has the option to customize the look of the embedded tweets in a way similar to what the Facebook like box provides.

What’s Needed:

First one needs to register a new widget specific for their site via their Twitter account.  To do this:

• Login to your Twitter account
• In the upper right, select the Settings submenu (Gear symbol)
• From the navigation on the left select “Widgets”
• In the upper right, select “Create New”

This will take you to the “Create a Twitter Widget” page:

From this panel it is possible to customize your Twitter timeline feed in a variety of ways, though for most people the default option should work fine.  Once completed the “Create New” button will register the widget and provide some code that you simply enter into your page or blog.  If you are using a blog just create a text widget and add the code there.  The default for my site is:

<a  href=”https://twitter.com/ECurtisDesigns” data-widget-id=”357538137955774465″>Tweets by @ECurtisDesigns</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^https:/.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>

You can see the default Twitter widget feed in place on the right sidebar of this page.

Customizing the Widget Appearance

As noted above, you can customize the widget’s appearance via the Twitter widget configuration options, but you can also override the specific settings on your site by customizing the embed code in the first URL portion:
<a  href=”https://twitter.com/ECurtisDesigns”  data-widget-id=”357538137955774465″>Tweets by @ECurtisDesigns</a>

These settings include:

• 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)
• Width: Set using the standard HTML width attribute on the embed code (e.g. width=”300px”).
• Height: Set using the standard HTML height attribute on the embed code (height=”500px”).

You can also control the widgets layout container or framing decoration (chrome) by using the data-chrome=”nofooter transparent” attribute on the embed code. Separated any options used with a space:

• noheader: Hides the timeline header.
• nofooter: Hides the timeline footer and Tweet box, if included.
• noborders: Removes all borders within the widget (between Tweets, cards, around the widget).
• noscrollbar: Hides the main timeline scrollbar, if visible.
• transparent: Removes the background color.

You can also change:

• Border Color: Requires a hexidecimal format: (e.g. data-border-color=”#ccffff”).
• Tweet Limit: Allows a value between 1 and 20 Tweets (e.g. data-tweet-limit=”5″).
• Related Users: Used to 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. (e.g.  data-related=”nameone,nametwo”).

Please let me know if you need assistance with getting a Twitter feed in place on your site or blog.