How To Style The Twitter Widget For Your Web Site

Twitter offers you an application that you can place on your website to allow your visitors to see your latest tweets. This is a great way to cross reference users easily from your site to your twitter or vice-versa. My issue with this app is that I found the styling given to the user quite limited: you may only edit 5 appearance preferences including the dimensions. This tutorial will show you how get the files needed so you can start styling that widget the way you want to the extent that you want.

HOW IT WORKS: You set the basic parameters for your widget at the ‘twitter/profile widget’ site, download & copy the code for the widget, and add it to the desired location on your site(usually a sidebar). The widget sets styling parameters at the local level while also referencing a JavaScript file that includes two more CSS files. We want to take control by altering the JavaScript file to reference our own customized CSS files, not twitters. This will allow us to do almost anything to the widget we want.

To get this app, go to your twitter account, and on the bottom of the aside or sidebar, there is a link for ‘Widgets‘, go there. This will take you to a site with the options of getting the ‘Tweet Button‘, ‘Widgets‘, & ‘Buttons‘. Select ‘Widgets‘. You can also get to this page by going to http://twitter.com/goodies.

In the ‘Widgets‘ section, select ‘My Website‘, then select ‘Profile Widget‘. The page you come to now shows you an example of the widget given the current settings within the options panel: Settings, Preferences, Appearance, Dimensions. You can edit these settings and see the updated example to the right which gives you a feel for what it will look like on your site. The only settings you really need to focus on are the ‘Preferences‘ because we are going to edit the appearance in more depth once the widget is on our site, even though you can still alter most if not all of the ‘Preference‘ settings once it is on your site. However, you may want to set some of the 5 appearance settings just to give you a base theme from which to work with, either way it is of no consequence. Once you are done editing the settings, on the bottom of the widget editor page, you will see two links, ‘Test Settings‘ & ‘Finish & Grab Code‘. Let’s grad the widget. Below is an example of the code you will see:

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({

version: 2,

type: 'profile',

rpp: 8,

interval: 6000,

width: 250,

height: 300,

theme: {

shell: {

background: '#333333',

color: '#ffffff'

},

tweets: {

background: '#000000',

color: '#ffffff',

links: '#4aed05'

}

},

features: {

scrollbar: false,

loop: false,

live: false,

hashtags: true,

timestamp: true,

avatars: false,

behavior: 'all'

}

}).render().setUser('acpote').start();

</script>

This is very simple code, and you can understand what affects what quite easily. What we are focusing on here is how to style, in detail, our app, so how do we do go beyond the styles given to us? To do this we must capture the CSS documents that are styling our widget and add them to our own server so we can have them modified to our liking. The twitter widget connects to these generic stylings through the JavaScript file referenced in the top of the widget code which you have placed on your site:

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

It is within this JavaScript file that the CSS files we need are referenced, so we are going to have to capture and modify this file as well as the CSS that we need. To do this, simply go to the URL of the file:

http://widgets.twimg.com/j/2/widget.js

Once at the page, save it (Ctrl + S) and store it in a folder within your server. For this example, I am going to store this file in a folder named ‘js’ (for JavaScript). Once you have the file, let’s test it to make sure it works. Go to the page which you have the code for the widget inserted, and change the file path of the JavaScript file to point to your local version. Mine looks like this: <script src=”js/widget.js”></script>

Then go to your localhost or website, and make sure that you have the same results once you refresh the page. If you do, that means that your are still referencing the default twitter styles, only now you are accessing them from your JavaScript file, not Twitter’s. This will give us the control to tell the ‘widget.js’ file where to find the styles we want.

To do this, open up your ‘widget.js’ file in any text editor. What we are looking for in this file are the CSS documents that it references. These files are what gives your widget the majority of it’s appearance, and by getting these files and editing them to our liking, we can create widgets for any site style or preference.

The Twitter ‘widget.js’ file links to two CSS files. To find them, use your editor’s ‘Find’ command (in most programs this will be Ctrl + F), and search for ‘widget.css‘(with no quotations). This will highlight the document that we need to grab, for it is the style for the widget. The file path looks like this:

https://twitter-widgets.s3.amazonaws.com/j/2/widget.css

Now we want to capture this file to our server. Go to the URL and save it, and add it to your server. I saved it within the folder ‘css/twitter/widget.css‘.

If within your ‘Find’ dialouge box, you hit ‘Find Next’, you will get another widget.css file right after the first one. This is just a another copy of the same file, the first file is under an ‘https://’, and the second is under the normal ‘http://’ protocol. For my own use, I simply duplicated the path for the second CSS file.

Now we must tell ‘widget.js‘ file to reference our now localized ‘widget.css‘ file. To do this just change the file path in the widget.js file to’ the desired local CSS file. Mine looks likes this:

{Q.loadStyleSheet("<span style="color: #33cccc;">/css/widget.css</span>",this.widgetEl)}else

{Q.loadStyleSheet("<span style="color: #33cccc;">/css/widget.css</span>",this.widgetEl)

<strong>NOTE</strong>: There should be no line break in the above code.

One is inserted here only for the readability of the site.

Now test the results by going to your localhost, refreshing, and making sure that your widget works and that all the default styles are loaded. If your app is visible and styled, then you can go ahead and start customizing the ‘widget.css’ file to your liking. If you see the app but the styles are not coming into play, check your file paths.

If you do not feel like retrieving these two files yourself, here they are. Just download this .rar and extract them to the desired positions on your site.

TIPS: Do not forget about the inline styles that exist on the page of the widget itself. These are easy to set, but also easy to forget about.