How to add the official Twitter button in WordPress

Earlier today, Twitter announced its official Tweet button that does the exact same thing as the Tweetmeme buttons, except it's made by Twitter. Many people are already switching (this includes major corporations and small bloggers who follow @wpbeginner on twitter) because this button offers additional customization and has the option to recommend the next account. In this article, we will share how you can add Twitter tweet button in WordPress.

This code can be installed in single.php, loop.php, index.php, page.php, category.php and archive.php as long as it is placed inside the post loop.

 Pío

Demonstration

Try tweeting using the button above..

If you notice that in the code above, we're using the anchor tag's data attribute to tell Twitter exactly what we want it to do. Below is the explanation of what each property means:

data url - This retrieves the URL you want to share (you don't need to change this).
data via - This tells Twitter who the original tweeter was by adding via @wpbeginner (make sure to change it to your twitter account).
data text - This gets the title of your post (you don't need to change this).
related to data - This adds recommended users to follow. You are allowed to have up to two Twitter accounts for users to follow after sharing content from your website. These accounts may include yours or that of a collaborator or partner. The first account is the one that is shared on. data via property. (Make sure to switch it to one of your other Twitter accounts or delete it.) If you don't, then you are recommending @syedbalkhi (WPBeginner Founder). The correct format for entering data in this variable is Twitter Username:User Description
data count - This tells the Twitter script what style of button you want to display. You have three options (vertical, horizontal, none).
data lang - This variable tells twitter what language it should be in. The default is 'en' for English, and we've left it that way.

We recommend users to use the data attribute of the anchor tag method because it keeps the code clean and short. Although query string parameters are a convenient way to share your page, they can make your anchor tag very long, and it's difficult to maintain a long URL, especially when you have to encode the URL parameters. Below is the query method for those who choose to use it:

 & via = wpbeginner & count = horizontal "> Tweet

If you just want to add a tweet button on a static page, you can use Twitter's Twitter Button Builder.

Thanks to Otto for letting us know in the comment below that his plugin, Simple Twitter Connect, is fully compatible with the official tweet button.

Additional Resources:

Supplemental documentation for the Tweet button