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.