Share Your Site With ShareThis

by webmonkey - 8 September 2008

Share ThisThe following article was originally published by Webmonkey.com under a Creative Commons License.

Who can keep track of the ever-expanding list of bookmarking sites, social aggregators and micro-blogging services? Not me, but ShareThis can.

It’s a little widget that you can add to any page to help your users share your content. Webmonkey uses it at the bottom of just about every page, including this one.
In this tutorial, we’ll go over the basics of using ShareThis, then dig a little deeper. By the end, you’ll be able to have your widget look however you want and emulate some commonly desired features, like the ability to e-mailing your articles a friend.

The simple ShareThis button

Before we can get fancy, we have to start simple.

Go to ShareThis and use their standard website customizing tool. You’ll be asked to sign up for a ShareThis account, but it’s optional. Registering gets you some fancy usage stats. At the very least, you’ll need to get a publisher ID, which you can get even without registering. You’ll see your publisher ID mixed in with the code produced by the above tool.

Here’s an example of what the ShareThis code looks like:

<script type=”text/javascript”
src=”http://w.sharethis.com/widget/?tabs=web%2Cpost%2Cemail&charset=utf-8
&style=default&publisher=”’Publisher_ID_Here”'”>
</script>

To see what the standard ShareThis button looks like, paste the code into a web page. You can include it in a template to use it on every page of your site, assuming you have a content management system of some sort. Commonly people put their ShareThis code directly before or after the main content of a page. It makes the most sense to put it right at the end of the main content.

When you load a page with the ShareThis code, it should look something like this:

Image:ShareThisImg1-1.png
Click the ShareThis button and you’ll see the full widget:

Image:ShareThisImg1-2.png

Change the tabs

There are a few options available for even the basic ShareThis widget. By default, you get three tabs across the top: web, post, and e-mail. If you only want to show one or two of those, you can do it with just a few keystrokes.

First, let’s take a look at the code and see what it does out of the box. We are importing some JavaScript from ShareThis. According to the code snippet referenced above, we can see the JavaScript file lives at w.sharethis.com/widget/. All the bits after the question mark in that URL are pieces of information (programmers call them “arguments” and they’re willing to fight for that term) defining how we want the widget to act.

The very first argument holds the tabs we want:

tabs=web%2Cpost%2Cemail

That %2C stuff is URL code for a comma. Essentially, we have a list of tabs. To remove a tab, just remove its reference from the list. If we only want web and email tabs, here’s how the tabs argument would look:

tabs=web%2Cemail

I removed the redundant %2C because it makes no sense to have two commas in a row.

Save your page and reload. Now when you click the ShareThis button, you’ll only see the two tabs we passed to the widget, like so:

Image:ShareThisImg2-1.png

Change the sites/services

Now that you’re comfortable editing the ShareThis code, we’ll try changing the services that the widget makes available to users. By default, it shows the 10 most popular sharing services (Digg, Reddit, Facebook, etc.).

For most people, this is what they want. But you’re not most people. You are looking for more control. Default won’t do.

The first thing we need to do is locate the services argument in the ShareThis code. Found it yet?

OK, trick question. It doesn’t exist. We need to add it. Let’s say we only want to include Reddit and Digg. We need to add the following code right after the tabs argument (in other words, right after “email”):

&services=reddit%2Cdigg

The & is used to put an ampersand between arguments. It tells ShareThis where the tabs stop and the services begin.

Here’s the full code for only showing Reddit and Digg:

<script type=”text/javascript”
src=”http://w.sharethis.com/widget/?tabs=web%2Cemail&services=reddit%2Cdigg
&charset=utf-8&style=default&publisher=”’Publisher_ID_Here”'”>
</script>

And here’s what it looks like when we limit the services:

Image:ShareThisImg3-1.png

As you’ve seen, changing the tabs and services in your ShareThis widget is simple. In fact, you could have used the form provided to make these changes without touching any code. The rest of this tutorial is a bit more complicated. Luckily, you have some experience editing the ShareThis code now. You’ll do fine.

But now, bring on the complexity!

Add multiple widgets to one page

So far we have used a single ShareThis button. To do so, we just placed the code they gave us into the spot where we wanted it to show up. The button is initialized and added to the page at the same spot. In order to use more than one button, we need to initialize at the top, then write a separate line of JavaScript for each spot we want a button to show up.

So, why would you want to share multiple items on a page? How about a blog archive? How about a photo gallery? Anywhere that you are showing multiple somethings you want to be shareable.

The initialization code, lucky us, is the same snippet we’ve been using. The difference is that it goes way up in the <head> section of our HTML:

<html>
<head>
<script type=”text/javascript”
src=”http://w.sharethis.com/widget/?tabs=web%2Cpost%2Cemail&charset=utf-8
&style=default&publisher=”’Publisher_ID_Here”'”>
</script>
</head>

Now, to add ShareThis buttons to the page, you’ll need to add one of these for each item:

<script language=”javascript” type=”text/javascript”>
var thisobj = SHARETHIS.addEntry({
title:’This title shows up when I share’, url:’http://full_url.to/permalink.html’
}, {button:true});
</script>

Let’s walk through the pieces that make up the ShareThis button:

  • title is what will be the subject of an e-mail share, the description in delicious, etc.
  • url is a link directly to the item you are sharing. Since you’re sharing more than one item on the current page, it likely won’t be the URL of this page, but instead a direct permalink to a different URL (for example: a blog post).
  • button:true tells ShareThis that you still want to use their button. Later we’ll see a couple different ways to change the way the button looks.

Now you’ve created a basic ShareThis button, plus added multiple versions of it to a page. Let’s see how much more we can make it your own.

Change the ShareThis icon and text

By default, ShareThis buttons have the Share Icon next to text that says (gasp!) “ShareThis.” Well, you may want to change all that, and you can. There are a few ways to do it. In this section we’ll use the method that requires the least code.


To change the text portion of the ShareThis button, we need to add an argument to the initialization code. This is much like above when we changed the tabs. So, locate a spot after an &and add buttonText=Monkeys+Share+Stuff&amp;

Now our initialization code looks something like this:

<script type=”text/javascript”
src=”http://w.sharethis.com/widget/?tabs=web%2Cpost%2Cemail
&buttonText=Monkeys+Share+Stuff&charset=utf-8&style=default
&publisher=”’Publisher_ID_Here”'”>
</script>

And the ShareThis button is sporting new text:

Image:ShareThisImg4-1.png

As much as we love the Share Icon, we’d really like something that goes better with the text. We’d like to use the Webmonkey favicon, the thing that shows up in the location bar when you’re on our site.

To change the ShareThis icon, we’ll need to throw in some CSS to overwrite the default. Plop this code into your stylesheet, or between <style> tags in the <head> of your document.

.stico_default
{
background: transparent url(http://www.webmonkey.com/favicon.ico)
no-repeat scroll 0px 0px !important;
}

Now reload your page and your ShareThis buttons will look a little more ‘Monkey:

Image:ShareThisImg4-2.png

Pretty cool, right? Let’s put this knowledge together with some stuff we did earlier and create an E-mail to Friend service.

ShareThis for e-mail to friend

Ah, the old web standby: the E-mail to Friend tool. To create this with ShareThis, we need to remove the post and social tabs, change the text, and change the icon to be something like a cute little envelope.

You’re probably thinking we’ve already learned how to do those things. Yep. We’re putting it all together now. If you’d like to see how, follow along.

In the <head> section of your page, initialize ShareThis:

<script type=”text/javascript”
src=”http://w.sharethis.com/widget/?tabs=email&charset=utf-8
&style=default&publisher=”’Publisher_ID_Here”'”>
</script>

Notice the tabs argument only has one item: “email”. That’s what we want!

We also need to make sure the text says “Email to a Friend,” so we need to change the buttonText, like so:

<script type=”text/javascript” src=”http://w.sharethis.com/widget/?tabs=email&buttonText=Email+to+a+Friend
&charset=utf-8&style=default&publisher=”’Publisher_ID_Here”'”></script>

Then we need to change the CSS entry to point to an envelope icon. Try this:

.stico_default
{
background: transparent url(http://www.webmonkey.com/mediawiki/images/Email_envelope.gif) no-repeat scroll 0px 0px !important;
}

Finally, go to the spot in your page where you want the button and paste the ShareThis button code:

<script language=”javascript” type=”text/javascript”>
var thisobj = SHARETHIS.addEntry({
title:’This title shows up when I share’, url:’http://full_url.to/permalink.html’
}, {button:true});
</script>

And just like that, your users will be e-mailing their friends from your website:

Image:ShareThisImg5-1.png

Make your own ShareThis button from scratch

So far whenever we’ve changed how the ShareThis button looks, it has always maintained the same basic template: icon, followed by some linked text. What if you wanted to have it look completely different? Yeah, the API can do that, too.

To create our custom button from scratch, we’ll need to write all the HTML to produce it, including the hyperlink that is clicked to call the ShareThis code. I put together a garish-but-different image that I want to use as my button. Use the code below to make that giant share icon into a ShareThis button:

<script language=”javascript” type=”text/javascript”>
var thisobj = SHARETHIS.addEntry({
title:’This title shows up when I share’, url:’http://full_url.to/permalink.html’,
summary:’Here is a little more about the thingy I am sharing.’
}, {button:false});
document.write(‘<div id=”mysharebutton”><a href=”javascript:void(0);”><
img src=”http://howto.wired.com/mediawiki/images/Click2share.png” border=”0″
/></a></div>’);
thisobj.attachButton(document.getElementById(“mysharebutton”));
</script>

There are only a few things to note here. One, the SHRETHIS.addEntry line is only minimally changed. Instead of button:true, it now says buton:false. That tells ShareThis not to output their default button. It lets them know we’re rolling our own.

Next, notice that we output HTML from JavaScript. That HTML creates our own ShareThis button, complete with hyperlink. The href on that hyperlink goes nowhere. That’s because we want ShareThis to take over when the button is clicked and still show its overlay menu.

How does ShareThis know to react when our new button is clicked? We have to tell it using the attachButton function. We tell ShareThis the id of our button: “mysharebutton” in this case, as declared in the div that surrounds everything.

Save your page, load it up, and give that button a click.

Does it bug anyone else that the box opens up below the button? I’d like it to be to the right of the button and lined up with the top. ShareThis lets you do this by setting the offsetLeft and offsetTop values. These are counted from the bottom right of the button. Larger numbers move the box to the right and down, and is counted in pixels.

Try this out:

<script language=”javascript” type=”text/javascript”>
var thisobj = SHARETHIS.addEntry({
title:’This title shows up when I share’, url:’http://full_url.to/permalink.html’,
summary:’Here is a little more about the thingy I am sharing.’
}, {button:false, offsetLeft: 10, offsetTop: -128});
document.write(‘<div id=”mysharebutton”><a href=”javascript:void(0);”><img
src=”http://howto.wired.com/mediawiki/images/Click2share.png” border=”0″ /></a></div>’);
thisobj.attachButton(document.getElementById(“mysharebutton”));
</script>

I set the offsetLeft to be 10, just to give a little space between the box and the button. Then I set offsetTop to be -128. What? Negative? By using a negative number, the box is able to move up instead of down. I chose -128 because our button is 128 pixels high.

Suggested reading

So now you know a whole bunch about ShareThis. Hopefully you have plenty of ideas about how you could make it your own.

ShareThis has some documentation, which is in the form of frequently asked questions, making it easy to read. Check out their developer FAQ, as well as the publisher FAQ.

Happy Sharing!

Leave a Reply