One of the only issues that I’ve ever had with social sharing plug-in Digg Digg was the fact that it didn’t shorten the URL on the Tweet button. When people would tweet from my website, it always looked a little unrefined to me. And since Twitter’s t.co URL shortener only reveals on mobile Twitter apps, anyone seeing my link on their desktop would see my full URL in all its clunky splendiferousness. I decided I needed to figure it out and I did.
There are two steps for creating this functionality for your Twitter share button:
- Change the WordPress short URL to goo.gl using Goo.gl Shortlinks plug-in
- Create a Twitter button with a PHP call for the shortlink
Change the WordPress short URL to goo.gl
I’m sure that there’s a way to do this without a plug-in, but I’m lazy. I downloaded the Goo.gl shortlinks plug-in, which converts the WordPress short URL to a goo.gl URL. It takes a minimal amount of configuration and the instructions are pretty straightforward. Note that it doesn’t change all of your URLs at once: saving a post triggers the goo.gl action.
Create a Twitter button with a PHP call for the shortlink
(Note that I changed all of my share buttons to manual buttons, but I imagine you could do this with Digg Digg or any other social sharing plug-in by finding the Tweet button in the code)
On the Twitter buttons page, Twitter will create a generic code which shares the URL of any page you put it on. It looks something like this:
<a href=”https://twitter.com/share” class=”twitter-share-button” data-via=”leaderswest”>Tweet</a>
We’re going to ignore the script and focus on the “a” link. We’re going to add an attribute “data-url” that ties back to the goo.gl shortlink that the plug-in created. Like this:
<a href=”https://twitter.com/share” class=”twitter-share-button” data-url=”php echo wp_get_shortlink(); ?> data-via=”leaderswest”>Tweet</a>
We’re not finished, though: One of the peculiarities about implementing this is that all of the previous share data disappears. So, we’re going to add one more attribute (data-counturl) to tell Twitter what the short-url links to. We do that with a PHP call back to the permalink, like so:
<a href=”https://twitter.com/share” class=”twitter-share-button” data-url=”<?php echo wp_get_shortlink(); ?> data-counturl=”<?php echo get_permalink(); ?> data-via=”leaderswest”>Tweet</a>
Now you have a short-url in your Tweets, the counters are fully functional, and that’s all there is to it. Share this post and check it out. 🙂