How to Add the Official Twitter Tweet Button to Your WordPress Site: Expert Guide

As a leading WordPress resource trusted by over 5 million users, we've guided countless site owners through social integrations. When Twitter launched its official Tweet button, it quickly became the go-to choice over third-party options like Tweetmeme. Major sites and bloggers—including those following @wpbeginner—switched for its customization, including recommended accounts. Here's our proven step-by-step guide to adding it to your WordPress site.

Place this code inside your theme's post loop files like single.php, loop.php, index.php, page.php, category.php, or archive.php. As WordPress experts with years of theme customization experience, we recommend using PHP functions for dynamic content.

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-via="wpbeginner" data-text="<?php the_title(); ?>" data-related="syedbalkhi:WPBeginner Founder" data-count="horizontal" data-lang="en">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Live Demonstration

Tweet

Try tweeting with the button above. Notice how we use data attributes on the anchor tag for precise control. Here's what each one does:

• data-url: Automatically pulls the current post's permalink (no changes needed).
• data-via: Credits the original tweeter with "via @yourusername" (replace with your handle).
• data-text: Uses your post title for the tweet (dynamic via PHP).
• data-related: Suggests up to two accounts to follow post-tweet, formatted as "username:Description". The first matches data-via; replace with partners or delete. Default here promotes @syedbalkhi, WPBeginner's founder.
• data-count: Button style—horizontal, vertical, or none.
• data-lang: Language code (en for English; defaults if omitted).

We prefer data attributes for clean, maintainable code. Query strings work but bloat URLs:

<a href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=wpbeginner&related=syedbalkhi:WPBeginner Founder&count=horizontal&lang=en">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

For static pages, use Twitter's Publish Button Builder.

Pro tip: Otto's Simple Twitter Connect plugin fully supports this button.

Additional Resources:
Official Tweet Button Documentation