How to Add Twitter’s Official Tweet Button in WordPress

Last updated Jul 10, 2019

Earlier today, Twitter announced their official Tweet Button which does the exact same thing as the Tweetmeme buttons except it is made by twitter. A lot of people are already switching (this include top corporates and small bloggers that follow @wpbeginner on twitter) because this button offers additional customization plus it has the option to recommend account following. In this article, we will share how you can add twitter’s 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 within the post loop.

  <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>     <a href="http://twitter.com/share" class="twitter-share-button"        data-url="<?php the_permalink(); ?>"        data-via="wpbeginner"        data-text="<?php the_title(); ?>"        data-related="syedbalkhi:Founder of WPBeginner"        data-count="vertical">Tweet</a>

Demo

Try tweeting using the button above.

If you notice in the code above, we are using the data-attribute of anchor tag to tell twitter exactly what we want it to do. Below is the explanation of what each property means:

data-url – This fetches the URL that you want to share (You do not need to change this).
data-via – This tells twitter who was the original tweeter by adding via @wpbeginner (Make sure you change it to your twitter account).
data-text – This fetches the title of your post (You do not need to change this).
data-related – This adds recommended users to follow. You are allowed up to two Twitter accounts for users to follow after they share content from your website. These accounts could include your own, or that of a contributor or a partner. The first account is the one that is shared in data-via property. (Make sure you change it to one of your other twitter accounts, or remove it). If you don’t, then you will be recommending @syedbalkhi (Founder of WPBeginner). The correct format to enter data in this variable is twitterusername:Description of the User
data-count – This tells twitter’s script which style of button you want to show. You have three option (vertical, horizontal, none).
data-lang – This variable tells twitter which language it should be in. Default value is ‘en’ for English, and we have left it at that.

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

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>  <a href="http://twitter.com/share?url=<?php echo urlencode(get_permalink($post->ID)); ?>&via=wpbeginner&count=horizontal" class="twitter-share-button">Tweet</a>

If you just want to add a tweet button on a static page, then you can use Twitter’s Tweet Button Generator.

Thanks to Otto for notifying us in the comment below that his plugin, Simple Twitter Connect, fully supports the official tweet button.

Additional Resources:

Supplemental Documentation for Tweet Button