Add ShareThis buttons to Tumblr

Tags
tumblr, blogging, social
Posted
Sat 14 Feb, 2009
Comments
32

Tumblr can be extended heavily by editing the templates and by adding services through JavaScript. I just wrote this ShareThis JavaScript that will automatically add ShareThis buttons to your Tumblr posts. This will:

  • Add Digg/Delicious/etc buttons in a menu so people can easily Digg your articles
  • Add the correct link and title to pages on your Tumblr index page, as well as on the article pages themselves

Here’s the code:

To use it follow these steps:

  • Sign up to ShareThis
  • Create JavaScript for “Other Blog” (ShareThis JS)
  • Login to Tumblr, and go to Customize, Theme
  • Get my JavaScript: tumblr_sharethis.js
  • Replace the first script line with your ShareThis JavaScript (ShareThis JS)
  • Paste your edited tumblr_sharethis.js into the header of your Tumblr Template
  • Change the template where it says {Block:regular} to include <div class=”ShareThis”></div> after {Body}

I’ve been quite explicit with these instructions but it’s actually very easy to do. Just remember that you need to edit my JavaScript with your ShareThis code, because ShareThis uses your publisher ID for its API.

You can see this JavaScript in use on QuiteUseful.


Faiyaz Jafri

Mar 14

Hi, thanks for the Sharethis Tumblr add on, however, changing the template to include &lt;div class="ShareThis"&gt;&lt;/div&gt; doesn't seem to work, do I copy and paste is exactly like that after {Body}?

Thanks
Faiyaz

Alex

Mar 14

This is how it looks for me:

http://dl.getdropbox.com/u/221414/blogs/sharethis.png

It's currently running on: http://quiteuseful.co.uk/

Peter

Mar 25

What if your code doesn't have {Block:regular} in it?

alex

Mar 25

You should be able to put it after any of the blocks on Tumblr if it can match the permalink.

You could probably use this with other blog software as well, you'd have to figure out how to strip the links (element.previous('h2').down('a').href) and where to place it in the template.

Rick Wrightson

Apr 21

I understand everything EXCEPT
"Replace the first script line with your ShareThis JavaScript (ShareThis JS)"

alex

Apr 21

That refers to the JavaScript ShareThis gives you.

The first line in my code is a script tag, with a src set to w.sharethis.com. This URL has a publisher variable set that ShareThis give you (you can see in my code that it's set to "lolz" as an example).

Rick Wrightson

Apr 24

Alex: thanks.

so, the:
Change the template where it says {Block:regular} to include &lt;div class="ShareThis"&gt;&lt;/div&gt; after {Body}

is a call to Share This javascript in the header and will be placed in each post.
Right?

Also, I can use the ">" instead of the "&gt;" in the code?

Rick Wrightson

Apr 24

Alex:
I just tried it (again) and it doesn't pull it up.
I have the script inside the header.
I have <div class="ShareThis"></div> after {Body}

I saved the changes. I viewed my source via my browser and it is there.

Can you view my source and see if I've done it properly?
http://rickwrightson.tumblr.com

alex

Apr 24

Rick,

You should put the <div class="ShareThis"></div> part inside each block you want ShareThis to appear on. Here's what it looks like for me:

http://dl.getdropbox.com/u/221414/blogs/sharethis-rick.png

There's blocks for regular posts and photos, so you'll need to add them to the photo block as well.

Next, the code I pasted will only work for regular posts. You'll need to edit it slightly, try using this code instead: http://gist.github.com/101170

The difference with that code is it uses the 'date' divs to figure out the link for ShareThis to use.

Hopefully ShareThis will just add Tumblr integration to make this a lot easier! :)

Rick Wrightson

Apr 24

Alex: Just to make sure that I'm following you (I'm CEO of a software company BUT not a geek ;-)

The code you have above will only work in {block:regular} and {block:photo} sections? Or only {block:regular} and I must edit for use with {block:photo}?

I hope that you don't mind bearing with my seemingly simple questions (I could ask one of the guys at the office - who are software engineers - but I'm trying to figure this out myself).
;-))

Rick Wrightson

Apr 24

Alex: This is what I used and it appears to be working (I first only used it in the regular block but only had photo posts - so when I did a text post, the regular worked.) I added it to the photo block and it appeared on one of the two photo's posted (I'll have to figure out why not on the first one).

Thanks for your kind help to a novice coder (but deep in the software industry) ;-)

Rick Wrightson

Apr 24

opps - forgot to paste the code I used:
{block:Regular}
<div class="regular">
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
{Body}
<div class="ShareThis">
</div>
{/block:Regular}

{block:Photo}
<div class="photo">
{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
<div class="ShareThis">
</div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}

Rick Wrightson

Apr 24

Alex:
I've experimented placing the <div class="ShareThis"> in all of the different line options of {block:photo} and while it displays ok on the page in each different location, it doesn't activate. Any ideas in which line it belongs?

{block:Photo}
<div class="photo">
<div class="ShareThis"></div>
{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}

alex

Apr 25

Rick,

I think you've almost got it, it's probably just my JavaScript that's not quite robust enough. I've updated it so it should work better:

http://gist.github.com/101170

I tried running it on your site inside Firefox with Firebug, and it seems to work for that last image.

Abraham

Apr 25

Hi Alex

Thank you for posting this. I have it up and running, but the share this link only comes up for my most recent post.

Any idea where I went astray?

Thanks
Abe

Abraham

Apr 25

btw, site is fatherabraham.tumblr.com

alex

Apr 25

I switched Firebug on for your site and could see there's an error for one of the post types. I've put an exception handler in the code which should make it a little bit more reliable:

http://gist.github.com/101170

Rick Wrightson

Apr 25

Alex:
Yes, that solved the problem. Thanks much for you help.

I note that the font for the text "Share This" is larger in the photo post than in the regular post. I assume that this is because the fonts for each of these are defined differently in the CSS. Different issue but just an observation. I'm happy that the script works.

Thanks again.

Anna

May 4

Hi Alex,

I got the ShareThis icon in the right place, but can't get it to do anything when you click on it - I'm guessing I'm missing something small. Help?
http://douchemail.com

-Anna

Alex

May 5

Anna,

Did you switch to "Add to Any" instead? Does it seem to integrate better?

Jordy

Aug 11

Hey Alex,

I have the exact same problem as Anna - I see the icon, but nothing happens when you click.

Current source is up at http://www.jordym.com.

Any ideas?

Thanks,

Jordy

alex

Aug 11

I'm not sure why it's not working, but I noticed your ShareThis JavaScript include is different to mine. It has a part that says "tabs=web" which mine doesn't have.

Cheers,

Alex

Sandeep

Aug 12

Is block:regular and block:text same?

Sandeep

Aug 12

or block:post

Sandeep

Aug 12

Yeah its working without that &lt;div class="ShareThis"&gt;&lt;/div&gt; on my template is that ok....

alex

Aug 14

It should work without that, I accidentally formatted the post wrong (I've edited it so you can read it now)

kris

Nov 11

hi there
i'm very close - have the button showing but no joy on clicking. any ideas?
cheers
kris

alex

Nov 11

Are there any errors in Firebug/Webkit Inspector?

kris

Nov 11

hey alex. i'm looking in firebug and i think its saying "failed to load source". i'm very familiar with CSS stuff but not so much javascript. i'm using the code from http://gist.github.com/101170

the site is http://tastychops.tv

alex

Nov 11

I've looked at it but I don't understand why the click event isn't firing. The script is displaying the ShareThis button so it appears to be working.

If this helps -- my ShareThis settings were all set to the defaults

kris

Nov 11

thanks alex - yeah - funny that it displays but doesn't open the window. thanks for your help anyways.

kris

Nov 11

just fyi - i'm just checking out addthis and i got that working straight away - the tumblr integration works straight out of the box. thansk heaps for your time alex. much appreciated.

Security Code