Creative Design

Adding a 'Share This' widget to your site is a great little feature. It will make it easier for followers and readers of your blog/website/whatever to share your information across their social networks, blogs, emails and many other digital formats. You have probably seen the little icon a thousand times, and never really noticed anything other than a popup when you hover the mouse over it. In that little popup there are many different ways to share the information your reading, including facebook, digg-it, myspace, stumpe-upon and many many many more!

I was recently creating a new site called Residual Bacon and when adding the Share This widget I came across a slight problem. I had created certain pages that I didn't really want to be shared and others that I did want to be shared with the share this widget. The default options for the Share This widget has only 2 options. "Add Share this to posts" and "Add Share This to pages". I needed it to be on certain pages and all of my posts. So I did my homework, found the solution, and am here to share it with you.

Get the plugin & the code

First thing first. We are going to need to get a Share This code clipet & a customized icon. Head over to Share This and up at the top there is a link that says get the button for your site. Click it! Now you will be presented with a tabbed set of options (Step #1). This is just customizing your button for your website. Go ahead and use the button you would like. I myself chose the 'Rotating Icon' version. Next click on the header tab. Here you can add a header to your button if you'd like. I left mine alone. At the bottom tab (services) add which services you would like to be displayed. I chose defaults. (Step #2) Finally make sure you click the wordpress logo under 'Choose Your Service'. This will let you download the plugin. After that click on the 'Get ShareThis Code' submit button at the bottom of the screen.

It may ask you to fill out some quick information, its quick and doesn't require validation so just fill out the info and submit it. This should bring up Step #3 which is install. The first step says "Download the plugin & expand it." This is the Wordpress plugin that will be placing the the ShareThis button on your posts and pages. Don't close your browser yet because the code snipet that you see that the bottom of the page will be needed in a few later steps. Download the zip file and extract it. It should have expanded a folder called "Share-This" to wherever you extracted it from. Now your going to have to drag this folder onto your wordpress' plugin folder. It should be under /wp-content/plugins .

Activate and Setup the plugin.

Now you will need to log-in to your Wordpress site. (I hope you know how to do this.) Once you are logged in click on the left hand side where it says Plugins. A screen with all of your plugins should pop up. Look for the ShareThis plugin and click 'activate' underneath the name. After you click activate the grey box around the plug-in should change to white, and the word activate should change to deactivate.

Now look to the right at the description of the ShareThis plugin. In the text field there should be a "Configuration options are here" link in the center of the description. It looks like this.

Now you should see the options for the ShareThis plugin. Go back to the webpage with the code snipet and copy and paste the code they gave you into the text field. Leave the 'Automatically add share this to your posts?' set to yes. Now change the 'Automatically add ShareThis to your pages?' to NO. Finally click the Update ShareThis Options button at the bottm.

Now if everything is working correctly you should be able to view your blog/website and any posts you have submitted there should be a ShareThis button at the end of each post. Before we go on to showing you how to create the custom page template lets review what we did.

• Went to the ShareThis website and setup our button.
• Downloaded and Activated our ShareThis plug-in.
• Copied the code and setup the ShareThis plug-in.

Seting Up Your Custom Page Template In Wordpress

So now that we have our plug installed and working on our posts. We are going to want to setup a custom page template that we can assign to certain pages of information that we want to be shared. In my case I have a big list of articles that I have written that I want to be shared that is a page on my wordpress blog. I want to share this, but I don't want to share every page, because no one is that interested in my About section and I don't really want to share this anyhow. So lets get started.

If you are not familiar with the Wordpress hierarchy I would give a quick glance at the wordpress codex hierarchy so you have somewhat of an idea of what is going on. Its not as complicated as spelling the Hierarchy, I promise! Basically we are going to create a template page that we can assign pages to use the code from the template rather then the ordinary and default page.php that your usual pages use created through Wordpress. To start lets download your current page.php from your theme folder. If you have not installed any custom themes for your wordpress then you will most likely be using the default theme (based on Kubrik). To see what them you are currently using click on 'Appearance' in your Wordpress dashboard. At the top, directly below 'Manage Themes' it should say 'Current Theme' and it will give the name, the author and a nice little peice of information 'All of this theme’s files are located in: themes/foldername'. In my case, since I have created my own wordpress theme, its in the folder themes/tytheme (as you can see below).

This folder name is where you are going to find your themes 'Page.php'. We are going to download this file, copy the contents into a new PHP file. Add a little bit of code, and save it as our template. It may seem somewhat intimidating, but its easier then clipping your fingernails, I promise! Here is an image of my wp-content folder, here you will see I don't have a ton of stuff in my theme, afterall its still being developed. Under 'tytheme' you can see 'page.php'. Lets grab that file and open it with our favorite coding program. If you don't have one thats fine, you can open it with text editor or notepad, any simple editor will do.

Open up page.php. We are going to be doing 2 things here. First we need to add a small amount of code to the top of the page to let Wordpress know that this is going to be a page template for other pages in wordpress. Here is my wordpress page.php before I have done any editing.

Now in order to make wordpress know that its going to be a template we need to add the following code at the very top of the page.

<?php
/*
Template Name: ShareThis
*/
?>

So it looks like this.

Where name says 'sharethis' you can change that to whatever you'd like. This will be what it is named inside of wordpress. Since this is going to be for pages that are using the ShareThis plugin, I called it ShareThis. Now we need to add a nother sniplet of code to the bottom of our page content loop. It may get a little complicated here, since every loop is not the same. Usually they end the same. Here is my current loop code that brings in the page content.

The grey parts are greyed out because those are comments explaining what is going on. Look for a piece of code on like 34 that looks like this:

<?php the_content(); ?>

This little piece of PHP code tells Wordpress to pull in content. Now we are going to be adding a piece of code right below it. The piece of code we will be adding will be :

<?php if (function_exists('sharethis_button')) { sharethis_button(); } ?>

This little piece of PHP looks to see if there is a ShareThis plugin installed on wordpress, if it is installed it will add our ShareThis button right below the content of our page! Here is an image of all of our code now with the sharethis code added.

As you can see on line 35 there is our newest code added, and you can see at the top lines 1-5 is the code we added earlier. Now save the files as something OTHER THAN PAGE.PHP. I chose to save mine as sharethis_template.php.

Uploading your template and adding pages

Phew, we are almost done. Now we need to upload our template file and add pages so wordpress knows which pages to have the ShareThis button on. First upload your newly created PHP template to the same directory as the PAGE.php. Remember to not overwrite your page.php, you need to be uploading your newly created file, in my case its sharethis_template.php.

Now login into your wordpress site. Click pages on the left hand side and click on one of the pages you want to have your ShareThis button on. You will notice a new item on the very right hand side of the window. Under attributes on the right hand side there should be a new item called 'Template'. This item only shows up if you have uploaded a template file into your theme. If you don't see this on the right hand side of the screen under attributes then you may have forgotten to upload your template PHP file.

Under templates select the template page you would like to use. If you followed my instructions there should be a Share This drop down. Go ahead and select it, then click 'Update Page'. Click the 'Preview Changes' button and make sure you see your new ShareThis button below your content!

Lets some up our final actions here:

• Downloaded our page.php from our Wordpress theme.
• Added in code at the top to declare the theme.
• Added in code to insert the ShareThis button under our content.
• Saved our new document with a new name and uploaded.
• Logged in and added pages to our template.

You have learned a lot today! If you have had any problems be sure to leave a comment below and I will respond. For more information on template pages and the ShareThis check the links below. Finally be sure to SUBSCRIBE to my blog so you don't miss any other important design related posts. Adios! And if you are trying to put a sharethis button on your Wordpress site and are having issues feel free to drop a comment below and I can help you get things working. Cheers!

• More information on template pages.
• Infomration on positioning your ShareThis button.
• ShareThis Official Website