Design & Code: Recent Tweets Widget

Want to show your recent tweets on your website? In this tutorial I’ll teach you how to design and code a recent tweet Twitter Box in Photoshop and Dreamweaver.

Photoshop

1. I’ll be placing my Recent Tweets design on my banner so I’ve got my banner on a background layer to see where I want my tweets box will be placed. 2. Create a new layer and place a Twitter bird, I’m using the one from this tutorial. 3. Get the rounded rectangle tool and draw a box for the tweets. Using the font from DaFont.com, Love Ya Like A Sister. 4. With the pen tool draw the shape on the bottom of the box. 5. Remove the background layer so it’s transparent and save it in PNG format.

Code

6. Go to the Twitter website to get your Twitter badge, choose the ‘other’ option if your using this on your website. On the next page select the html/javascript, you’ll then be taken to the next page where you can customize your code with how many tweets you want to show, and what the title of the badge says. I have selected only  1 tweet to be shown, and have selected the title to be off. You will be given your personal code, it will look like something below:

<div id="twitter_div">
<h2 style="display: none;" >Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/BloomWebDesign" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="//twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="//twitter.com/statuses/user_timeline/BloomWebDesign.json?callback=twitterCallback2&amp;count=1"></script>

Before putting the code on your website and styling you have to edit the generated code so it’s validate. The Javasript code generates the tweets in a list format, to complete the code you need to place a empty list item under twitter_update_list.

<div id="twitter_div">
<h2 style="display: none;" >Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<li></li>
</ul>
<a href="http://twitter.com/BloomWebDesign" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="//twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="//twitter.com/statuses/user_timeline/BloomWebDesign.json?callback=twitterCallback2&amp;count=1"></script>

Paste the code surrounded by the divs tags where you want your box to be, paste the 2 lines of javascript code right before the </body> tag.

Style your Tweet Box

7. I have comment each section of the css code below:

/*Shows what type of font will be on the twitter box, and where the font will be placed on the design */
#twitter_update_list {
height: 20px;
width: 300px;
margin-top: 26px;
margin-left: 162px;
margin-bottom: 101px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11;
color:#333333;
}

/* The font will be shown in a list format, this will style the lists */
#twitter_update_list li {
list-style: none;
text-align: left;
}

/* This is how the recent tweets text will look like */
#twitter_update_list p {
text-align: left;
 padding-right: 6px;
 padding-bottom: 10px;

}

/* this will show how links appear in the twitter box */
#twitter_update_list li a {
text-decoration:none;
color: #5AC1F3;
}

/* this will show how links appear when you hover over them in the twitter box */
#twitter_update_list li a:hover {
text-decoration: underline;
color: #0F89C4;
}

Final Result