Display Latest Tweets From A Twitter Account Using HTML

March 10th, 2013 | Posted by Nitesh Luharuka in HTML | Javascript | Twitter

Friends,

Social media is one of the most engaging medium of communication today and every blogger wants to display tweets from his/her specific account on the website. This post briefs displaying 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 in WordPress widgets or a plugin or a custom built website or at any position of your website you want it to.

Update: Twitter officially deprecated v1.0 API from 11th June 2013. Please use Twitter widgets as explained here.
I am writing another blog post for on this update and it will be LIVE soon.

Lets write the HTML markup –

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

In the above code, 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 above code and paste at your desired position. In case you want to do some custom styling, read below –

For styling the tweets displayed, lets add some styles to the HTML markup. Add the below 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, add the below line after the markup.

<iframe style="height: 20px; text-align: right;" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=niteshluharuka&amp;show_count=false&amp;lang=en" height="240" width="320" frameborder="0" scrolling="no"></iframe>

Below 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>

Below is the output of the above code –
display_tweets
So, copy & paste and let your visitors see your tweets immediately on your website.

Let me know in case you face any issues while implementation.

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

  • David Phelps

    This is perfect, exactly what I’ve been looking for. Thank you! Would there be any way to clear the timestamp of the tweet to the next line and/or remove it completely?

    • http://www.niteshluharuka.com Nitesh

      You can put the timestamp to the next line with the following CSS changes –

      #twitter ul li a { font: normal 14px Tahoma; color: #004080;display:block;}
      #twitter ul li span a { display:inline;}
      

      In case you want the timestamp to be removed, use the below CSS –

      #twitter ul li a { font: normal 14px Tahoma; color: #004080;display:none;}
      #twitter ul li span a { display:inline;}
      
  • luxe

    Thank you so much.

  • http://www.hieronymusdesign.nl Hieronymusdesign

    Cheers mate,

    Just the code i was looking for my new wordpress theme !

  • AM

    Nitesh, this is helpful. Thank you. However, when clicking on the twitter link, the site is not opened 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

    • http://www.niteshluharuka.com Nitesh

      You can use Twitter widgets to open links on your website. Here is a link on how to use twitter widgets.

  • Sourav

    Hi!
    Thanks for the outstanding posting. It helped me hugely creating last tweet but I need to use it in Outlook Signature. As you know, there is a trend now-a-days to include own’s last tweet in email signature likes of Outlook 2010 or 2007. it is not working in any version of outlook. Can you please help me out in this? I am stuck in a bad position and deadline is near.

    Thanks
    Regards
    Sourav

    • http://www.niteshluharuka.com Nitesh

      How are you trying to achieve this?

  • PJB

    This widget no longer works with the new 1.1 API – Is there a way to get it working again? I’ve tried reading the Twitter dev pages but it’s as clear as mud.

    Thanks.

    • http://www.niteshluharuka.com Nitesh

      Hi, I am writing a blog on the same. Meanwhile, if you want to display data using HTML only, see my post here

Support us!

If you like this site please help and make click on any of these buttons!

×