How to Add the Social Media to Your WordPress Blog

This post walks you through how to add Social Media functionality to your WordPress blog using the fantastic plugin Sharethis.

Part One: Get the Code

Go to Sharethis.  Click on Get the Button:

get the button

ShareThings has done a great job of making an easy interface. Just follow the wizard steps:

First, you can customize Your Widget by choosing the buttons style:

choosebutton

Then, pick your header text and colors:

chooseheader

Finally, select the social media services that you want to include:

chooseservices

When you make changes, the preview to the right updates in real time:

preview

Once you’re happy with your widget, choose WordPress as your service:

chooseservice

Then, click Get ShareThis code:

getcode

*You may need to create an account to access your code.

Now you should be on Step 3 of the ShareThis wizard, “Install.”

Part Two: Putting the ShareThis code into WordPress

This section will guide you through putting the ShareThis code into WordPress. If you’ve modified the widget at all (buttons, colors, etc.), you will need to add code to your header and then some code to your footer.

To access where you need to insert this code, log into your admin account on your WordPress blog. Click on the Appearance tab, then select “Editor.”

appearance

This will take you to a page called Edit Themes. Now look at the menu on the right. You’ll see the option for “Header (header.php).” Clicking on this will open the editing window to your header code for your WordPress site.

themefiles

Before you take another step, save your header code so you can have a backup in case this breaks something else on your site and you need to restore your original code. For example, when I installed this, the style overwrote my site’s body text style, which is fixable, but annoying.

Once you have a backup file (I would just paste the original code into a text editor program), paste the header code here, but be sure to place the code between <head> and </head>, or it won’t work. Then, click Update File.

Now for the second piece. In the menu on the right, you also have the option to change the Main Index Template and the Single Post. First, click on the Main Index Template. Be sure to back this up, too. Add the body code provided by ShareThis, between <body> and </body>, wherever you would like the widget to appear on your page.

(Hint – I looked for the word “Comments” to figure out where to place this code, because I knew that my comments were under each post on my main index page. Place the ShareThis code above the code including “Comments.” Click update file.

You may need to try a couple locations, checking your main index page to see if the widget is where you want it. I also added two line breaks <br><br> after the widget code to put some space under the widget.

When you are happy with how the Main Index Template page looks, repeat the process and add the code to the Single Post page.

And, you’re done!

Thanks to ShareThis for creating this plugin, and thanks to Jon for walking me through this. =) I owe you a calzone.

ShareThis

2 comments ↓

#1 Tom on 04.23.10 at 4:03 pm

I got botched at Part Two – My Appearance menu does not allow me to get to the Editor. Sad face.

#2 Leanne Heller on 04.25.10 at 10:14 pm

Quick thought – is there a chance that you’re set up as an editor, rather than as an administrator? That would give you a different access level, without the Editor tab.

Leave a Comment