Adding a Tweet Button to WordPress
After I completed the redesign for bavotasan.com, I was looking for some social media links to add to the bottom of my single post pages. The main two buttons I wanted were a Facebook Like button and a Tweet This type button. The Facebook Like button was easy to find and install, but it took me a while to find the official Twitter button, since I never really looked at the footer links on Twitter.
If you click on the Goodies link, you will see three options: Tweet Button, Widgets and Buttons. All three are useful, but for my purposes, the Tweet Button was all I needed. You will probably have to sign in to Twitter before you can check out the Goodies.
Twitter's Tweet Button options page
There are many options you can tweak to get the Tweet Button working the way you want. I left everything on the defaults and ended up with this bit of code:
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="your-username">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> |
Including this code anywhere in your single.php file will work. If you wanted to include it on a category page or your index page, you would need to make a few changes.
<a href="http://twitter.com/share?url=<?php urlencode(the_permalink()); ?>&counturl=<?php urlencode(the_permalink()); ?>" class="twitter-share-button" data-count="vertical" data-via="your-username">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> |
Include that within the loop and it will include the post specific URL for each button. You can even take it one step further if you’re using shortlinks:
<a href="http://twitter.com/share?url=<?php echo urlencode(wp_get_shortlink()); ?>&counturl=<?php urlencode(the_permalink()); ?>" class="twitter-share-button" data-count="vertical" data-via="your-username">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> |
The last code snippet is the one I use on this site. You can see the Tweet Button directly below.
If you want to add a shortlink, it is recommended to add the urlcount parameter which would point to the permalink of the page.
You can find other useful arguments to the share button here:
http://dev.twitter.com/pages/tweet_button
Just use the WP Tweet Button plugin. It does all that and more.
http://wordpress.org/extend/plugins/wp-tweet-button/
That plugin does seem to have tons of cool features. I prefer to just add a bit of code instead of a whole plugin, especially when the more plugins you run on your site, the slower your site might become.
Good work on this
doesn’t actually make sense because the_permalink() echoes the url and doesn’t return it, so you’re encoding an empty string. It’s dumb – WordPress doesn’t have the get_the_permalink() function for the loop – you have to use get_permalink($id) instead. Lame.
You want to be echoing the_permalink() in this instance so that the URL is automatically added to the string. If you hover over my Facebook button above, you will see the_permalink() is echoed out into the string for the button link. That’s how it should be.
How do you set it up so that it appears properly on the index page? Copying the code into the index simply adds a twitter button for the whole site to each post, instead of the twitter button for the individual post.
It would have to go into the loop so that it works for each individual post on the index page.
Worpress has plugins for that!
Yes it does, but I am a fan of less plugins and more direct code implementation. It usually makes your site a bit faster to have less plugins installed and activated.