I write this post after spending several frustrating hours trying to get the right social media buttons to display on Jeffalytics. If I can save one of you from this level of frustration, my job is done.
Adding Beautiful Social Media Buttons To Your Website Should Be Easy, Right?
When I first started Jeffalytics, I went and found social media sharing buttons from all of the major sources (Facebook, Twitter, LinkedIn, Google+) and put them on the site template files. They looked ridiculous as they floated on the page at different heights and widths on the screen. Some were top aligned, others were bottom aligned, and there weren't enough CSS hacks in the world to get them to show up properly.
I needed something easier
A WordPress plugin seemed like the natural choice, but which one? There are literally thousands of plugins that can do the trick, and all of them appeared to have fatal flaws when it comes to flexibility, user ratings, compatibility, etc.
I installed several of them and decided that I liked the AddThis WordPress plugin the best for a few reasons:
- Ability to choose what buttons I wanted to show and what seemed like support for a tremendous number of sharing services
- What appeared to be robust analytics that could go above and beyond button share counts and provide even more information
- I liked the way their buttons displayed on the site and appeared unique. I did not want counts of tweets, etc. at the top of each post, but rather an elegant sharing button for my preferred services
There are surely other plugins I could have gone with, but this plugin was the path of least resistance. So I set up the plugin to run buttons for my 4 preferred services and forgot all about them… until earlier this month when I received a rude awakening.
AddThis Decided to Change the Way Their WordPress Plugin Worked
At some point in time, AddThis changed the way they displayed buttons. Instead of allowing you to enter a custom list of the services that you want to display buttons for, they decided they would start choosing them for you. That meant I had a Pinterest button on my website about digital marketing. Probably not the best use of space!
If you read the fine print, they are telling you to add a custom service list. But then they are saying that no matter what you put in that custom service list, they won't honor it! Color me confused!
I am not sure when this “feature” was rolled out to my site, but there was likely quite a bit of time where my social buttons were sub-optimal and possibly not displaying at all. I cringe when I think about how many amazing Tweets I missed as a result (just kidding, nobody read this site until a few of my posts went viral in April). I never noticed that I didn't have a Google+ button on the site until my post about THE IMPORTANCE OF GOOGLE+ brought visitors to my site, many of whom aptly pointed out that I had no G+ button on the site. I am Jeff's embarrassment.
How to Customize the Buttons on the AddThis WordPress Plugin
While posting my Google+ study, 99% of my focus was on getting the post live on the Internet. No thought was put into my social sharing buttons. However, once the post was live and getting a reaction, getting the social buttons right was of utmost importance.
I had a few options: 1) choose a new plugin and start the learning curve over or 2) figure out AddThis once and for all. I'm stubborn and I think the AddThis buttons are pretty, so I decided to go for option #2. After far too many hours spent pulling my hair out, I pieced together some knowledge from message boards and WordPress plugin support that I figured it out!
1) You Must Choose Custom Buttons
The only way that the buttons displayed will not be the the default AddThis WordPress buttons is by selecting a custom button configuration for AddThis. You can do this in the basic plugin settings like this:
While it may be scary to check this button, if you follow the other steps, you will have no problems.
2) Enter Your Custom Button Code
This may seem daunting at first, but I'm providing you with the exact code I use on my site; so have no fear!
The following code is what I used to generate the exact buttons you see on Jeffalytics as of the time I write this article:
[HTML]
<!– AddThis Button BEGIN –>
<div class=”addthis_toolbox addthis_default_style addthis_32x32_style”>
<a class=”addthis_button_twitter”></a>
<a class=”addthis_button_google_plusone_share”></a>
<a class=”addthis_button_linkedin”></a>
<a class=”addthis_button_facebook”></a>
<a class=”addthis_button_reddit”></a>
<a class=”addthis_button_stumbleupon”></a>
<a class=”addthis_button_instapaper”></a>
<a class=”addthis_button_pocket”></a>
<a class=”addthis_button_diigo”></a>
<a class=”addthis_button_email”></a>
<a class=”addthis_button_compact”></a>
<a class=”addthis_counter addthis_bubble_style”></a>
</div>
<!– AddThis Button END –>
[/HTML]
3) Customize This Custom Code to Include Your Services of Choice
The code I provide above is what works for my site, but I suspect that you may have different services you want to use on your site. No problems there, because adding new services is easy once you get the hang out of it.
If you look at the code above, you will see that each button is in an an HTML tag for a hyperlink (we call it the A tag). Each A tag has a class called addthis_button_servicename. If you want to add a different service? Simply add a new AddThis service code. There are literally hundreds of service codes to choose from.
For example, if you wanted to get rid of my Reddit button and replace it with Pinterest, you can simply change the code that says
[HTML]
<a class=”addthis_button_reddit”></a>
[/HTML]
with
[HTML]
<a class=”addthis_button_pinterest”></a>
[/HTML]
You will then receive a Pinterest button. Note: Pinterest is actually one of the trickier buttons and you need to do some custom coding to get it to properly display a post count. Here is a reference on how Pinterest works with AddThis.
4) Save Your New Code and Test on Your Site
Save the code on your site and test. Does it look like it does in the Jeffalytics screenshot above? Does it have the services you want? If not, make sure your code is displaying properly and everything is spelled correctly. If it is, then your work is done!
Configure the Rest of the AddThis Features in WordPress
Sharing buttons are just one of many features in the AddThis plugin for WordPress, so don't neglect the other options. Make sure that you do the following at a minimum:
- Hook your AddThis account up to the plugin by supplying username/password
- Enter a Profile ID for your site
- Enter the Twitter ID for your site so you can see Tweets coming in. This is probably the best thing you can do to get your name out there through social sharing
- Choose where you want to have your buttons show up. I chose homepage and pages. Posts are included by default when you enable in the basic settings.
- Avoid the Address Bar Shares option if you don't know what it means. From my experience, this feature adds some weird hash codes to your URL's and can be confusing for users, search engines and your web analytics tool. I don't find that to be worth the features it provides, but I don't fully understand the features either. Use at your own risk.
The AddThis WordPress Plugin is a 5 Star Plugin With a 1 Star Documentation System
After taking the time to figure out the AddThis plugin for WordPress, I like it more and more each day. It's simple, elegant and it works. Not a lot of people use it, so my buttons look distinct, and some of the added features are cool and I know how it works now.
My hope is that this post will help a few others figure out how to better use this plugin and save you the frustration I experienced. I know at least one person will benefit from this article based on discussions I have had.
What has been your experience with AddThis for WordPress? Frustrating or useful? Are there better plugins you recommend? Let's hear it in the comments!