How To Create A Dynamic “Tweet This” Button With JavaScript

Yesterday I posted some code on how to create dynamic Tweet This buttons with PHP, today I’m going to share a short code snippet you can really drag and drop into your editor to create a “Tweet This” button on your website.

You just need to copy and paste this code and adjust the src attribute of the image to point to your button:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
var twtTitle  = document.title;
var twtUrl    = location.href;
var maxLength = 140 - (twtUrl.length + 1);
if (twtTitle.length > maxLength) {
twtTitle = twtTitle.substr(0, (maxLength - 3))+'...';
}
var twtLink = 'http://twitter.com/home?status='+encodeURIComponent(twtTitle + ' ' + twtUrl);
document.write('<a href="'+twtLink+'" target="_blank"'+'><img src="tweetthis.gif"  border="0" alt="Tweet This!" /'+'><'+'/a>');
</script>

tweetthis-15

Be Sociable, Share!
May 22nd, 2009 at 1:35 am

Thanks Sascha, using your php and JS snippets on http://toonsays.com. Saved me some work.

July 15th, 2009 at 2:47 pm

This is a great resource, thanks for making it available. We’re using it on our articles pages so that they can be more easily tweeted.

Do you have any plans to add a URL shortening service, like bit.ly or TinyURL, to the script?

July 18th, 2009 at 2:43 pm

Hi! I tried copying this into my blog layout, but I keep getting an error message that reads:

XML error message: The document type declaration for root element type “html” must end with ‘>’.

I don’t know what the problem is. Can you help? Thanks much! ~Georgia

admin
August 10th, 2009 at 4:01 pm

Sorry, seems to be a problem of your blog or the way you added this to your blog. I can’t help because I’ve never used blogspot.com myself.

admin
August 10th, 2009 at 4:03 pm

Thanks. You can’t use a URL shortening service with JavaScript – only the PHP version would allow this though this is not currently planned.
The problem is that you don’t want to access the shortening service on every page load so you’d need to generate the short URL one time and then store it in your local database to serve it to the end user on every page request.

mFavourite
September 27th, 2009 at 6:36 pm

A brilliant website tweet-this button. We are now using your javascript version and is spot on.
We like the fact there is no need to use any third party server/web company; which means the tweet-this is direct and fast. We are this will help our online presence even more.

Great job
Manager
mFavourite.co.uk

January 11th, 2010 at 10:53 am

A seriously great bit of code, thankyou.

February 2nd, 2010 at 3:32 pm

I wrote a blog post about how to add a “tweet this” button for BlogEngine using ASP.NET: http://www.codecapers.com/post/Adding-a-Tweet-This-Button-To-Your-Blog-Posts.aspx

The code I wrote does auto bit.ly shortening and allows for extra tags and metadata at the end of the status. The concept is generic enough where you can reuse the concept for almost anything. Enjoy!

March 21st, 2010 at 1:53 am

Great script. I spent hours looking for source like this. Thanks a lot fo using your script at milsztof.pl

David Olsan
May 1st, 2010 at 5:40 pm

Hallo, thanks for the tutorial, I am sending html newsletters and we need to add a tweet this button, when the user will click on it he would tweet the on line version of the newsletter. Do you have any idea how to code this?

June 2nd, 2010 at 10:15 am

this worked well for me.
Thanks for this script.

June 18th, 2010 at 8:54 pm

Thanks for this concise script. I’ve been trying to modify this to open a new smaller window to be less obtrusive to visitors, can someone point me in the right direction. My attempts at javascript have futile.

ben
August 8th, 2010 at 11:46 am

any way to use this with a custom url? ive been searching and tried all the big services, to find none have support for url#pagecontent.. they all strip out the #

August 11th, 2010 at 3:26 pm

thanks for this Sascha

we’re creating a black and white version of the official Twitter button images and code right now for our site, so shout if you’d like the GFX to post here for others to use – free of course

Comments are closed.

Sascha Kimmel - Living The Web Experience Since 1996 by tricosmedia