Styling Twitter’s Embedded Timeline

If you examine the Twitter box on my site, I am displaying my most current tweet. I have been asked if this is a plugin for WordPress. I am not using a plugin, but it does use the dreaded Twitter defined Widget using the new API 1.1. This article is a somewhat in-depth How-To, allowing you to beautify the feed output instead of being stuck with the standard predefined layout.

In my earlier post explaining how I created the Story Progress widget, I mentioned that I used a plugin called HTML Javascript Adder. This allows me to add custom scripting to widgets within WordPress.

Here is an example of the code used in my widget:

The replaced variables in this would be YOUR-WIDGET-ID and Your_Twitter_Name respectively. Your widget ID can be obtained by going here and creating a widget. If you do not have a

The replaced variables in this would be YOUR-WIDGET-ID and Your_Twitter_Name respectively. Your widget ID can be obtained by going here and creating a widget.  If you do not have a Twitter Timeline Widget, then create one now. You can find your ID in the example picture, but note that your ID will be different than mine.

twitID

Good, now whatever Twitter tells you to use for their code… disregard it. We’re not using it.  We will be using the above code snippet with an explanation of the available variables. Below is the section of the code is all we will be dealing with directly for editing the needed variables according to Twitter’s API.

Now, these options can be found in Twitter’s development documentation, but I will save you the trouble of loading another page and post them here:

ThemeLink ColorWidthHeightChromeBorder ColorLanguageTweet LimitWeb Intent Related UsersARIA Politeness
Set by adding a data-theme="dark" attribute to the embed code.
Set by adding a data-link-color="#cc0000" attribute. Note that some icons in the widget will also appear this color.
Set using the standard HTML width attribute on the embed code (units are pixels.)
Set using the standard HTML height attribute on the embed code (units are pixels.)
Control the widget layout and chrome 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. Please refer to the timeline display requirements when implementing your own header.
  • 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.
  • 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.
Change the border color used by the widget. Takes an #abc123 hex format color e.g. data-border-color="#cc0000"
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.
To fix the size of a timeline to a preset number of Tweets, use the data-tweet-limit="5" attribute with any value between 1 and 20 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.
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="benward,endform" attribute on the embed code.
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".

For the sake of my widget, I am using data-theme="dark", data-link-color="#37a8fa", and border-color="#ccc". I have also set my data-tweet-limit to 1 instead of 5.

As for my CSS styling, I am using the following for the container:

I define the width of the timeline directly in the HTML code snippet above, but leave the height of the container to be defined by CSS. This allows the container to be respond dynamically, adjusting to the feed content as necessary. This is especially important if you are removing the scrollbars under the data-chrome attribute. Otherwise, your feed will cut off and the container may not adjust accordingly. For some themes, this may not be an issue, but it is best to ensure the height attribute is defined just the same.

You will not be able to change any of CSS for the actual widget itself. It is either defined as light or “dark” in this case. If you omit the data-theme attribute entirely, it will default to the light theme and your text will be black instead of a light gray color. You would only need to define the theme as dark against a dark background, obviously.

As far as the background image, you can use your own. Just ensure that the path is correct in your CSS background-image tag before using it. Likewise, ensure the path is correct for the widget’s header image as well. You have my permission to right-click and use it since it was borrowed from a twittermysite.com. I merely re-sized the original image for my use. In fact, if you like any of their images better, by all means, use one of them or create one of your own.

Angela

About The Author

is a blogger, writer, self-proclaimed geek & nerd, and the gyrl behind Ramblings of a Gyrl. A few cats shy of 'crazy cat lady' status and fully embraces her love of video games, films, cooking, and literature. She is currently writing her first novel for publication.

This article has 1 comment

  1. […] I’ll be writing a How-To on customizing your Twitter Timeline Widget for your site without a […]

Leave a Reply