Twitter; now-a-days, is the most familiar term in the web. Different kinds of people use ‘twitter’ for different purpose. Some people use to stay connected with friends while other use it to share new ideas and innovations. It is so popular that the news which we cannot get on the television and radios can be seen in the twitter. We also may want to put our twitter updates on our webpage.
For this, Twitter offers an API which you can use to pull information from twitter for your own uses. Even easier, they offer a little Javascript widget which automatically uses this API and returns simple HTML of your recent tweets.
Here are some simple steps for this.
First logon to your Twitter account and go to your homepage. Click the “Goodies” which is at the bottom of your twitter page like given below.
Then you will see the following page and click on the “Widgets”
After this you will see the following window. Click on the “My Website”. And then click on the “Profile Widget” to display your personal tweets.
After this you will see a window where you can Customize Your Profile Widget.You can add the username of the account which you want to show tweet in your webpage then set the preference ,appearance and dimension of the profile widget which will appear in page.
You can test the script by clicking the test settings.If you are fine with the testing result then click on the bottom ” Finish & Grab Code” and finally you will see the script,copy that script and paste it in the div of your page where you want to show your twitter updates .
Example:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Twitter Page</title>
</head>
<body>
< -- script copied from the twitter --->
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('rabishrestha').start();
</script>
</body>
</html>
click here to try it yourself
Note: Make sure that your twitter account has public status. If you want to change your status on twitter account, click on the setting link and unchecked the bottom “protect my tweets”.
artur
August 2, 2011
Thanks for the nice walkthrough.
is there a way to just pull raw tweets from the tweeter without the widget and its styling. i just need my raw tweets, man! :)