Showing your latest tweets (& retweets) within your blog or site can be an intuitive way of getting people to follow you. The easiest way to do this is by retrieving your Twitter feed (in JSON format), reading your latest tweet(s) and adding them to the page.
In this example, we’ll be starting with a blank HTML5 document like so:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
</body>
</html>
Create the area within your page to show the tweet(s)
You need to create a list node to display the tweet(s) somewhere on your page, this needs to have it’s ID attribute set to ‘twitter_update_list’:
<body> <ul id="twitter_update_list"></li> </body>
Include the Twitter scripts
Next you need to include the Twitter scripts after your list node, like so:
<body>
<ul id="twitter_update_list"></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?callback=twitterCallback2&screen_name=olsgreen&count=5&include_rts=true"></script>
</body>
Again, you will need to change my username (olsgreen) for your REAL Twitter username, you can also adjust the number of tweets shown by changing the number next to count (currently set to 5).
Testing it out
The finished article should look like this:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <ul id="twitter_update_list"></ul> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?callback=twitterCallback2&screen_name=olsgreen&count=5&include_rts=true"></script> </body> </html>
Open the finished page in your browser and you should see your tweets and retweets in list format at the top of the page like the image below. You can go on and style the list using CSS.
You can download the working example above by clicking here.
[...] my tutorial‘HOW TO: Importing tweets to any web page (using just JavaScript, no PHP)’ #dd_ajax_float{ background:none repeat scroll 0 0 #FFFFFF; border:1px solid #DDDDDD; float:left; [...]
[...] here: HOW TO: The simplest way to show your tweets & RTs on any web page … Bookmark to: This entry was posted in Uncategorized and tagged oliver, php, simplest-way, [...]