Creating a custom Twitter feed with avatars for your website

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" "">
<html xmlns="">
	<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)";


			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);

				-ms-filter: "progid:DXImageTransform.Microsoft.gradient

			.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; }
	<script src=""></script>
	<!-- first box -->
	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'


You can see a working example of this Twitter feed at

Meet the author

Libby Fisher is an experienced freelance web developer, recently relocated from Seattle to Boston, and passionate about developing websites that are both aesthetically appealing and intuitively usable - or as she prefers: "beautifully effective."

  • Joost

    Is it possible to have this twitter feed without the time.reply.retweet.favorite bar under the messages?

  • Jeannie

    AMG thank you! First one that actually works for me! Yay 😀

    • Libby Fisher

      Awesome, glad to hear it! Thanks for commenting :)

  • charissa ong

    hey, how do you change the font size of the tweets?

    • Libby Fisher

      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.


  • Hilton Riddex

    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!

    • Libby Fisher

      Great, thanks for commenting! :)