adding a Twitter bird and tweet stream to your blog

Adding your Twitter bird to your blog isn't tricky - it's just a matter of uploading the image to your blog, then doing some cutting and pasting. Here's what you'll do:

1. Upload the image for your Twitter bird to any blank blog post, under the Edit HMTL (not Compose) tab. In order to determine what alignment setting to upload it under (left or center), you'll need to decide where you'd like the bird to be. If it's a smaller-sized bird, you might want it to sit on the left side of your sidebar, with your Tweets appearing to the right and below the bird, like it does here. If this is the case, choose the left alignment setting.

Or you might prefer the bird to be centered in your sidebar, and have your tweets appear directly below it (how it looks here). If this is the case, choose the "center" alignment setting.

2. Once the image has been uploaded to your blog post, you'll see a strip of HTML code that looks roughly like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_f9kYcQ0o01M/S6htmcxzW1I/AAAAAAAAUqA/55IxYUE8MWo/s1600-h/BIRD.jpg"><img style="cursor:pointer; cursor:hand;width: 400px; height: 267px;" src="http://3.bp.blogspot.com/_f9kYcQ0o01M/S6htmcxzW1I/AAAAAAAAUqA/55IxYUE8MWo/s400/PHOTO.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5451727856259521362" /></a>
3. Replace the href section of the code, shown above in PINK with the complete URL of your Twitter page, giving you something like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://twitter.com/rainydaydesign"><img style="cursor:pointer; cursor:hand;width: 400px; height: 267px;" src="http://3.bp.blogspot.com/_f9kYcQ0o01M/S6htmcxzW1I/AAAAAAAAUqA/55IxYUE8MWo/s400/PHOTO.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5451727856259521362" /></a>
Remember, your image code will be different, but what you're looking to replace is the bit of code after href=

4. Now, add "target="_blank" to the code, just before href. The HTML code will now look roughly like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" target="_blank" href="http://twitter.com/rainydaydesign"><img style="cursor:pointer; cursor:hand;width: 400px; height: 267px;" src="http://3.bp.blogspot.com/_f9kYcQ0o01M/S6htmcxzW1I/AAAAAAAAUqA/55IxYUE8MWo/s400/PHOTO.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5451727856259521362" /></a>
Adding this little bit of code is what will cause clicking on the bird to launch a new browser window (so that your visitors don't navigate away from your blog). If you'd prefer not to launch a new window, skip this step.

5. Cut the entire strip of HTML code from your post, and copy it to your notepad, desktop, document, etc. Return to Layout (when the pop up window appears asking you if you're sure you want to navigate away from this unsaved post, click "yes" - you don't need to either save or publish the post you've just used).

6. Click Add Gadget, and choose HTML/JavaScript. When the pop up window launches, paste the entire code for your Twitter bird image into it, and click Save.

7. Check from the "front end" of your blog to make sure your bird is appearing correctly. If he's not, try again. If he is, awesome! Go on to the next step....

8. Copy/paste the following code directly after the HTML code for your bird, in the same HTML/JavaScript gadget.
<div id="twitter_div">
<h2 style="display:none;" class="sidebar-title">Tweet, Tweet!</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/rainydaydesign">follow me on Twitter</a>
</div><script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/rainydaydesign.json?callback=twitterCallback2&count=2" type="text/javascript"></script>

9. Change "rainydaydesign" to your own Twitter user name, in both instances it appears.

10. You can change the 2 towards the end of the code to anything between 1 and 5. This is the number of recent tweets that will appear immediately after your bird.

If you'd prefer the bit that says "follow me on Twitter" not to appear, delete the section in PINK below:
<div id="twitter_div">
<h2 style="display:none;" class="sidebar-title">Tweet, Tweet!</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/rainydaydesign">follow me on Twitter</a>
</div><script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/rainydaydesign.json?callback=twitterCallback2&count=2" type="text/javascript"></script>

Or, you can change "follow me on Twitter" to say whatever you'd like. Just replace the pink highlighted code below with your own invitation:
<div id="twitter_div">
<h2 style="display:none;" class="sidebar-title">Tweet, Tweet!</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/rainydaydesign">follow me on Twitter</a>
</div><script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/rainydaydesign.json?callback=twitterCallback2&count=2" type="text/javascript"></script>

For instance:
<div id="twitter_div">
<h2 style="display:none;" class="sidebar-title">Tweet, Tweet!</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/rainydaydesign">Let's get tweety together.</a>
</div><script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/rainydaydesign.json?callback=twitterCallback2&count=2" type="text/javascript"></script>

That's it! You've just Twitterfied your blog! Depending on whether your bird has a background color applied to it, or if the image is on a transparent background, you may wish to experiment with moving the bird around your blog, to see where you like him/her best. You can put the image in your sidebar, above your main posting column, in the footer section, etc.

RETURN TO CLIENT RESOURCES