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.
Is it possible to have this twitter feed without the time.reply.retweet.favorite bar under the messages?
Hi,
Have you tried following the instructions in this post – http://icode4you.net/creating-a-custom-twitter-feed-how-to-remove-the-time-stamp-from-tweets?? that may be what you are looking for.
Thanks!
AMG thank you! First one that actually works for me! Yay
Awesome, glad to hear it! Thanks for commenting
hey, how do you change the font size of the tweets?
Hi Charissa,
You could easily do that by editing your CSS, specifically by adding a font-size style to “#twtr-widget-1 .twtr-tweet-text”. Please let me know if that doesn’t make sense.
Thanks!
This is excellent, thank you. Spent about an hour working with the twitter api and a hack to get mine to work and its missing the features this code provides.
This looks excellent and easy to mod the look and feel.
Thanks again!
Great, thanks for commenting!