A few users have asked us for an easy way to add something a little more dynamic to their website without having to re-build it. Here’s a way to embed your most recent tweet on your webpage. All it takes is a little snippet of javascript code.

copy this code and paste it into your html page where you want it to go.Replace “XXXX” with your Twitter username.

<div id=”twitter_update_list”><script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/XXXX.json?callback=twitterCallback2&count=1″>

You should see something like this:

Nice, but a little boring.  You’ll probably want to give it a little flair.

Here’s an example of a “Twitter box” to hold your tweet.

This is just a div tag with some styles and a background image.

You can download the background image here.

Here are the styles we used, but you can edit this to suit your needs.Add them to your stylesheet or just below the </title> tag on your web page. Be sure you include the path to the background image on your server or it won’t display.

<style type=”text/css”>
.twitbox {
background-image: url(./images/tweetbox.png);
padding-top: 65px;
padding-right: 50px;
padding-bottom: 40px;
padding-left: 55px;
background-repeat: no-repeat;
height: 100px;
width: 375px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
color: #333333;
list-style-type: none;

Of course there’s a lot more you can do with this if you know CSS, but hey, they you probably don’t need this tutorial!

Leave a Reply