kristarella.blog

Happiness Engineer at Automattic, lover of knitting, crochet, sci-fi and more

You are here: Home / Blogging / Display your tweets without a plugin

Display your tweets without a plugin

by

NB This method no longer works well with newer Twitter APIs. I don’t recommend using it anymore. The simplest replacement is using Twitter’s own widget generator.

I’ve seen people use some rather hefty plugins on their blogs to display their recent Twitter action and a couple of people have asked me how I display my tweets. Well, I’ll tell ya! The essential bits are only about 3 lines of code.

A touch of javascript

There’s two bits of javascript that you can place anywhere on the page. A good spot is at the very end of your markup, before </body>: if Twitter has a hiccup, the rest of your page will load first.

Update 19 Oct 2012: I’ve just updated the second javascript URL because the old one has been deleted. This one works with version 1 of the Twitter API, but that is already being deprecated for v1.1. If I find a new method for doing this I will write about it.

<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/username.json?callback=twitterCallback2&count=1"></script>

Watch out for that bit in the second line where it says “username”. You should replace that with your own twitter username. You can also change count=1 if you want to show more than one tweet.

If you’re using the Thesis theme. You can insert that toward the end of your page using the following code in custom_functions.php.

function footer_scripts() { ?>
	<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/username.json?callback=twitterCallback2&count=1"></script>
<?php }
add_action('thesis_hook_after_html', 'footer_scripts');

A dash of HTML

Then in the spot on your page where you want to show your latest tweets, you place the following code.

<div id="twitter_div"><ul id="twitter_update_list"><li>&nbsp;</li></ul></div>

The way this little bit works is that the javascript, when it loads, replaces anything inside <ul id="twitter_update_list"><li>&nbsp;</li></ul> with the tweets. An example of what it ends up looking like from my Twitter stream is:

<ul id="twitter_update_list">
	<li>
		<span>@<a href="http://www.twitter.com/matpacker">matpacker</a> OMG, hope you're not too damaged!</span> <a href="http://twitter.com/kristarella/statuses/1122887200" style="font-size: 85%;">19 minutes ago</a>
	</li>
</ul>

For any widget enabled theme, the HTML can go in a text widget to appear in one of the widgetized areas of your blog (usually sidebar, but some themes offer more widget areas). Or you can insert it into one of your theme files.

For those on Thesis who want to insert it with a hook with custom_functions.php… For example, into your sidebar,

function twitter_widget() { ?>
	<li class="widget">
		<div id="twitter_div"><ul id="twitter_update_list"><li> </li></ul></div>
		<p><span class="bracket">{</span> <a href="http://twitter.com/username">Follow me on Twitter</a> <span class="bracket">}</span></p>
	</li>
<?php }
add_action('thesis_hook_after_sidebar_1', 'twitter_widget');

Or, you could put it in your footer as I have. Take a look at my Thesis footers tutorial for details on setting up a fat footer.

Mix in some CSS

You don't need a plugin to show your tweets
You don’t need a plugin to show your tweets

Then all you need is a bit of style. I added an image by darkmotion and available at Function. Find some you like in this Twitter icon roundup. I just popped the image in with HTML, like so,

<div id="twitter_div"><ul id="twitter_update_list"><li>&nbsp;</li></ul><img src="<?php bloginfo('template_url'); ?>/custom/images/twitter.png" alt="" /></div>

Since I wrapped my Twitter code in a widget it already had proper widget text styles and I only needed a little bit of CSS.

.custom #twitter_div {padding:0.625em; border:3px double #ddd; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
	.custom #twitter_div img {float:right;}

I implemented this code when I first jumped on Twitter, but for some reason, this simple bit of code seems harder and harder to find on their site. So now, here it is for you all to enjoy.

Don’t forget to follow me on Twitter!

Reader Interactions

Comments

  2. Obviously, I did something wrong. I tried to follow it, but I am using the Open Hook plugin. Could you give step by step instructions for those of us using it?

    Thanks.

  3. Cheers Shae!

    JHS, using OpenHook you would treat the code as if you weren’t using Thesis.
    Add into the After HTML box:

    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=1"></script>

    Don’t forget to put your own Twitter username.

    And if you want the widget to be in the sidebar either add
    <div id="twitter_div"><ul id="twitter_update_list"><li>&nbsp;</li></ul></div>
    into a text widget. Or add,

    	<li class="widget">
		<div id="twitter_div"><ul id="twitter_update_list"><li> </li></ul></div>
		<p><span class="bracket">{</span> <a href="http://twitter.com/username">Follow me on Twitter</a> <span class="bracket">}</span></p>
	</li>

    into one of the sidebar boxes (e.g. Before Sidebar 1) of OpenHook.

    You seem to have it working now though. 😉

  4. OK . . . I figured it out. I am slowly but surely getting the drift on the Open Hook plugin. i’m a slow learner. 🙂

    Thanks for yet another fabulous hack!

  5. @kristarella — Great coding. I’ll look into doing this. I may want to supplement it slightly by figuring someway to keep @replies from showing … some of mine are rather, well, indelicate, and would be best not shown on my blog. I suppose I could do some php to check for the use of an @ and just not show any tweets that contain them (thinking out loud). Anyway, great job and thanks for sharing it!

  7. Thanks Bruce!

    Yeah, could be hard to exclude replies, because then you might exclude good re-tweets as well? There might be something in the Twitter API that tells you how to do that. Not sure.

  8. It shouldn’t be too difficult to exclude replies, if you want to, of course. The following PHP should work:

    if (substr($strTweet, 0, 1) == “@”) {
    // don’t display
    } else {
    // display
    }

    Just wrap that around the code that displays each tweet, store the value of each tweet in the $strTweet variable, and add PHP tags as needed.

  10. @kristarella, Good point, but looks like Ben has a great workaround that doesn’t exclude retweets.
    @Ben Much thanks … I like how cleanly you handled that.

    And again, kristarella, thanks for sharing!

  11. @bruce: Your own timeline won’t have any replies from others. But you can always use the Yahoo! Query Language (YQL) to select a subset of your statuses.

    For example a YQL query like the one below will return my last 5 statuses that contain a link:

    select status.text from xml where url = 'http://twitter.com/statuses/user_timeline/betancourtcode.xml?count=5' and status.text like '%http://%'

    Make sure to select JSON output and provide a callback function, like twitterCallback2.

  13. @claude, Fascinating stuff. Thank you for sharing. BTW, your site looks impressive … a lot of great programming information. Thanks again.

  14. Hi,
    I can’t seem to be adding it into the blog, I’ve added these two lines of code

     

    vinod407 is my username.
    Thanks in anticipation.

  15. Sorry Vinod, your code didn’t come out in the comment.

    You need to encode HTML in comments, so that when you’re typing a < looks like &lt; and a > looks like &gt;.

    However, if you’ve only added two lines of code then it’s probably not enough, you have to add the two lines of javascript at the start of the post and then the bit of HTML later for it to work.

  17. kristarella this is Rad. Thank you so much.

    I am having a little trouble on getting the style. I am using Open hook as well and I am not sure where to paste the HTTP code in that displays the twitter icon. I have uploaded an image to my customs.image folder, but still not having luck. I am new to thesis and trying to set up my new blog as we speak. Thanks again.

  18. Brian, the code with the image corresponds the the HTML that you put in a text widget, or sidebar OpenHook box. You need to replace part of that first HTML with the latter one containing the image.

  19. I’ve always liked your latest Twitter post thingy and I think you’ve talked me through it before but it’s nice to have it here as a reference.

    I’m currently just using the standard thing that you can generate with at Twitter but I’m considering doing what you’ve done here.

    Cheers

  20. Hey Lee,

    Wow, I didn’t realise/had forgotten that Twitter offered any widgets. It’s so well hidden at the bottom of the page under “Apps”. I clicked through there, and through to the Widgets page and then to the HTML widgets page and realised, that’s where I got the code from in the first place!

    I posted it here because several people asked me how to do it and I could not find the instructions on the Twitter page. Oh well, their poor navigation has been my gain in new followers.

  24. Krista,

    I got your code working except for the div tag for the twitter image. Where would I be placing that code? Thanks so much!

  29. Robert — the line that includes the Twitter image replaces the line in the previous code block that starts with the same div id="twitter_div".

    Pasquale — thanks for the little fella. Love your work, and love getting some of them for free too 😉

    Lawton — you didn’t mess anything up, but it would probably help the styling if you wrapped the whole thing in <li class="widget"> code, as per my previous comment about using OpenHook. Then it will inherit the correct font sizes. Using an image is totally up to you. You don’t have to. 🙂

  32. I added this before the Custom CSS code:

    <li class=”widget”

    and then closed it after the Twitter code with but I think it broke the border around it.

  33. Lawton — that looks good now, whatever you’re doing is good. Previously the text was really small and the list items had bullets, but now it looks like right. Don’t know about the border, but I don’t know that you really need one with that positioning. 🙂

  34. I’ve got a simple solution as well. Drag an standard rss widget onto your preferred sidebar, position it where you want it, and do a search on search.twitter.com for your username.

    So we search for kristarella and then grab the rss feed and load it into our rss reader. Neat huh?

  35. rumblepup — Yep. It is pretty neat… and already mentioned by Ben. Actually, you don’t even need to use the search query; there’s a link to the RSS of your timeline at the bottom of your profile page.

    I think I prefer the format of the API method: it has the timestamp and is a bit more flexible with styling. 🙂

  37. Sweet. I was just about ready to (unenthusiastically) bring in Alex King’s Twitter plugin (which I’ve been using forever) to a new design I’m working on when I saw this article! Nothing against his plugin, but it does seem sluggish. Additionally, there’s a bug of some sort that adds a redundant custom field to any post/page, many times over. I had to delete 22 of them earlier this afternoon! I have no idea what could be causing the problem but I suspect it may be tied to WP’s autosave feature. Anyway, I’m anxious to try your method and spare myself the headache – not to mention load time! 🙂

  38. Charity — I know! I got so annoyed with those duplicate custom fields that I got rid of that plugin and started using TwitterFeed. It’s been really cool, I have my Delicious bookmarks going there and my new blog posts. People always say thanks for the bookmark links and comment on my new posts.

    Make sure you put the javascript in your footer. If it gets hung up, the rest of your page will load first and your Twitter box will just be empty until it loads and inserts the content.

  39. Ok, I need a little help please. The widget displays just fine in the sidebars, but if I hook it after the multimedia box, I’m getting a bullet on the outside. I’ve tried to figure it out on my own, but I’m stumped. Can anyone help me out?

  42. Kristarella or Shae, pleeeese tell me how you got rid of that bullet!!! driving me crazy! And thanks Kris for the great tutorials!

  45. Thank you, Kristarella, for this enormously helpful tutorial. My question: would it be possible to combine two different twitter accounts into one single feed? For a 2-author blog. The only options I’ve been able to find are using services like Yahoo Pipes to create an RSS feed, which is a bit clumsy, harder to style, and doesn’t have the timestamp. I know zero javascript, so I don’t know how difficult this would be. Any ideas?

  46. Blake, I don’t know any way you could do it with the javascript method (I don’t know that much JS myself). The only way I would think to do it is to use the Twitter RSS feeds (link is at the bottom of your Twitter profile page) and use Feedburner or another service to combine them.

  47. Hi. I’m looking for a way to display (on my HTML page) just the text of a tweet with no bullet and no indicator at the end saying how many minutes or hours ago it was posted. Do you think there’s a way to modify your code to do this? Many thanks for any help.

  48. Greg — with this method the only way to hide that stuff is with CSS:

    ul#twitter_update_list {list-style:none;}
ul#twitter_update_list li a {display:none;}
ul#twitter_update_list li span a {display:inline;}

  49. Thanks, Kristarella. That worked for me. Is there also a way to drop the link so that all I get is the text?

  50. Greg — which link is that? If it’s the ‘follow me on twitter’ link, just delete that whole paragraph from the code, it’s not part of the essential bits to make the javascript work. If it’s a link to someone’s username because it’s a reply tweet, then there are a couple of suggestions in previous comments for not displaying replies.

  51. Thanks for the tutorial, Kristarella. Followed it and I love how it looks!

    Problem now is that I’m trying to place it right next to the title but making no headway. I should add that I’m hopeless at CSS. Tried a few tips and tricks on the Thesis forum as well but they all didn’t do anything for me.

    I was wondering what the best way to achieve that might be, besides dropping the idea of course?

  52. Isaiah — you need to give #logo and #tagline a width so that they fit next to the twitter dive, because by default they spread the whole width of the header. Then insert twitter before the title and float it to the right.

  54. Kristarella,

    Thanks for the wonderful tutorial. I incorporated it into my newly launched blog and it works like a charm.

    One question: How can I set the position/order in which it displays in the sidebar?

    For example, each time I enable a new widget, the Tweet section gets pushed further down the page. I’d like it to stay in position 4 right underneath the “Email Updates” widget.

    Is this possible?

    Thanks in advance!

  56. Hi
    Thx for the fix, worked like a charm!
    at first.
    at some point i noticed this wierdness, so i tried switching it to the code from the twtr site but sill the same, maybe u know why –
    On my Mac everything works cool
    On my Win laptop the tweet is always displayed as “less then a minute ago” even when its been hours since i last twat. (again, safari and ff show this just as it should be).
    I dont mind deleting the part that counts the time, i just dont know which part of the code is it.
    any chance u can help ?
    thx

  58. hi, my bad, i blamed windows – the usual suspect – but it was all my fault – i changed the date in my lap top to a few months back for some particular reason and forgot all about it. and thats why it couldnt “digest” the time info from twitter as it should have. all good now. THX – and sorry for the bother:)

  59. Hi Kristarella, I just wanted to say thank you for all your wonderful tutorials. Your nav menu one helped TONS when I was adding a second menu to my thesis theme. I’m working all the bugs out offline, but I had to say thanks. This twitter coding works like a charm. Stumbled!!

  60. Hi Kris,
    I tried to follow this tutorial and get stuck about where to add the CSS (Custom CSS – I now guess)…anyway, I gave up on the mod and decided to settle with the Twitter Widget and I’ve uninstalled everything from your tutorial but the Twitter posts are still coming through!? There’s no HTML Text Widget active, I’ve cleared the custom_functions.php and even reinstalled Thesis 1.5. But it’s still there!? Very odd – can you help me please?
    Thanks,
    Pete

  61. Peter — the only Twitter stuff I can see on your site is a Twitter widget inside a text widget. It doesn’t have anything to do with the code in this tutorial. If you don’t want that one, remove the text widget.

  62. Hi Kristarella! Thank you very much for this! Your code makes my twitter display look amazing. I’ve learned a ton from some of your other tutorials too. Thanks again!

  63. I use it on my own site which is working well but have a few problems, not sure if you can help but…

    A – I’m looking for a way to exclude @reply messages I send to other users
    B – The formatting when displaying @replies gets screwed up

    If you can help that would be fabulous!

    Thanks

  64. Johnny — I haven’t tried to exclude the replies, but you could try to do that with the PHP in a previous comment.

    The reason the formatting is messed up is because of the CSS:

    #twitter_div ul li a {
	width:65px;
	display:block;
	position:relative;
	top:-43px;
	left:-90px;
	line-height:19px;
	text-transform:capitalize;
}

    You’ll need to override that positioning for links that are inside the tweet content, which are inside a span. E.g., #twitter_div ul li span a {top:0; left:0; display:inline;}.

  66. Thanks for the great tutorial!

    Sadly the twitter feed comes up blank on networks where twitter is blocked (as in more and more corporate networks). Is there a work-around? I was hoping for an alternative to the plug-in “Twitter for WordPress” which more often than not fails with the mention “No public Twitter messages”.

    Anyway, thanks again.

  67. Martin — I don’t really know what method they use to block things so I’m not sure how you would combat it. You could try putting your Twitter RSS feed (link in the sidebar of your profile page) into an RSS widget.

  69. Hi – great discussion this!
    I was wondering about the twitter timeline of posts. Would it be possible to display a random tweet from a singel user’s feed?

  70. Cobus — Sorry, I can’t think of any way to do that with this javascript method. You might be able to save the javascript file and edit it to get a random tweet, but I’m not sure. I think a better approach would be to parse the RSS feed of your tweets and store them up then choose one randomly with PHP.

    There’s a tutorial on parsing feeds… I think Magpie comes with WordPress already if you’re using WordPress. Obviously there are more steps than it that tutorial to get to your goal. If you’re interested in pursuing it and need some assistance let us know. 🙂

  71. Hello.

    I have previously used a php code to show my twitter updates on my blog. Problem with that is that it doesn’t seem to update the twitter updates before it has gone many hours, and sometimes never.

    Wanted to try out you simple code. Placed the code inside my tweet.php which I upload inside my header.php. It doesn’t work. I have also tried to placed it inside in my tweet.php.

    Any idea why it doesn’t work?

  75. Mokie — Sorry, I was sure I replied to you, but did so via my mobile… maybe it went to the spam and I missed it by a couple of days on the auto delete.
    I think the essence of my comment was that I don’t have enough information to help you, the key to this technique is calling the javascript files somewhere on the page and making sure that the correct HTML is within the body of the page. That’s it. If you only inserted the code into the head of the document, that won’t work. Without understanding the nature of your tweet.php file, I can’t tell you much more at this point.

    Brandon — thanks for sharing that!

  76. Thank you so much for this tutorial. I also want to exclude @ replies, but the comment about PHP isn’t quite thorough enough for me to understand. Do you think you could elaborate?

  77. Alyssa — having looked at it a bit more, I’m not sure how you could exclude Tweets gathered with this method via PHP. The reason being that this method uses javascript to add the tweets to the site after it’s loaded. However, PHP processing happens before the page is loaded…

    You could try downloading the Twitter blogger.js file and edit it to exclude replies. I’m not 100% sure how it would work (I’m not that strong in javascript), but it might involve changing the line document.getElementById('twitter_update_list').innerHTML = statusHTML.join(''); to

    if (reply) {}
else { document.getElementById('twitter_update_list').innerHTML = statusHTML.join(''); }

    However, that would probably result in a blank tweet whenever the most recent was a reply. If you know anyone good with javascript I would ask them how to do what I’m trying to do above, but more effectively 😉

  78. This is all very well but it assumes that javascript is turned on also twitter is constantly plagued with server issues.
    Andrew

  79. Andrew — I consider the display of tweets to be a superfluous nicety and not primary content. So, if someone has javascript turned off and doesn’t see the tweet, I’m not really fussed. If someone has javascript turned off they are going to be missing a significant part of the web experience, including much of the functionality of Twitter’s own pages.

    If your comment about the server issues is in regard to using their hosted javascript file, there is nothing preventing you from downloading and hosting that file yourself. If it’s in regard to being able to fetch those tweets at all while their server is overloaded, then many more techniques other than javascript will also be affected by outages.

    If you’re after something completely reliable and completely customisable you will probably need to host it yourself. For that you will need either knowledge greater than my own to fetch your tweets and store them yourself, or a plugin or external bit of software, which in the end defeats the whole premise of this post. I don’t think there’s anything wrong with using a plugin, I just chose not to and chose to use this method and share it.

  80. I absolutely agree with you and feel that most people will go down the route of using a plug in which considering the time and effort put in by the contributor /developer is too good to be true 🙂

    When I returned from holiday a website I link to was displaying errors because twitter was down so again, you are right if reliability is a concern for displaying content the primary source needs to be on your own servers. I think it’s only a matter of time that twitter will need additional investment for the server resources or be forced into selling to google, which is inevitably really.

  81. Great tutorial!

    I went the Openhook route.

    Even re-sized the bird and made him a little darker.

    Everything is installed Before Sidebar 2

    However, no tweets show up in my box =\

    Your thoughts on why this might be happening?

  82. Nicholas — looks like you haven’t put the javascript anywhere on your page: have a look at the first part of the post.

    Andrew — you’re right. They will need to continue to invest more in server resources. I hope that they can find the money and support to do that without selling to Google… the rumours of selling a little while ago were erroneous: they were just in talks to index Twitter content, which they weren’t doing before. Perhaps development into the API will strengthen Twitter as well so that errors don’t occur when they’re down. I’ve seen an API popup asking for a password on some sites when Twitter was spazzing.

  83. Hi Kristarella, I have just back tracked to see how I came to your ‘twitter feed solution’ and having re-read the thread and looked at the home page I can’t see a plugin link 🙂 Is there one or is it all within the tutorial?
    I plugged WP addon in a few weeks ago and it broke some of the layout which I notice has happened for this one too, in the side bar.
    Andrew

  84. I can’t believe I’ve read the tutorial and missed the title, sorry. I guess this would work for any site and not just a WP site?
    Andrew

  86. Great! Got it working and the feed updates just fine thank you!

    Was wondering how to give it a sidebar title like “Twittering,” for example, so it doesn’t look like just a bunch of tweets? I tried adding Twittering in with the sidebar hook “before_sidebar1” but that seemed to place the “Twittering” just above the widget but not essentially in the widget.

    Thx in advance! =)

  89. Designer — Not with this method. If you want to do something like that you could burn the two Twitter RSS feeds into one with Feedburner and use a WordPress RSS widget or the Feedburner HTML widget (I think it’s under “Publicize”) to show it.

  90. Thanks for this info, I tried and it worked for me. Now all I want is to style it a bit better 🙂

    I prefer to use a function and code details and not install plugins, try and keep plugins to a minimal if possible.

  92. Nice one, thanks for this, have been using Alex King’s Twitter Tools but I just find it too bulky and his mugshot irritating!

    Thanks for putting this out there,

    James

  93. Hi,

    Awesome! Now i have one stupid question:

    Would i be able to display two twitter user feeds in seperate widgets with this? I got mine working and if we can get @kilted_andrews too we could eliminate 1 more plugin from our site.

  94. Alex — You would have to download the blogger.js file from Twitter and change the element name that’s used by the script from twitter_update_list to twitter_update_list_2 in both the JS file and your HTML, you would then need to reference both the original and new blogger.js files, one for each username displayed.

  95. Kristarella — nice post, this worked out quite well. I was getting sick of the bloated plugins and obtrusive markup. This works wonderfully and it’s so simple!

  96. I’m using this code quite successfully, however one thing I wanted was a break between the tweets as I’m display 4 tweets.

    Any help you could give would be great.

    Thnx and just followed you on twitter

  99. Happy Birthday “Display your tweets without a plugin”!

    When I try to implement this it always misses out my latest tweet. So if I set count=10 It only shows 9, missing out the latest. If I set count=1 I get nothing.
    Has anyone else run in to this problem? / Have any ideas as to what’s going on here.

  100. Robert — Wow! You’re right. Can’t believe this post is a year old! Still as relevant as the day I wrote it too, that’s nice 😉

    Sorry, but I’ve never seen that issue before. That’s very odd. Have you tried it after adding more tweets on Twitter? Maybe there was something wrong with a particular tweet that wasn’t coming through the API properly or something.

  101. I’m working on a new blog and I’m trying to get the twitter image up. I am using hooks and took the html directly from twitter into my ‘feature box’ hook. Here is my html:

    <div id="twitter_div"><h2 class="sidebar-title">Twitter </h2><ul id="twitter_update_list"></ul><a href="http://twitter.com/reneewphoto&quot; id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a></div><script type="text/javascript" src="http://twitter.com/javascripts.....<script type="text/javascript" src="http://twitter.com/statuses/us.....pt&gt;

    How do I insert an image in this? I’ve read a lot of the other comments and tried to do it on my own with little success, any help would be awesome. Thanks

  102. Renee — Perhaps if I reformat the HTML it will be a bit easier to see what’s happening:

    <div id="twitter_div">
	<h2 class="sidebar-title">Twitter </h2>
	<ul id="twitter_update_list"></ul>
	<a href="http://twitter.com/reneewphoto" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/reneewphoto.json?callback=twitterCallback2&count=1"></script>

    You can add the image anywhere, except within <ul id="twitter_update_list"></ul>.

    Here is a version with the image inside the link and after “follow me on twitter”.

    <div id="twitter_div">
	<h2 class="sidebar-title">Twitter </h2>
	<ul id="twitter_update_list"></ul>
	<a href="http://twitter.com/reneewphoto" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter <img src="twitter.png" alt="" /></a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/reneewphoto.json?callback=twitterCallback2&count=1"></script>

  103. Having looked further in to my previous problem it seems to be RT that are not showing up. Has anyone else experienced this? If so any solutions?

  105. Wow, this was freakishly easy. I had this working within minutes of finding your page.

    Thanks for sharing, and making it easy.

  106. Hi, first off great tutorial! Thank you for your time and energy!

    Do you have a suggestion to space my two tweets on the home page? It actually did it once I implemented the code you have here. I woke up this morning to check the page and the two tweets are jammed together! You can see the “box background” I created for them to sit is larger on the bottom side, it looked great, now it’s a traffic jam!

    http://www.theartfulbean.com

    Any suggestions would be greatly appreciated!

    Stay well.

  107. Opps, sorry. Just found the solution up above.

    Seems I’m the type who looks at the pictures. 😀

    Thanks! Stay well.

  108. I´m currently working on a Twitter-Module for a very outdated joomla!-distribution and your “hard-coding”-tutorial was most helpful.
    Thank you very much for your crystal-clear explanations!

  110. Hello Kristarella,
    Thanks for this great tutorial.
    I’m trying to implement this solution in a project i’m developing, but if in Firefox everything works as expected, in IE and Chrome, i’m getting an javascript error with “http://twitter.com/javascripts/blogger.js”, and the latest tweet isn’t displaying at all.
    Do you have any solution for this?
    You can check the problem in the test site.
    Thanks in advance.

  112. Awesome!

    Thanks, Kristarella. I’ve been looking for days to find an easy way to do this. I finally settled on a plugin that was doing the job, but I wasn’t happy with the size (way too many options for my simple needs).

    This is perfect.

    Guess I should read your Thesis articles and stop looking at your pictures: That would have saved me a lot of time 😉

    Thanks to you and the others in the Thesis community, I’m almost done.

    Shane.

  113. Hi, I , too would like to effectively exclude @replies but am not sure how to go about it. I do not use Thesis, I used the html/javascript above. No replies have been made yet to my client’s Twitter yet, but I would like to avoid it as they will use Twitter on their website for news, updates, etc.

    Thanks in advance! Great coding!

    Happy Earth Day.
    Damon

  114. Damon — You said “no replies have been made to my client’s Twitter”. Will they be replying to other people via their Twitter account? Because those are the only ones that will show up, replies from them, not replies to them.

  115. Well, I’m new to Twitter but have used this code a few times for clients websites. IT gives them a quick 140 characters to converse with their visitors from the front page.

    So, are you saying that I don’t have to worry about their websites displaying any other tweeters replying to said client’s tweets? That is, when people start to follow them and whatnot.

    Thank for the quick reply Kris.
    Damon

  118. Thanks, Kristarella, I knew where to get this code but like you said, it is a bit of a bugger to find it on the Twitter side these days. Figured it would be much faster to search your excellent resource for all things Thesis to find it – and it was! Love your Thesis posts – you are brilliant!

  119. Kristarella, I am using your guide to display tweet on the sidebar. However, I want to know how to use a scroll feature and display multiple tweets. Any help from your side is much appreciated. Top to bottom scroll or left to right scroll.

    Kindly help

    Thanks
    Ahmed

  120. Ahmed — To change the number of tweets shown change the number at the end of the javascript where it says count=1. To make the section scrollable you need give ul#twitter_update_list a fixed width or height and use the CSS overflow property.

  121. Err…Kristie,

    I dont know codes. I managed to get through this, because of your above guide. Can you, if you don’t mind, tell me the exact code to paste? Please don’t mind.

    Thanks
    Ahmed

  123. This is what I use in custom_function –

    function footer_scripts() { ?>

    <?php }
    add_action('thesis_hook_after_html', 'footer_scripts');

  124. At the start of the post, when it talks about adding javascript it tells you to use:

    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=1"></script>

    This will be in your custom_functions.php file. Change the number of the bit in bold, towards the end, where it says count=1. I.e., if you change the 1 to 3 it will display three tweets.

    I’m not exactly sure what you want to do with scrolling, so no, I cannot give you the exact code for that. All I can do is point you towards the information that may be of use. You would use the CSS overflow property in the custom.css file. To learn more about CSS, try the Tizag CSS tutorial or perhaps this CSS Tricks screencast.

  125. Thanks Kristerella,

    With the scroll, I mean something like what you see in twitter.com homepage. See how the tweets are moving up in real time. Just want to do that for my personal tweets.

    Am I clear?

  126. Ahmed — That is more complicated. I don’t know how to do that off the top of my head. It might be better for you to make a widget from the Twitter site. If you check the option to “poll for new results” under the widget preferences it should check periodically for new tweets (I think).

  127. Another great tutorial. Is it possible to all people to interact with you on your site using something like this in conjunction with @anywhere?

  128. Wynne — This particular technique is kind of old and with several Twitter API updates they’ve got new things (including the widget I’m currently using in the sidebar, and @anywhere)… From what I can see most of Twitter APIs are most effectively implemented using Javascript, in which case you can definitely use something like this along with @anywhere, but probably not this exact script.

    This post was originally in response to all the WordPress plugins that were for Twitter because I like to avoid plugins where possible. It was based on the Twitter HTML widget (as opposed to the Flash widget,) although I didn’t say so in the post because I’d had it on my site for so long I’d forgotten where it cam from.
    I’ve since ditched it for the new Twitter profile widget which is also javascript; they seem to have done away with the flash one.

    I’m thinking of integrating @anywhere into this site, but haven’t had much of a chance to look at it yet. It looks pretty simple though. Greg Rickaby and Adam Baird both have tutorials on it.

  130. Pablo — Make sure you’ve followed the instructions carefully, because it’s always worked for me and lots of other people. I cannot help you without further information.

  131. Kristarella, hi, Can you please tell me how to display tweets from two different twitter users? Thanks in advance for your time!

  133. Hi Kristarella,

    Thanks for the tutorial. For some reason, I don’t get mine to function.
    What are the exact lines that I need to copy in custom.fuction and the ones that I need to add to custom.css?
    Also, I only need to change where it says user (in the code) with my actual Twitter user, right?
    I’m using Thesis 1.7
    thanks, Gustavo

  134. Gustavo — I don’t know how to say any more explicitly than I already have in the post as you which parts you should copy and paste. You don’t have to paste anything into custom_functions.php if you don’t want to. Perhaps it’s easiest to just put the two lines of javascript at the start of the post into the javascript box on the Thesis Site Options page in your dashboard and then the one line of HTML at the start of the HTML section in the post into a text widget in the sidebar.

  135. I don’t think this plays nice with 1.7 and WP 3. I’ve been over the code 25 times and it doesn’t work. I like to fancy myself somewhat of a competent coder, too.

  136. Nick — It does work with Thesis 1.7 and WP 3.0. I got it to work in half a minute by pasting the very first code block (the two lines of javascript) in the Stat and Tracking Scripts box in the Thesis Site Options, and then pasting the one line of HTML in a text widget in the sidebar. That is all that is required, the rest is just explaining the code, showing how to insert it with custom_functions.php and how to style it a bit.

    Note that the javascript must load after the HTML. I said in the tutorial that before the ending body tag is a good spot (that’s where the stat & tracking scripts box puts things, but the “other scripts” box on the Site Options page puts things in the head. It should also work if the scripts are immediately after the HTML, but I don’t think it works if the scripts are in the head.

  137. Nick — And just to double/triple check I copied and pasted the two functions from this post straight into custom_functions.php and it worked (after I replaced “username” with “kristarella” to get my own tweets).

  139. Greetings! I have used this code about a half dozen times, it’s great! For some reason when I loaded a clients site today, the tweet code was displaying a under the tweets. This was in Google Chrome, IE shows a []. Turned out there’s been problems deleting tweets in Twitter? It did take me 4 or 5 times to delete the first tweet for this client.

    The question mark would not go away, so I opened a brand new Twitter and uploaded the new code pointing to the new account, still have a ! Can you confirm this on your browser?

    http://www.laurahickmanfinearts.com

    Any help would be greatly appreciated!

    Stay well,
    Damon

  140. Here is my code, I don’t think there’s anything out of place.

    CSS:

    #twitter_update_list li {
    margin-bottom:2em;
    list-style: none;
    font-family:”Trebuchet MS”;
    text-align:left;
    font-size:12px;
    color: #333333;
    }

    HTML:

     

    Thanks!

  142. Yes, it’s me again. Sorry to post yet another entry! For some reason, the is gone! I am assuming that the was because I deleted a tweet and the code was wondering where the hell it was?

    I guess it needed that time to catch up.

    As always, thanks for reading this.
    Stay well.

  144. Thanks Kris I appreciate your response! Thanks for a great code!

    Stay well.

  145. Kristarella-

    Your help on this made a huge difference to me and a client a few months ago as we were getting a site squared away for launch (http://soldierstothesummit.org).

    Thanks–so much–for not only your expertise, but for your generosity in helping so many people out.

    And thanks, in advance, should you be able to address the following question (I looked thoroughly through the comment chain and hope I’m not re-asking):

    Do you know of any way, using the javascript method you describe in your post, to alter it so that, in addition to calling the organization’s twitter feed (which it’s currently doing) to also call a hashtag, such as #sshe (for “soldiers to the summit himalayan expedition”)?

  146. Thanks Kristarella, this works really well in my WP 2.9.2 setup!
    I noticed you didn’t answer the question in reply 97 about the break. I don’t know if that’s possible, but for those that are looking for a solution to this: You can easily add the #twitter_update_list li to your main CSS file and configure margin/padding there. Same result!

  152. Thanks so much for the code and thorough explanation. The twitter-provided widget was driving me CRAZY since it always seemed to randomly disappear from my blog. This code is EXACTLY what the doctor ordered.

  155. Hi Kristerella,

    Thanks for the tip. I liked the fact you don’t need another wordpress plugin to do this. I did it using the Genesis theme framework.

    Gerry

  156. Hi Kristerella,

    I’m developing a static website and have added the following code to the body:

     

    and the following code to the head:

    <script type="text/javascript" src="http://twitter.com/javascripts.....pt&gt;
    <script type="text/javascript" src="http://twitter.com/statuses/us.....pt&gt;

    But I keep receiving the error:

    Error: document.getElementById(“twitter_update_list”) is null
    Source File: http://twitter.com/javascripts/blogger.js
    Line: 12

    Have you seen this before?

    Many thanks in advance,

    Joe Czucha

  157. Sorted my own problem! I had it in the header, rather than the end of the file, so the element hadn’t been created yet 😀 Thanks anyway!

  159. It seems to be broken by re-tweets. I see one less tweet than requested but the RT is not shown. Observe my website and recent retweets. Any ideas?

  160. Toby — That does seem to be the case that it doesn’t appear when there’s a RT. I guess the old javascript doesn’t handle the new RT API. I don’t really know what to do about that since I didn’t write the original script. You could try the new Twitter Profile widget, or you could try using an RSS widget with your Twitter RSS feed if you want something a bit more plain text to manipulate with CSS.

  162. Very awesome. Just started playing with this. Can’t seem to retrieve more than about 200, though. When I tried anything from 2001 to 1000+ it only displayed the first 200.

  165. Hi Kristarella, thank for sharing. it’s nice tutorial. it work fine for me with Firefox or Chrome but it didn’t work with IE, it display this kind of error:

    Message: Unknown runtime error
    Line: 12
    Char: 3
    Code: 0
    URI: http://twitter.com/javascripts/blogger.js

    do you think it’s caused from my browser? or it also happen to all IE users?
    thanks

  166. Hi Kristerella,

    Thanks for the great code and tutorial.

    I was wondering, is there a way to display more than 1 twitter account on 1 webpage?

    Best,

    Jean Paul

  169. I noticed that Twitter have introduced an opt-in parameter include_rts=true which they say adds retweets to posts however blogger.js does not seem to do anything with it. Any ideas?

  170. Simon — I think Twitter have abandoned any updates to blogger.js and just leave it up so they don’t break people’s sites. The best ways to include new features are probably the new(ish) profile widgets, or @anywhere.

  171. How does it know to which div it should place the tweets?

    I did everything as you said. Script is in the footer, div named and nothing appears. Nothing. 🙁

  173. If you are having problems with the Password box popping up it’s because you’ve set your tweets to private!!! Disable and you’re ready to rock!!!

    Thanks for the awesome post K!

  174. When we were looking at adding a twitter feed to our site we wanted to be able to auto-retweet tweets @maraboustork from a list of approved people so they could add comments onto the home page directly from their mobiles. The problem was that retweets were not appearing when using our public timeline. We created the following plugin to get over the issue, it uses the google api to convert twitters .atom feed (which accepts the include_rts=true parameter to include retweets) into a JSON format that is compatible with Blogger.js.

    You can find information about this at:
    http://maraboustork.co.uk/inde.....your-site/

    Alternatively a non-plugin solution is also described at:

    http://maraboustork.co.uk/inde.....ter-blogs/

    Hope these help.

  175. Kristarella, how can I get links within my tweets to open in a new page?
    I would like to leave my site opened when they decide to click on my tweets.

    I really like your tutorial, thank you very much.

  176. Pepe — I think you’ll need javascript to target the links you want. In this case I would do something like (this would go at the bottom of your HTML and you’d need the jQuery library loaded too):

    jquery(function() {
	jQuery("#twitter_update_list a").click(function() {
		window.open(this.href);
		return false;
	});
});

  177. I have gone over all the comments and have done everything but I’m sure I missed something because I am still not getting my nice tweety bird icon on there. Please help…thanks!

  178. Michelle — Have you got a link that I can see? Had a look through your site, but couldn’t find any twitter display on there. I can’t really help without seeing the problem.

  181. Hi, is there any way we can ament the code, in order to display Tweets from private-protected accounts?

    I have a protected tweeter account and I would like to display my tweets in a protected area in my website.

    Thank you

  182. I’m just getting a small dot (top of my right sidebar) where the tweet should be. I’m hoping to use this solution, as I want to build a cartoon bubble above my profile pic after getting the tweet to work.. and just using a widget won’t allow for this customization.

    Great site by the way! Finding a lot of very useful information.

  184. Sure enough.. It wasn’t a wait issue earlier. I had refreshed multiple times.. but might have just been the api wasn’t working at that time. You are correct though.. working great now. Thanks so much!
    You have another subscriber. 🙂

  185. Thanks so much. Its really a great help to me. I dont like to use plugins to display twitter update because it may slow down page loading time. Now I will be able to do it without plugins.

  186. This post is helpful but do you know how to display the latest tweet from five different accounts rather than just one? I’ve been stuck with this for a while. Thank you.

  188. I’ve implemented your instructions, and all that shows up is the “follow me on twitter” link (where I put it, after sidebar2) — no updates. Any idea why?

  190. Yup, thanks – it seems to be working now. A question: how to I rig the code to show more than one tweet at a time?

  191. Rivka — Change the 1 in <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=1"></script> to the number of tweets you want.

  192. I had to change “add_action(‘thesis_hook_after_html’, ‘footer_scripts’);” to “add_action(‘wp_footer’, ‘footer_scripts’);” when working on the functions.php file of a child theme, WordPress Version 3.0.2.

    At first the tweet was not showing up, but then I realized (trial and error) that the hook was referencing thesis. Yeah, it took me a while to figure out.

    Thanks the quick and relatively simple of including a tweet without the heavy plugin shenanigans.

  193. Thanks so much for this tutorial.

    The only thing I have not been able to implement correctly is the placement of tweety. If possible, can you assist me with getting the image out of the box?

    TIA

  194. The /statuses/ links on the timestamps are no longer working (takes you to page does not exist on twitter). I checked some of the other bloggers who have posted here, and it’s the same all around. Did twitter change the links? How can we modify the code to get it working again??

  195. So strange, the statuses/ links are still working but the links generated on my tweets are not coming out correct. They are off from the actual status number. Why would that be all of a sudden?

  198. Hi,

    I’m working on a new version of my website and amongst other things, I’m loading my Tweets on there. Now, the problem I encountered was, all the links in the tweets opened in the same window which I didn’t like that much.

    Perhaps someone else allready posted a sollution, but the following seems to work for me…
    step 1: save the /blogger.js file locally
    step 2: add a target=_blank to every a href piece you find.
    step 3: enjoy

    Personally I’m not a target fan, so in my case I used a rel=external piece and a little javascript that loops through all the a href’s on the page. Every href that contains the rel, automatically opens in a new window.

    Owell, just putting my 2 cents in. Maybe it will help someone 🙂

  199. Wendy — Did you get that styling sorted out?

    Chrissy — Wow! That is weird. Maybe they’ve changed something in the API and not updated the javascript that this is using. The only thing I think I can suggest for that is trying to ask Twitter, if they have a help section, or moving to the new(ish) @anywhere API. Good tutorial on Art of Blog.

    Jeff — Thanks for the info Jeff! I’m sure it’ll help someone 😉

  202. I am having trouble getting the image to show. I have pretty much everything else in there done but I uploaded an image file to custom/images and its just not showing. I am not a coder so I don’t know what I am doing incorrectly. Please help. I looked thru the other posts to see if I could find something referring to this issue but nothing.
    Also, is there any way to put an image at the top and bottom of the manually created Twitter widget? Like a “bird” at the top left and a “follow me” image at the bottom right? I was using a skin that had the twitter functionality included but it was way too glitchy to use so I have decided to start from scratch.
    I love your blog by the way, there are so many helpful tips here and at this point I am not sure what I would do without your content. You are very appreciated Kris!

  205. Chriss — The CSS for the first would be something like:

    .custom #twitter_div {padding-top:100px; background:url(images/bird.jpg) left top no-repeat;}

    If you want the image above the twitter box you may need to add another element, such as <h3 class="twitter">Twitter</h3> above the twitter_div in the functions file and then use,

    .custom h3.twitter {height:100px; width:100%; text-indent:-999px; background:url(images/bird.jpg) left top no-repeat;}

    Then for the button, paste the following after </ul> and replace the capitalised parts:

    <a href="YOUR_TWITTER_URL"><img src="http://thecircleoutsidethebox.com/wp/wp-content/themes/thesis_18/custom/images/followme.jpg" alt="Follow Me" /></a>

  207. Hi!
    Thanks for the wonderful coding, I love it! One thing though: my website and blog are in Dutch, however, the twitter timestamp is in English by default. Is there any way to translate or remove the timestamp?
    Thank!
    Marjolein

  208. Hi there again,
    Ihave been using this code for several months and added a background image with css yesterday. It was working perfectly (even though I had a question about the time stamp, see previous entry), but yesterday evening, it was ’empty’. I have tried replacing the codes and a different user name, but my tweets don’t appear no more. Do you have a clue what could be wrong?

    The code in my side bar widget is >

     

    The tweet stream should appear in the upper left (girl with text balloon) of this website http://www.marjoleinpijnappels.com/blog

    Thank you!

  209. terribly sorry to clutter your comment line.. I discovered that it’s the retweets that aren’t showing, it still works like a charm for regular tweets. Sorry! If you want, you can remove the last comment 🙂

  210. Marjolein — Glad you found why it wasn’t working. This is a rather old technique, so the new RT system may not work with it. I can’t do anything about that 🙁

    Anyway, regarding language, you cna change that by downloading your own copy of blogger.js and hosting it on your own site. Then you can edit the function at the end of the file that converts the timestamp into relative time. You can add your own values for the wording of the timestamp.

  212. Mre — You can hide it with CSS:

    #twitter_div li a {display:none;}
#twitter_div li span a {display:inline;}

    Or you can do a similar thing to what I said in my previous comment to Marjolein: you can download your own copy of blogger.js and edit it.

  213. Thanks so much for this!

    I’d like the timestamp to not be a hyperlink back to twitter, just plain text. Any tips on how I can do that? Add something to the CSS and/or the JS?

  214. Ted — Same answer as my previous two responses: those kind of changes are easiest done by downloading the blogger.js file and editing it, then hosting it yourself rather than linking to the one hosted by twitter. Change line 9 of the file from

    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></li>');

    to

    statusHTML.push('<li><span>'+status+'</span> '+relative_time(twitters[i].created_at)+'</li>');

  215. Fantastic, THANKS! 😀

    I have made a customized, local copy of the bloggers.js file. The only problem I have remaining is that the tweet does not show up in Internet Explorer. When I run it locally I get the error:

    “To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options.”

    When I throw it on an external server I don’t get the error but the tweet doesn’t show. Any advice? I hate IE. 😛

  216. Actually my bad, I used the tag SMALL to make the * days ago appear in a smaller font but Internet Explorer doesn’t seem to support it.

  217. Ted — Ah, ok. I think the date already had a span around it making the font size smaller, you could just change the number in that span style to be even smaller, rather than using the small tag. Also I think this script is not really supported by Twitter anymore and RTs might not always show up due to the new API. I don’t know if that results in a blank space, or if it just shows the previous tweet.

  218. Great post. I was just doing some R&D and switching from using a plugin to using Twitter’s own API when I stumbled upon your post. Realized I was doing the right thing! 🙂

  219. This was very helpful and useful… better than the DW widget. I do have one odd issue:

    I am using this here:

    http://www.perchpub.com/

    Every now and then the banner will be blank. I have to change the count t=2 (or even 3) to show the tween. Is this due to a reply or some other issue? When I put the count to 2, sometimes only one shows, sometimes 2.

    Suggestiions?

  220. Actually, although the script was useful, it did not display retweets (or tweets from other sources). These tweets appeared on the timeline, BUT would not appear with this script… that’s fine.

    I just used the Tweet Widget builder, which works fine… although the result is not as configurable as this

  221. Chuck — Yes, the RT thing is disappointing. The script is no longer officially supported by Twitter and doesn’t work with their new RT API, so the next thing to try would be the Profile Widgets that you can get on the Twitter site (I think it’s under Goodies at the bottom of the page, or linked in other comments on this post).

  222. @Marjolein — thank you for posting here! Even though I followed the tutorial, it still wasn’t working for me . . . I zipped over to your site and made a few changes in code placement, and bam! I have Tweets =D =D