First, decide where about on your page you want your last tweet to display. Then paste in this line of HTML.<\/p>\n

[html]<div id=”twitter_update_list”>
\n<\/div>[\/html]<\/p>\n

Step 2:<\/h3>\n

Next you need to put these 2 lines of JavaScript below the code in step 1. On the 2nd line of code where it says 12345.json<\/strong>, you need to replace 12345<\/strong> with your twitter username. So mine would be webdesigndev.json<\/strong>.<\/p>\n

[js]<script type=”text\/javascript” src=”http:\/\/twitter.com\/javascripts\/blogger.js”>
\n<\/script>
\n<script type=”text\/javascript” src=”http:\/\/twitter.com\/statuses\/user_timeline\/12345.json?callback=twitterCallback2&count=1″>
\n<\/script>[\/js]<\/p>\n

Now you will have a plain text version of your last tweet being displayed. So simple! Continue reading below to find out how to style your little twitter widget using CSS, and even customize it by playing around with some of the Twitter API Parameters.<\/p>\n

(optional styling)<\/h3>\n

Of course all web designers should perform some sort of styling to their last tweet, to jazz it up a little. At the moment your last tweet is displayed as a bullet list. To remove this and make it pure plain text, put this in your CSS Stylesheet.<\/p>\n

[css]#twitter_update_list li {
\nlist-style-type: none;
\n}[\/css]<\/p>\n

Then, you can change the colour of the main tweet text. If I wanted to make the text orange and the background black, I would put…<\/p>\n

[css]#twitter_update_list span {
\ncolor: #FFCC00;
\nbackground: #000000;
\n}[\/css]<\/p>\n

Then you can style the links within your last tweet, and style when happens when you hover over them. An example would be the following.<\/p>\n

[css]#twitter_update_list span a {
\ndisplay: inline;
\ncolor: #000000;
\n}
\n#twitter_update_list span a:hover {
\ntext-decoration: underline;
\ncolor: #666666;
\n}[\/css]<\/p>\n

I have styled mine using CSS, and come out with something that looks like this…<\/p>\n

<\/p>\n

You can play around with the CSS, and what you want your widget to look like.<\/p>\n

(optional customization)<\/h3>\n

Twitters API is very big. You can play around with many of the different settings for the twitterCallback function. You can view the api documentation over at this link.<\/p>\n

http:\/\/apiwiki.twitter.com\/Twitter-REST-API-Method%3A-statuses-user_timeline<\/p>\n

Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"

This tutorial will teach you how to display your last twitter tweet, without the use of any plugins. Infact it only uses 2 lines of JavaScript, and 1 line of HTML.<\/p>\n","protected":false},"author":30,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[47],"tags":[],"aioseo_notices":[],"yoast_head":"\n