Tuesday, August 18th, 2009 | Author: admin
Since Twitter has become hugely popular, it might be useful to show your Twitter feeds on your own website. This is easy to achieve and the following method retrieves your tweets and displays them on your website. The best part is that it can blend into your website design. You can choose to show your Twitter image or time stamp.
You can view a live demo of Twitter feeds showing on our website here à
Step 1
Download Twitter 1.12.2 (Or simply visit this URL à http://code.google.com/p/twitterjs/downloads/list).
Rename the file to twitter.js
Rename the file to twitter.js
Step 2
Upload the twitter.js to your website server under a folder where you keep your javascript files. Let’s say ‘JS’.
Upload the twitter.js to your website server under a folder where you keep your javascript files. Let’s say ‘JS’.
Step 3
Do not change anything in the twitter.js. Now open your index.php file (or the file where you would like to show the Tweets) in any editor of your choice.
Do not change anything in the twitter.js. Now open your index.php file (or the file where you would like to show the Tweets) in any editor of your choice.
Add the following code between the opening <head> tag and the first <meta…> tag.
Remember to edit the “Yoursite.com” to your website’s URL.
Ensure that you add this code in between <HEAD> and <META> tags.
Remember to edit the “Yoursite.com” to your website’s URL.
Ensure that you add this code in between <HEAD> and <META> tags.
<script src=”Yoursite.com/js/twitter.js” type=”text/javascript” charset=”utf-8″></script>
<script type=”text/javascript” charset=”utf-8″>
getTwitters(’tweet’, {
id: ‘MyTwitter’,
count: 5,
enableLinks: true,
ignoreReplies: false,
clearContents: true,
template: ‘<span class=”prefix”><img height=”20″ width=”20″ src=”%user_profile_image_url%” /> - </span> <span class=”status”>”%text%”</span> <span class=”time”><a href=”http://twitter.com/%user_screen_name%/statuses/%id%”> - %time%</a></span>’
});
</script>
<script type=”text/javascript” charset=”utf-8″>
getTwitters(’tweet’, {
id: ‘MyTwitter’,
count: 5,
enableLinks: true,
ignoreReplies: false,
clearContents: true,
template: ‘<span class=”prefix”><img height=”20″ width=”20″ src=”%user_profile_image_url%” /> - </span> <span class=”status”>”%text%”</span> <span class=”time”><a href=”http://twitter.com/%user_screen_name%/statuses/%id%”> - %time%</a></span>’
});
</script>
Step 4 (Reference)
id: ‘MYTwitter’ :: This will be your twitter URL. So if your Twitter is twitter.com/la-la-la. Then you will just place “la-la-la” in for the ID.count: 5 :: Count means how many of your Twitter updates will be displayed. 5 will display 5 of the most recent updates, 2 will display 2 of the most recent updates, and so on.
enableLinks: true :: This means that it will display links that you post in your updates. If you post a link such as “digimode.co.uk” in your tweet. If this code is set to “True” then it will display it. If it is set to “False” it will not display it.
ignoreReplies : false :: When you reply to others, It will show up as “@username - hey”. If you wish to disable replies to other users, then set to true. If left at false, then it will display tweets that are replies to other usrs.clearContents : true - hmm not sure what this realy means, Just set to true.
Template : This will determine how it will look on your forum.
Img src will retrieve your twitter avatar.
%text% will display your tweets.
%time% will show when you posted the tweet.
Step 5
Now let us include the Tweets on the page.
Now add this code in any block where you would want your Tweets to be diaplayed.
<div id=”tweet”>
<p>You can display your custom message here. <img src=”/images/indicator.gif” /></p>
</div>
<p>You can display your custom message here. <img src=”/images/indicator.gif” /></p>
</div>
That’s it. This was the final step. This will add the twitter feeds to your site. Just upload the file to your server and enjoy.
![[Post to Twitter]](http://www.digimode.co.uk/blog/wp-content/plugins/tweet-this/icons/tt-twitter-micro2.png){kind=icon}
Category: Web Design
Wednesday, 26. August 2009
If you use wordpress there is also a plugin that help you do this automatically. The solution you propose here is for standalone websites. Displaying twitter on your page can improve your SEO, number of followers and can boost your traffic.
Tuesday, 1. September 2009
cooool theme! Thanks!
Thursday, 3. September 2009
thanks !! very helpful post!
Wednesday, 9. December 2009
awsome site you have thank ya .
Wednesday, 9. December 2009
Im searching for sites related to this. Glad I found you. Thanks