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

  • 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! :)