Display Latest Tweets From A Twitter Account Using HTML

Introduction

Friends,

Social media is one of the most engaging mediums of communication today and every blogger wants to display tweets from his/her specific account on the website. This article shows how to briefly display your latest tweets on your website without knowledge of any programming language. You can just copy and paste the code and start displaying your tweets immediately on your website. You can directly copy and paste the code into Wordpress widgets or a plugin or a custom-built website or at any position of your website you want it to.

Let's write the HTML markup

<div id="twitter">
<ul id="twitter_update_list">
</ul>
</div>
<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?screen_name=niteshluharuka&include_rts=true&count=10&callback=twitterCallback2"></script>

In the code above, in line 3 you notice the parameter "screen_name=niteshluharuka". You will need to change this to your desired twitter account username from where you want to display the tweets from. So, if your twitter handle is "mytwitterhandle", then replace "screen_name=niteshluharuka" with "screen_name=mytwitterhandle" in line 3.

You are done and if you want the displayed tweets to use the default stylesheet of your website, copy the code above and paste at your desired position. In case you want to do some custom styling, continue reading.

For styling the tweets displayed, let's add some styles to the HTML markup. Add the following section in the head section of your website:

<style type="text/css">< #twitter {
width: 310px;
border: 2px solid #CCC;
font-family: Tahoma;
font-size: 13px;
height: 300px;
overflow: auto;
margin: 10px 0px;
}
#twitter ul {
list-style: none;
margin: 0;
padding: 0;
}
#twitter ul li {
border-bottom: 1px dotted #CCC;
padding: 10px 5px;
margin: 0px;
line-height: 22px;
}
#twitter ul li a {
font: normal 14px Tahoma;
color: #004080;
}
#twitter ul li a:hover {
color: #CC0000;
}
</style>
</style>

If you want to add a "Follow" button to your twitter account then add the following line after the markup:

<iframe style="height: 20px; text-align: right;" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=niteshluharuka&show_count=false&lang=en"
height="240" width="320" frameborder="0" scrolling="no"></iframe>
The following is the complete code:
<style type="text/css">
#twitter
{
width: 310px;
border: 2px solid #CCC;
font-family: Tahoma;
font-size: 13px;
height: 300px;
overflow: auto;
margin: 10px 0px;
}
#twitter ul
{
list-style: none;
margin: 0;
padding: 0;
}
#twitter ul li
{
border-bottom: 1px dotted #CCC;
padding: 10px 5px;
margin: 0px;
line-height: 22px;
}
#twitter ul li a
{
font: normal 14px Tahoma;
color: #004080;
}
#twitter ul li a:hover
{
color: #CC0000;
}
</style>
<div id="twitter">
<ul id="twitter_update_list">
</ul>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=niteshluharuka&include_rts=true&count=10&callback=twitterCallback2"
type="text/javascript"></script>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=niteshluharuka&show_count=false&lang=en"
style="height: 20px; text-align: right;"></iframe>

The following is the output of the code above:

So, copy & paste and let your visitors see your tweets immediately on your website.

Let me know if you encounter any issues implementing this.

7 Comments

Join the conversation! Your thoughts help the community grow.

Nitesh Kejriwal11y ago
Thanks Arjun Walmiki
Arjun Dhilod11y ago
Nitesh Sir Really very nice keep going
A M13y ago
Nitesh, this is helpful. Thank you. However, when the code does not open the twitter link in a new window which is necessary. Can you please advise the code for opening a new window when clicking on the twitter link? Thx
Nitesh Kejriwal13y ago
Sure.will do!
Mahesh Chand13y ago
Awesome Nithesh. Don't forget to add link to this one in second article. Good work!
Nitesh Kejriwal13y ago
Thanks Mahesh Sir! Will be posting that one soon.
Mahesh Chand13y ago
Cool. How about posting tweet back to twitter from your website?