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.

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 –

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.