Display Latest Tweets From A Twitter Account Using HTML & Javascript
Friends,
In my last post I discussed about how to display tweets on your webpage in the most easiest way. This post will continue the Twitter series and deal with the situation when you want to load tweets of a specific user on the fly or at run time. The focus of this post is to help you when you are planning to implement any one of the following or all things-
- Coding a webpage and want to display the tweets without and IFrame.
- Auto Refresh the latest tweets on the webpage using Javascript. In case you do not understadn by the end of this post how you can do this, feel free to comment or contact me 🙂
Update: Twitter has deprecated v1.0 API since today (12th June 2013) and the below code will not show any tweets to you.
To get started, lets build the HTML markup first. Place the below tag in your
Once we have the markup ready, it is time to write some piece of Javascript. Since we will be using jQuery, lets include the reference to jQuery Library. I am using the one from Google CDN. You are free to use it from your local source repository as well. Copy and Paste the below code in your <head> tag and save the file as HTML file. Run the file and you’ll find the last 10 tweets from your account(image shows from my account) loaded on the page via Javascript.
In the above code, in line 4 you notice the statement ‘loadLatestTweet(10, “niteshluharuka”);’.
This function requires 2 parameters –
- 1st parameter is the number of tweets you want to load. If you want to load 5 tweets, pass the value as 5 instead of 10 as passed by me.
- 2nd parameter is the account name you want to load the tweets from. So, if your twitter handle is “mytwitterhandle”, then pass ‘mytwitterhandle’ in the function and the function will look like below-
loadLatestTweet(5, "mytwitterhandle");
Once you are able to get the tweets on your page, its time to give some style to your tweets. Copy and paste the below CSS in your head section
Below is the complete code –
Hope you enjoyed reading this post and find this helpful. Comment your experiences and let me know in case you face any issues while implementation.