Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 61: Adding social media sharing buttons to Thesis 2

AddThis Social Media Sharing Buttons with Thesis 2

We’ve built a lot of content and we want to encourage our site visitors to share it.  In this step, we are going to add the popular AddThis social media sharing buttons to our site.  Social media sharing of our content can help us build our audience and get noticed.  So we don’t want to miss out on this important opportunity to make it easy for our site visitors to spread the word.

How to add social media sharing buttons to Thesis 2

First-things-first, go to AddThis and create a free account.

AddThis Home Page

Next, click the “Get the Code” menu option.

AddThis Get The Code Link

The code page gives us several options for choosing our buttons.

Add This Button Style

My choices are:

  • Get sharing buttons for: “A Website”:  I chose this optoins because it gives you JavaScript for buttons instead of PHP or a plugin.  AddThis does provide a WordPress plugin but I’m choosing the JavaScript option.
  • Select style: this is a personal preference.  I like the large icons without text so this is what I’ve chosen.
  • Options: the checkbox is selected by default.  I uncheck it because I don’t like the code appended to the end of my URL.  This is a personal choice.

We’ll click the blue “Grab It” button when it’s time to copy the code to our site.

Next we need to add the AddThis code to our site.  Navigate to the Thesis Skin Editor > HTML > Home template.

Thesis 2 Skin Editor HTML Page

We will create a new Text Box using the “Add Boxes” window.

Thesis 2 HTML Text Box

Give your box a name and click the blue “Add Box” button.

AddThis Text Box

We now have a custom HTML text box to display our AddThis code.

Thesis 2 AddThis Text Box

Perform a shift-click and drag the new box to the “Home Post Box”.

Thesis 2 AddThis Home Post Box

Move your cursor over the “AddThis” box and click the gear icon.  Referring back to the AddThis “Grab It” button, click it and copy the script.  Paste the script in your new AddThis box.  Be sure to check the “disable automatic <p> tags”.

Thesis 2 AddThis Script

Click the “X” at the top of the pop-up to save your changes.  Click the green “Save Template” button.

Thesis 2 Save Template

Refresh your home page and your posts should look something like the picture below.  Notice the social sharing buttons below the comment count.

Thesis 2 Home Page AddThis Social Buttons

We’ve added the social sharing buttons to our home page.  Now we need to add them to our single page template.

Click on the “Home” template then select “Single”.

Thesis 2 Single Template

One of the awesome things about Thesis 2 is when we add boxes to one page template, they are also available for use on the other templates.  Notice in the right sidebar column the “AddThis” box we created is listed.

Thesis 2 Drag Boxes AddThis box

Perform a shift-click and drag your new box to the “Home Post Box” area.

Thesis 2 AddThis Home Post Box Single

We don’t need to do anything else with the “AddThis” box since we already added our code above.

Click the green “Save Template” button.

Thesis 2 Save Template Button

From your homepage select one of your blog entries.  Scroll down until you see your AddThis social sharing buttons.

Thesis 2 Single Post Social Sharing Buttons

 

Depending on where you want to display the social media sharing buttons, you may need to update other page templates such as Category or Tag.

If you have enjoyed this tutorial, go ahead and share it by clicking one of my sharing buttons.  Thanks!

I hope you will add social media sharing buttons to your Thesis 2 site to help your visitors spread the word.

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 4 comments… add one }
  • Suresh Khanal April 12, 2013, 12:01 PM

    Hi Doug,

    I tried to implement this method for my blog (has thesis 2 & Marketing Delight 3 skin) but the buttons did not appear horizontally, but rather in multiple lines each button indented as if cascaded. I just could not figure out where to fix it?

  • Doug Macklem April 12, 2013, 5:21 PM

    Suresh, for a first try, check your HTML text box and check the box to “disable automatic p tags for this text box”. It sounds like it is inserting paragraph tags causing the new lines. I’ve seen this before on another blog I built.

  • Mahendra Reddy June 16, 2014, 10:55 PM

    Hi Doug,

    I was able to follow your instructions and implemented social media icons for my website. Thanks for your useful tips. Today what i have observed is AddThis website layout got changed. In case if you intend to change your blog post with latest screenshots you can do that

  • Doug Macklem June 21, 2014, 8:30 AM

    Yes, since I’ve put out this site several things have changed. I did this site as a hobby so I haven’t had the time to make updates as I have too many household projects on my list. I’m glad you were able to follow along.

Leave a Comment