Geniyo: July 2011

Twitter Status Display with Blogger How-To

I receive many inquires on how I created my 'latest tweet' display on this blog. To pose an answer to those inquiries I have not only written a step by step tutorial on creating a custom Twitter status display widget to display your latest tweet in Blogger, but I have created several free Twitter status display images to go along with the step by step tutorial

In all there are seven Twitter status display image styles to choose from, and that's a good place to start: choosing a Twitter status display. Examples of each Twitter status display image and it's associated styling are shown below.

Step 1

Choose and download the background image associated with the Twitter status display you would like to implement, click the link reading, "Download Image," and upload it to your image host. (Picasa, photobucket, and so on).

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» Download Image

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #77595c;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}

a#twitter-link {
float : right;
padding : 0 25px 0 0;
float : right!important;
text-align : right!important;
padding : 0 25px;
}

#twitter_div a, #twitter_div a:visited {
color : #ea3c6f;
}

#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #77595c !important ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» Download Image

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #624e5b;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #ff5f9d;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #624e5b !important ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» Download Image

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #6c5e57;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #4d9b96;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #6c5e57 !important ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» Download Image

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #6c5e57;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #4d9b96;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #6c5e57 !important ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» Download Image

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #2f2f2f;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #00c5dd;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #2f2f2f !important ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» Download Image

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #000000;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #00aeef;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #000000 !important ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» Download Image

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #3c3c3c;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #00b196;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #3c3c3c !important ;
}

Step 2

Copy the CSS in the grey box below the style of your choice, and replace YOUR_IMAGE_URL with (drumroll) the URL to the your uploaded background image, and paste this CSS into your template above,
]]></b:skin>

Step 3

Next, replace the pink text, TWITTER_ID with your twitter ID in the Twitter timeline script shown below, and paste this at the bottom of your template, above the tag,
</body>

<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='http://twitter.com/statuses/user_timeline/TWITTER_ID.json?callback=twitterCallback2& amp;count=1' type='text/javascript'/>

*Note there is a space between the & symbol and the text that follows. You will need to delete this space upon pasting into your template or else it will not work.

Step 4

Before saving your changes, preview your template. If your template looks the same/normal, then click Save.

Step 5

Now for the fun part, the Twitter display itself! Where you would like your Twitter status display to appear, select "Add a New Gadget," and choose an "HTML/JavaScript" gadget from Layout. In the "Content" field of the new gadget, copy and paste the code shown below. Be sure to replace the pink text TWITTER_ID with of course, your actual Twitter ID. Again, with no @ symbol, just your user-name. Save your new gadget, and view your blog. Your twitter status update or updates should now appear on your blog where you have added the new gadget.

<div id='twitter_div'><ul id='twitter_update_list'></ul><a href='http://twitter.com/TWITTER_ID' id='twitter-link' title='follow me!'>follow me!</a></div>

If you use this tutorial or one of these Twitter status display badges on your blog, please comment below and let me know how it has worked for you. Feel free to ask if you need any assistance with this as well.

Twitter Sweet

Download Icon Set

I'd like to re-iterate that these icons are free to use commercially and personally, with no attribution link required. I did draw the twitter bird myself, so please do not claim these icons as your solely own art, and please do not redistribute these icons yourself, but refer downloads to this page please. Thanks!

I appreciate your thoughts and feedback on these icons, so please do leave yours in a comment!