Twitter Widgets on Websites

Twitter Widgets for API v1.1 (2013)

If your Twitter widgets are suddenly blank with no tweets inside them, you need to get new ones using the new Twitter API v1.1 (application program interface). A basic widget is fairly easy to create for a user timeline, a list timeline, or a search term. Log on to your twitter account, then:

• Create a Twitter Timeline widget for a website
• Customize a widget
• Manage Twitter widgets (quick link)
• Twitter API v1.1 Documentation

Customizing Widgets

When you create a widget, you can customize it to fit your website design by adding attributes to tag "A" for width, length, link colour, transparency, header, footer, borders, border colour, scrollbars, number of tweets, and more. Here are the A attributes added to each widget example. Note that a tweet limit removes the scrollbar. Using a footer (default) allows you to load more tweets in a Search Widget.

1. Timeline Widget: width="300" data-tweet-limit="5"
   data-border-color="#cc9999" data-chrome="nofooter"
2. Search Widget: width="2600" height="300"
3. Search Widget, no footer: width="260" height="300" data-chrome="nofooter"

Arranging several widgets on a page:

The styling of the three widgets using CSS code allows them to display beside each other on a web page if the screen is wide enough. Change the width of your browser window to see how it works.

A DIV surrounds each of the 3 title-widget pairs. The CSS code for the first widget is: display: inline-block; float:left; margin-right: 40px;. inline-block allows each title and widget to move together as a unit. The float allows them to fit wide or narrow screens in the nicest-looking way. The right-side margin just spaces them properly.