How To Add ShareThis Buttons for Email, Twitter and Facebook in WordPress

ShareThis just made it even easier to add social networking buttons on your website or blog!

Monday night, ShareThis released new functionality to their ShareThis button, one of the first social media buttons available to bloggers and website owners. By adding a snippet of code, ShareThis makes it easy for your visitors to email, tweet and share your content. You also get traffic information.

I just updated my ShareThis button which now supports multiple icons so you can individually list email, Facebook, Twitter, Digg and ShareThis as seperate icons! Before, it was sort of confusing and you had to receive a secret email from ShareThis.

Not anymore! ShareThis is rolling out the code tonight to all accounts!

And I’m going to show you how to get it setup in this tutorial.

http://sharethis.com
Click, “Get The Button”

Choose ShareThis Breakout buttons aka “Mulitple Icons”

Select, “Multiple icons”

Select your platform

Select the location you will be embedding the ShareThis button
In my case, I will select, “WordPress”

Generate the code

Click, “Get The Code”

Grab the code

You will see a screen like this.
The top code goes into your header.php file in your WordPress theme between the <head> and </head>
The bottom code goes into your single.php and/or page.php WordPress files based on where you want the buttons to show up.

I like my buttons at the top so let’s see how this works!

Edit Your Files

I am using Filezilla to access my WordPress files via FTP.

WARNING ONE
- Backup your files before you start editing your WordPress theme. It will save you a lot of headaches later on.

WARNING TWO
- If you use the built in “Editor” in WordPress and make a mistake, there is no undo so I highly encourage you to use a text editor like Edit Pad Lite (PC) or TextWrangler (Mac) along with an FTP client when making changes to your WordPress theme.

Get to your WordPress theme

To get to your WordPress them, you want to drill down. This is shown on a host that supports cPanel
Go to: public_html > wp-content > themes
and select your theme

Inside you will find the header.php and single.php files
Your file names may vary. Check your theme documentation

WordPress theme directory

This is a classic example of a WordPress theme directory.
Once inside, we can see that many of the common files to create a WordPress theme are here including:
page.php
single.php
header.php
style.css
search.php
archive.php
index.php
footer.php
sidebar.php
functions.php
404.php

I have several additional files for page templates I’ve created (I love to use Google Docs to embed forms in my contact pages!) plus some additional templates that came with the theme.

The only one’s we’re touching today are header.php, single.php and page.php

Open header.php with text editor

Here, I’ve right-clicked on the header.php file within Filezilla. Since I’ve already associated it with my text editor (in this case, Edit Pad Pro since I’m on a Windows 7 box and purchased the Pro version), the file will now launch for me.

View the header.php file

Code will go in the blank area before </head>

Code inserted!

Save the file

Upload via FTP

Open up single.php

Here’s single.php in Edit Pad Pro

“Reading the tea leaves” – single.php code

Same code but on the front end of WordPress

Code inserted!

Time to save single.php

Ta Da! There are our buttons!

Steve Ragan March 2, 2010

Great post, I love the walk through.
Sharing Buttons Are The New Word of Mouth | But You're A Girl March 2, 2010

[...] created a tutorial on how to add the new “multi icons” into your WordPress blog over at [...]
robate159 March 13, 2010

Online Training Program

Whether you are thinking about getting your bachelor’s, masters or doctorate degree, online education can be a great option for anyone with a busy life. When you are a parent or a busy career person, it can be hard to go back to school. Maybe you feel that too much time has passed since you were last in college or high school, and you would feel uncomfortable in a formal education setting……………

http://www.sangambayard-c-m.com
Joanne May 27, 2010

how do I add these buttons to my email signature… I'm using Outlook?
Joanne May 27, 2010

how do I add these buttons to my email signature… I'm using Outlook?

Sorry, the comment form is closed at this time.