Here is the simple code I use to create a Twitter feed which includes avatars for a website:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Twitter feed with avatars</title>
<style type="text/css">
body {
background: #333333;
}
.twtr-widget {
float: left;
width: 300px;
margin: 50px 0 0 80px;
padding: 0 0 15px;
background: #fafafa;
/*** cross browser box shadow ***/
-moz-box-shadow: 0 0 2px #fff;
-webkit-box-shadow: 0 0 2px #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3)";
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=0,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=90,strength=3)
progid:DXImageTransform.Microsoft.Shadow
(color=#ffffff,direction=180,strength=3)
progid:DXImageTransform.Microsoft.Shadow
(color=#ffffff,direction=270,strength=3);
box-shadow: 0 0 2px #fff;
/*** kind of cross browser rounded corner ***/
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.twtr-hd {
/*** cross browser rgba ***/
background-color: transparent;
background-color: rgba(255,255,255,0.3);
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=#30ffffff,endColorstr=#30ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorstr=#30ffffff,endColorstr=#30ffffff)";
}
.twtr-bd {}
.twtr-widget .twtr-bd .twtr-tweet {
margin: 5px 0 0;
padding: 0 0 5px;
border-bottom: 1px solid #cecece;
}
.twtr-tweet:before {
display: block;
float: left;
margin: -5px 0 0 5px;
font-size: 50px; /* let's make it a big quote! */
color: #bababa;
text-shadow: 0 1px 1px #909090;
font-family: "times new roman", serif;
}
.twtr-ft { display: none; }
</style>
</head>
<body>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<!-- first box -->
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 300,
height: 300,
theme: {
shell: {
background: 'transparent',
color: '#333'
},
tweets: {
background: 'transparent',
color: '#333',
links: '#c10000'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('thelibzter').start();
</script>
You can see a working example of this Twitter feed at http://icode4you.net/wp-content/uploads/2012/02/twitterfeed_with_avatars.html.
