Everyone wants to add social media sharing to their websites, but what sharing tool should you use? The most popular are AddThis and ShareThis. In this tutorial I’ll show you why I prefer ShareThis, and how to get ShareThis setup on your website. If you’ve got WordPress, I will cover the WordPress Plugin in another post.
Why Social Media Sharing Matters
First, social media has been steadily increasing as a major news source. More people are spending more of their day on social media and trusting what is shared there.
Second, people like clicking buttons (don’t believe me, put a button in front of a kid and see how long it takes them to click).
Button Placement
A lot of people don’t think about button placement, they just throw the buttons wherever there is room. But, that’s not the best approach. Most websites have sharing buttons at the beginning of an article, the end of an article, or on the left side hovering.
Humans are creatures of habits. If your buttons aren’t in the usual locations, there’s a good chance people won’t find them.
Top of Article
Some people will read the intro paragraph, maybe another couple lines and want to click share. Having social sharing buttons at the top of the article allows for this possibility. It also tells people as they start reading if this is a well shared article or not. More shares indicates authority, which is a good thing. If you don’t have a lot of shares, people may also feel generous and give you an extra share or two.
A recent trend in top of articles are buttons that start at the top of the article (just below title & byline) and then as the user scrolls down the page they stick themselves to the top of the screen. This way the buttons are at the top of the screen at all times. Since this is new, not all people even notice them there and some people find them annoying. Also, this method is not good for mobile as screen real estate is at a premium.
Bottom of Article
If someone makes it to the end of the article, or even relatively close to the end, they may just scroll down to share. After all, if they read all or most of the article, they probably think the article is worthwhile.
The trick with bottom of the article sharing buttons is putting the buttons at the end, not after author stuff. Some sites put their sharing buttons below related posts, author info, and an ad or two. The result is people don’t scroll all the way to the buttons. So, as soon as the article ends, have your buttons clearly identified.
Left of Article
Buttons added to the left side may sound like a great alternative, they can be there at all times ready for sharing. The result is that most of them are poorly integrated into the design of the site, which means they may be half (or fully) cut off depending on window size. They also do not translate well for tablet or mobile.
Why I use ShareThis
There are a few different sharing services out there, so why do I use ShareThis? For one thing, I wanted to use one of the larger tools due to increased likelihood of it still being around in 5 years. Second, I wanted an easy to use plugin for WordPress.
I tried a couple of third party plugins and didn’t like any of them. I also tried the AddThis plugin and found that it lacked easy customization (a recent check of their website and it’s still pretty confusing to the average person). So I ended up with the ShareThis plugin, which isn’t perfect but does allow for what I need.
The current incarnation of ShareThis allows for three standard button styles for within post sharing. It also has options for fixed to top of page, bottom of page, left of page, or a random football (for those who would like an american football). Most styles of sharing have configurable display options and all allow easy selection of which social media sites you want to allow sharing on.
ShareThis on Any Website
To get started, go to ShareThis and select the big green “Get Sharing” button (or Get Sharing from the top navigation bar). Once there you will be asked how you want to share your content.
If you are using WordPress, Drupal, Joomla, Blogger, TypePad, tumblr, a newsletter, or an iOS/Android app then there is a specific set of sharing instructions for you. The instructions are step by step with clear screen shots. If you can make it around your platform of choice you should be able to get ShareThis installed.
For the rest of the world (or those who don’t want to use a plugin), you can select the generic website option. Then click on “Next: Style” in the lower right.
For sharing your content you have three categories of options. You can share using standard sharing buttons, using a floating sharing bar, or using the featured options. As you hover your mouse over the various eight options you will see additional helper text telling you a little more about the option.
Common Options
Selected Services
Whichever type of sharing you select you will be able to choose which social networks your content is shared on. You select services by just dragging and dropping to add new services, clicking on the X next to existing services to remove them, and dragging to reorder services.
The most popular services are generally Facebook and Twitter, however you should select the services most relevant to your website. Most people also include the ShareThis service is the last option since it will allow people to share your content on any social media network.
CopyNShare
CopyNShare is a feature of ShareThis which attempts to track how your content and/or website URLs are shared. This is implemented by adding a hash to the end of your content or URL. The hash at the URLs usually isn’t too annoying, however the additional “read more” with URL can be quite annoying. I’d recommend leaving content off and I usually leave URLs off as well.
Buttons
I generally recommend either of the second two button options. The first button option looks a little too much like the standard buttons which link to a social media account. You don’t want your visitors confused between what links to your social media account vs what will share your content.
Once you select your preferred button style, click on the Next: Customize to select your preferred social media sites.
On the customize page you will be able to select which social media services you want to have included on your site. Your current services are displayed in the preview area.
Once you have your sharing buttons all set up, it’s time to click on Finish in the lower right and get you code. When you click on Finish you will be prompted to sign in. If you’d like to view data about how your content is being shared, sign in (or create an account). If you just want the code click on the link in the lower right.
For the code you have two options, you can use either their multi post style (allows people to post on multiple networks at once) or the direct post style. They recommend multi post, and it is what I usually use. After you select your style, scroll down and you will get two sections of code to add to your website.
The first section of code needs to placed on your website where you want the buttons to appear. You can paste it to more than one spot, for example at both the top and bottom of your blog article.
The second section of code goes in your head tag. This is the javascript code that makes the sharing buttons actually function. (To speed up site initial loading I do frequently put the javascript at the end of the html file, just before the </body> tag.)
Tip: By default your content will be shared with “via @sharethis” at the end of it for twitter. If you want to use your own account then add st_via=’your_account’ to the span (replace your_account with your twitter username, do not include the @). For example:
Before: <span class='st_twitter_vcount' ...>
After: <span st_via='anphira' class='st_twitter_vcount' ...>
Bars
With the top and bottom bars you will have the option to include your logo. The left and right bars just say share and have icons for sharing. All of the bar options will display on the customize screen as they would on an actual website. So look up, down, left and right.
Bottom Bar
If you decide to use the bottom bar, remember that on your website you will need to make sure that at least the bottom 40-50 pixels of your footer are empty. This is usually done with CSS padding of your footer area.
As with buttons, you will be able to customize the social media services you use. However, there is also space for a 200px wide logo (not limited on height — however they recommend 45px height) and setting up most shared content. This content can relate to your facebook & twitter profiles.
Lower down on the bottom bar screen you can select your theme. This sets what colors your bottom bar appears with. Choose something that goes well with your site.
Once you have all of your settings selected and you like how the bar appears, click on Finish. When ShareThis provides you with your code you’ll notice it is different than with buttons. You have two snippets of javascript that need to go on your site. They recommend that the first snippet go in your head section and the second at the bottom of your page (just before the </body> tag).
Top Bar
The top bar has two unique settings, the logo and the scroll height. The logo is limited to 300px wide by 40px tall and should a transparent PNG. The scroll height allows you to select how far down the page the visitor needs to scroll before the sharing buttons become available. Remember to click on Update Preview if you change either of these settings.
Once configured, click on Finish. The code for the top bar has one more section than the bottom bar, this for CSS. The CSS code will need to be added to your CSS file. The plus side is that since the CSS for this bar is on your website, you can control it (provided of course you know how to style CSS).
Side Bar
The side bar has the fewest options of all of the sharing bar options. The only two options are left or right. Once you have selected your preference, click on Finish to get the code. The code is like the bottom bar, you have one section of code to place in the head section of your page and another for the end of your page.
Featured
There are two styles of sharing for Featured. The first is ShareNow which is tailored to Facebook. The downside is if your visitors aren’t logged into Facebook then the feature won’t work right.
The second is the ShareFootball. This looks like an american football and can be placed anywhere that you would place the sharing buttons. In the past this has been a sharing egg and a few other incarnations — it tends to be reflect what events are going on in the US (at the time of this writing the Super Bowl is coming up).
ShareNow
The ShareNow feature is easy to configure, just choose the theme you would like and click on Finish. You will get javascript code similar to the side bar.
ShareFootball
The ShareFootball doesn’t have any special features to configure. When a user rolls their mouse over the football, it expands to show the various social media options you have selected.
The code consists of one piece of HTML to place where you would like the football to appear, one piece of javascript to put at the end of your HTML file, and one piece of javascript for your head section.
ShareThis WordPress Plugin
I will cover how to use the ShareThis WordPress plugin in another tutorial.
Conclusion
This tutorial introduced you to the ShareThis social media sharing service and how to incorporate that into your website. It does involve code copy & paste, but it shouldn’t be too hard if you have even a passing familiarity with HTML.
Need more help getting social sharing setup?
Contact us today!