Will Embeded Twitter Feeds Stop Working if the Passwords Changes

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.

Thanks everyone! API v1 Retirement is complete. Please use API v1.1 instead. https://t.co/SIzTAymJPW

— Twitter API (@twitterapi) June 11, 2013

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:

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

sisnerosseents1937.blogspot.com

Source: https://vancebell.com/blog/twitter-widget-or-feed-not-working-update-to-use-twitter-api-1-1/

Share this post