This has ended up being one of my most useful resources in web design. Plus, if your not using photos for gradients, pages load faster. I love pages that load faster.
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> </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.
12 notes link