Rocket Shake

display tweets on a web page

- February 4 -

Want to simply add your tweets from twitter to your webpage without wigdets and boxes and things? Easy. The following 3 easy steps are written assuming that you have a basic understanding of how a web page is written and configured.

First, the css. Add the following code to the <head> of your web page. The “color” is the text color, while the “border”, “padding” and “margin” add borders and/or space around or between tweets.

css:

#twitter_div {
color: #000;
}
#twitter_div li {
border-bottom:1px solid #000;
padding-bottom: 5px;
margin-bottom: 5px;
}

Second, the html. Add the following code to the <body> of your webpage where you want the tweets to be displayed.

html:

<div id="twitter_div">
<ul id="twitter_update_list">
<li>&nbsp;</li>
</ul>
</div>

Last, add the following code at the very bottom of the <body>. It should be the last thing before </body>. Be sure that you change “USERNAME” to the name of the twitter username who’s tweets you’d like to display. Also, if you’d like to show more than 1 tweet, you may change the count where it says “count=1”. Just change the “1” to however many tweets you’d like to show, it can be anywhere from 1 to 200.

javascript:

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

That’s it!

Visit rocketshake.com to see a working version of the above model.

older newer
  1. fitnessapparaten reblogged this from rocketshake
  2. lane-clampett reblogged this from rocketshake
  3. lacie-martineze reblogged this from rocketshake
  4. bennett-lopresti reblogged this from rocketshake
  5. rocketshake posted this