I know a lot of bloggers are using AddThis on their WordPress blog and most do not realize that the sharing sidebar service they provide is not optimized for Twitter shares. I couldn’t find any solid resources online that described things step by step so in today’s toolkit, I wanted to lay it out and make it as easy as possible.
The AddThis sharing sidebar
On Going Awesome Places, I have the sharing sidebar, amongst a few other tools to make it easy for my readers to share content. This tool can be implemented as a AddThis Smart Layers WordPress plugin or a simple Javascript code that you drop in (what I currently do).
So what do I mean by unoptimized?
Twitter Shares don’t include your handle
In essence, by default, the AddThis sharing bar does not add your Twitter handle to the end of any share messages. As a result, you have no idea when someone shares your content on Twitter and others aren’t able to tell the content is immediately from you when it’s tweeted.
Your share links are not shortened
This is maybe more an option than anything but unshortened links are a bit of a pet-peeve of mine. The easiest thing you can do is sign up for a bit.ly account (do it now if you haven’t yet). Unfortunately,
Unoptimized tweets from the AddThis sharing sidebar
Optimized tweets from the AddThis sharing sidebar
Optimizing your AddThis sharing sidebar
This started off being a pretty complicated problem because the AddThis documentation on how to do this is honestly quite terrible. As a result, I had to do a lot of research on this, harassing the AddThis team for support and just plain old trial and error.
Here’s an easy break down of what you need to do.
Step 1 Convert to Javascript implementation of AddThis
As much as I liked the easy of implementing Smart Layers via WordPress plugin, it just didn’t have the level of customization that I was looking for and for some reason I could never get their “Custom API Configurations” button to work.
So the first step is to sign up for an AddThis account and enable the sharing sidebar. Configure it the way you want and the grab the code. If you have questions about where to drop the code, let me know and I can help you out.
Note that you only need to insert the code once on your WordPress blog. I originally thought I needed to put the code in for every single AddThis feature I wanted but that wasn’t the case.
Step 2 Add your Bit.ly shortener settings (optional)
If you have your own Bit.ly account, you’ll want to make sure your AddThis account is connected to it.
To access this, go to your AddThis account settings. From there, go to the Profiles tab and click on your profile. Scrolling down, you’ll see a spot to put your Bit.ly login and API key. The Bit.ly details can be grabbed from your account over there under settings and under the Advanced tab. All screenshots can be found below.
1. Go to your AddThis profile page in settings
2. Go to Bit.ly and look for your key under Settings -> Advanced
3. Back in AddThis, scroll down in your profile and enter in the Bit.ly key
Step 3 Add this piece of code
Below is a snippet of code you want to paste in along side the code in Step 1. This is the secret code I had to figure out that customized the share messages to include my Twitter handle in share messages and shortened links using my Bit.ly account.
<script type=”text/javascript”>
var addthis_share = addthis_share || {}
addthis_share = {
passthrough : {
twitter: {
via: “INSERTYOURTWITTERHANDLE“
}
},
url_transforms : {
shorten: {
twitter: ‘bitly’
}
},
shorteners : {
bitly : {}
}
}
</script>
So I hope this clears this up!
Shoutouts to Mary Chong of Calculated Traveller for pointing this out to me at the beginning which prompted me to look this up!
Like What You've Read?
Get exclusive monthly content on blogging tips & tricks and get a FREE COPY of my Top 10 Travel Blogging Tools. Sign up today!
Thanks William, I’ll have to look into this!
Let me know if it works for you! Should be pretty easy to implement!
You make two excellent points to remember – your link is not shortened and may not include your handle. Excellent reminders.
Will, thank you! I had not realized that my Twitter share was not optimized. I use a different WordPress pluggin, but my geek husband was able to sort me out.
You’re welcome! It’s such a small fix but makes a big difference right?
[…] tool is adding your Twitter handle to the end of the sharing prompt? Check out this useful article here for more literature about sharing […]
Should I use the code after the original sharing code (step 1)? I did so but of no result. I am novice in this so, sorry for asking premature question. Kindly help
Kindly help. I pasted the mentioned code before and after the addthis code obtained from step1 in our blog https://planmyad.com/blog . I think I’m not doing it correct as it is not working. Can you please help me telling exactly where to paste your secret code so that my twitter handle is included in shared message from my blog. Sorry for asking novice question as I’m new to this. Thanks
Hey! SOOO sorry for taking so long to respond. I just took a look at your blog and it looks like you took the AddThis piece off. Do you still need help with it? Where did you add your AddThis piece of code on your site?
Ey Will! Thanks for a very nice article, it helped us clear up this frustrating issue 🙂
One notice regarding the script you wrote, the reason why you can’t directly copy it over is because of the quotation marks used. They don’t play well as an actual Javascript script.
I’ve included a version that works on our site in this comment. Note that depending on how your comments are set up, the code snippet below might be converted into something that doesn’t work.
var addthis_share = addthis_share || {};
addthis_share = {
url: “http://url-you-want-to-share.com”,
title: “You can directly control the tweet text itself with this”,
passthrough : {
twitter: {
via: “YOURHANDLEHERE”
}
},
url_transforms : {
shorten: {
twitter: ‘bitly’
}
},
shorteners : {
bitly : {}
}
}
To others, you place this script directly AFTER your addthis.com/js script (the one you pasted from the Tools section in AddThis).
Hey Anders! Wow you rock. This is very helpful and now that you’ve explained it, that makes a lot of sense. Definitely good to know about those quotation marks.
@Will & @Anders…Thanks for such a wonderful article and comment. Very much appreciated 🙂
Great tutorial.
I cant get it to work though.
When i put the code into my blogger blog it stays black and says XML error?
Hey Gemma, shoot me an e-mail and I can try to help debug!
Thanks for the article – what is the right piece of code to use for Squarespace?
Hey Jed! Unfortunately I’m not too familiar with Squarespace. Does it allow you to make code changes like you can in WordPress?
Hey Will,
Addthis are adding some sort of tracking code (yours shows as VKDM_blahblah.twitter in the un-optimized tweet) It is not there in the optimized version, how do you get rid of it?
Thanks!
Hmm that is a good question. I am not sure!! I haven’t actually used AddThis in a long time now.