3 power tips for using embedded timelines

By
Friday, 11 July 2014

Embedded timelines make it easy to incorporate real-time Tweets into your website. Here are a few tips on customizing timelines for a great user experience. They touch on custom dimensions, chrome modifications and curated content.

Create an embedded timeline by visiting the widgets section in account settings. For the example below, I’ve chosen a search timeline. After saving the timeline, place the two lines of generated code on your site. Here’s that code and the resulting widget, which illustrates the style before it’s customized.

Note - extra line breaks were added to the code blocks for readability.

@twitterdev"


!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");

Tip #1: Defining dimensions
The simplest and most helpful modification to implement is custom dimensions. You can achieve this by adding width and height attributes to the twitter-timeline link tag. This code demonstrates the modification and the result follows.

@twitterdev"


!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");

Tip #2: Modifying the chrome
Let’s consider a different scenario: displaying the last two Tweets of an account dedicated to product status. The timeline’s container and Tweet count can be defined with data-chrome and data-tweet-limit. The data-chrome attribute controls the visibility of the header, footer, borders, scrollbar and background. You can also remove the default header and design your own. Be sure to review our display requirements if this is an option you’d like to explore.

@githubstatus


!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");

Tip #3: Curating the Tweets
Collections let you hand-pick the Tweets displayed in a timeline. The first step is to open TweetDeck. You’ll notice an icon above the settings gear that resembles a stack of rectangles. Click on this to create a Collection and give it a name (e.g. My Favorite Tweets). In order to add tweets to this Collection, simply use the ellipse icon associated with any Tweet within TweetDeck and use the “Add to collection…” option.

Once we have a few Tweets saved, go back to the widgets page on Twitter.com and create a new one, but this time use “Collection” as the timeline source. Select the Collection you just created within the “Configuration” form, click “Create Widget” and you’re ready to embed a timeline with curated tweets.

#NewsHack


!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");

There are a number of other options available to customize embedded timelines. By using data attributes, you can make modifications to elements such as the theme, link color and border color.

Start creating your own timelines by visiting the widgets page. And you can learn more about our advanced options in the embedded timelines documentation.