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.

10 Responses



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Support us!

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

×