08/06/2013 by Nitesh

How to Customize Embedded Timeline Created From Twitter Widgets

Dear Friends,

In my last post, I discussed regarding implementation of Twitter Timeline on your website using Twitter Widgets. Twitter by default provides you with 2 different type of theme. They are – Light Theme and Dark Theme. However, very often you will face a situation where the default themes provided by Twitter does not match your website’s theme. For this purpose, Twitter provides you with a set of customizable client side options which you can use in your embed code and alter the look of the timeline created using your widgets.

By default, the twitter embedded timeline looks like below after creating a widget-

The final outcome of our changes will make the above screen look like below –

Before customizing the source code, let us first know the various options provided by Twitter that we can use to configure our timeline. They are explained below-

Height – While configuring your widget from Twitter, you can define the height of the timeline. However, you can also configure the height of the timeline at run time using the “height” option of the anchor tag. The minimum height of the timeline is defined as 200px.
Width – By default Twitter timeline has a width of 600px and it also adjusts itself to the container where the code is placed in. However, you can also define the width of the timeline using the “width” property. The minimum width of the timeline is defined as 180px and maximum width is set to 520px.
Theme – After creating your widget, if you want to use the same widget with different themes on different websites, you can do this by using the “data-theme” property. Valid values for this option are dark and light.
Link color – This property will allow you to change the colors of the hash tags and links present in your timeline. You can do this by using the “data-link-color” property. Valid value to this property is any hex value.
Chrome – This property is used to control the widget layout and chrome. You can do this by using the “data-chrome” property. It can any combination of following options using a space-separated set:
Border color – This property will allow you to change the border color between 2 tweets on your embedded timeline. You can do this by using the “data-border-color” property. Valid value to this property is any hex value.
Language – By default, Twitter timeline reads the language of the webpage you have rendered the timeline onto and adjusts accordingly. However if you want to explicitly want to set the language of the embedded timeline, you can do this by using the HTML lang attribute on the embed code itself.
Tweet limit – Based on your website free space, you may want to show only last n number of tweets on your website. To do this, you will need to use the “data-tweet-limit” property that accepts any numeric number.

Now, let us customize it via some options. If you closely see the embed code from your twitter widget, you will see a HTML markup as below –

Tweets by @niteshluharuka

YOU just need to change this line with appropriate options required. Based on the above options, I have rewritten this markup to display our timeline as in picture above. I have configured the width, height, link color, border color and the number of tweets displayed on the embedded timeline along with some changes to the layout of the timeline.