WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Add Twitter’s Official Tweet Button in WordPress

How to Add Twitter’s Official Tweet Button in WordPress

Last updated on June 22nd, 2012 by Editorial Staff
102 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Twitter’s Official Tweet Button in WordPress

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.

Official Tweet Button

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


Tweet

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

102 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

38 Comments

Leave a Reply
  1. jafar says:
    Feb 22, 2013 at 1:56 am

    thank man :)

    Reply
  2. RandyDueck says:
    Aug 20, 2011 at 1:11 pm

    Thanks for the quick response. I’m not a programmer, do you know where I can get a peice of code and paste it in? Re: Count, I’m thinking then that when testing, If I use the tweet button to post to post to my own page, then twitter doesn’t tink it’s legit? However, I have another twitter acc’t that I tried tweeting to and it didn’t increase. Is there a way I can test it to see that it’s working? How do I know it’s a legit tweet or not? I’m surpirsed that Twitter seems difficult compared to FB @wpbeginner

    Reply
  3. wpbeginner says:
    Aug 20, 2011 at 12:53 pm

    @RandyDueck Twitter uses the new t.co shortner which only shorten links for their algorithm to make sure it is not SPAM… then it pastes the unshortened version… You have to utilize another API and write a bit of custom code to get the custom short URLs to work there…As far as the count, twitter button only shows count that it thinks are legit.

    Reply
  4. RandyDueck says:
    Aug 20, 2011 at 12:10 pm

    Thanks for this great little code snippet. I want the twitter button to be in the post excerpt and below the title of the single-post page. the code works fine. gives the correct title etc. however, it does not shorten the link, and after tweeting, the tweet count doesn’t go up. the site is thinkactloveloseweight.com Thank your response

    Reply
  5. KatrinaMoody says:
    Aug 10, 2011 at 8:45 pm

    Gretchen – all links should trace back to your permalink – so your permalink should be the source URL, not your short link … make sense? YOu can’t yet change the URL shortener if you use the official Tweet button ( I looked into it because I wanted to do a shortlink).

    Adding this so long after the original was posted because others might have that question!

    Reply
  6. KatrinaMoody says:
    Aug 10, 2011 at 8:41 pm

    I thought I would note that some themes change the value for the title and post url – meaning that the code will tweet with your code in quotes. I got a couple questions on Twitter over that one. I just found the different variables that worked for my site and replaced them. So …

    Line three: data-url=””

    was changed to %permalink% – which was my theme’s replacement

    Line five: data-text=””

    was changed to %post-title% – again my theme’s replacement

    I wouldn’t have been able to do this without your tutorial! Thanks SOOOO much! You are now my go-to resource!

    Reply
  7. idowebmarketing says:
    Jul 27, 2011 at 1:21 pm

    @wpbeginner @idowebmarketing Okay, there are two locations of this code, and I had only updated one!

    Reply
  8. wpbeginner says:
    Jul 26, 2011 at 8:37 pm

    @idowebmarketing @wpbeginner data-via is the only thing that needs to be modified in order to make the change.

    Reply
  9. idowebmarketing says:
    Jul 26, 2011 at 3:30 pm

    @wpbeginner @idowebmarketing Thanks – I added new blog posts to two of my blogs yesterday after implementing the updated code, however it still recommended wpbeginner on both. Is there any section of code that also needs to be updated?

    Reply
  10. wpbeginner says:
    Jul 25, 2011 at 7:30 am

    @idowebmarketing On old posts it takes twitter while to figure it out. On new posts it should be fine.

    Reply
  11. idowebmarketing says:
    Jul 23, 2011 at 3:06 pm

    My blog is still recommending wpbeginner and I have updated the code. Here is the edited code:

    <script src=”http://platform.twitter.com/widgets.js” type=”text/javascript”></script> <a href=”http://twitter.com/share” data-url=”<?php the_permalink(); ?>” data-via=”idowebmarketing” data-text=”<?php the_title(); ?>” data-related=”imnewsdaily:Daily updates from the internet marketing industry” data-count=”vertical”>Tweet</a>Any idea what I am doing wrong?

    Reply
  12. Richard says:
    Apr 15, 2011 at 1:19 pm

    Thank you for posting this!! I have been trying to slove this problem for about three days now…

    do you have the same code for the facebook like button?

    Reply
  13. Gretchen says:
    Mar 5, 2011 at 12:03 pm

    I use the WP-generated shortlinks when tweeting about my posts, and have had troubles with those always showing in my Tweet count. The final bit of code on this site seems to work, though if you click to view the search results in Twitter it only shows the links to the actual permalink, not the links to the shortlink as well: http://bavotasan.com/tutorials/adding-tweet-button-wordpress/ It’s too bad WordPress and Twitter don’t count those as the same link somehow…

    Reply
  14. Zakir says:
    Feb 13, 2011 at 9:28 pm

    I can add javascript in header but it will degrade YSlow rating, currently it is B rating. I really work hard to make B from D. I opened a ticket to twitter technical team, they just sent me email providing some links which may help me to get my answer or open a new ticket if not. Thats so stupid. Twitter people think we didn’t see other answers! thats so frustating. Linkedin doing quite well , their share button updates within a minute.

    Reply
  15. Deepanshu says:
    Feb 13, 2011 at 4:11 am

    hello sir :-) sir how do i use this for pages ? i was able to do it for posts

    Reply
  16. Zakir says:
    Feb 8, 2011 at 6:53 pm

    In my above mentioned website, i used your code, index.php, single.php and other php file within loop.
    I can click the twitter tweet button and it shows count number, but if i refresh the page, that value goes away. Now after may be 1 hour if i check that article page, i can see the new count value. e.g. before i clicked the button it was 0, after almost 1 hour it shows 1. My question is why it took 1 hour to update. it should be updated immediately isn’t it?

    Now in front page which index.php, i used the code and again i used in single.php. User clicks an article from index.php and comes article page which is in single.php. The problem: count value is not synchronising the count from the index.php to single.php. I check it later it is but after almost 1 hour. so it is synchronising after almost 1 hour.

    Why? any idea.

    Recently I changed the .htaccess file to add expire headers to get some speed. i am getting that but today i removed that line and back to default .htaccess file. Do you think its something with .htaccess where caching is controlled by hour, minutes, seconds, months or even year. Even though if I enable caching, the twitter java script which is twitter server can’t force to use caching.

    Now I am not sure where I should look for to get immediate count value. client wants to see immediate count and synchronise with article page.

    Please check the http://www.bizgene.com to get an idea.

    Any clue or idea will be a great favour.

    I used following code for tweet count button:

    <a href="http://twitter.com/share&quot; class="twitter-share-button"
    data-url="”
    data-via=”bizgene”
    data-text=””
    data-count=”horizontal”>Tweet

    Zakir

    Reply
    • Editorial Staff says:
      Feb 9, 2011 at 5:56 am

      Zakir, We think this is a common bug going on with twitter API. We have been noticing a similar thing with our tweetmeme button regarding the count. It synchornizes the count almost after 20 – 30 minutes. Perhaps try adding the script part in your head codes and then display the a href part where you want the button to display might help.

      Reply
  17. Simon says:
    Dec 27, 2010 at 11:21 am

    I don’t get it. Using the data url link/button above gives just a t.co link and nothing else. Has something changed there or why doesn’t it output the values?

    Reply
    • Editorial Staff says:
      Jan 4, 2011 at 1:59 pm

      Note, to get the_title(); or the_permalink(); you have to place this code inside the loop. If you place it outside a loop, then it will not give you a desired value.

      Reply
  18. coz says:
    Aug 27, 2010 at 11:59 pm

    ARGH. This is what I tried but im replacing the greater-than/less-than symbols with brackets so it will hopefully show:

    [?php the_title(); ?] #[?php the_category(‘,’); ?]

    Reply
  19. coz says:
    Aug 27, 2010 at 11:55 pm

    um… last comment isn’t displaying the php… sorry. This is what i tried: (hopefully this will work)
    #

    Reply
  20. coz says:
    Aug 27, 2010 at 11:09 pm

    For DataText, im looking to add the title and category of the post as a hashtag. I can’t seem to figure out how to do it, being that I’m not too familiar with php.

    I tried: >>> data-text=” #”

    but that didn’t work. Any idea of how to do this?

    Reply
  21. S.Pradeep Kumar says:
    Aug 14, 2010 at 1:24 am

    Nice tutorial. Finally I implemented that button on my blog. It will be nice if you can make a tutorial on how to customize it. I hate the default color. : |

    Reply
  22. Calítoe.:. (Cristina MJ) says:
    Aug 13, 2010 at 3:59 pm

    I’ve noticed that the count displays horizontally even if one specifies data-count=”vertical”. Does anyone know what’s wrong with that?

    Reply
    • NG says:
      Jan 22, 2011 at 6:50 am

      I’m having the exact same problem. Any idea how to fix it?

      Reply
      • Editorial Staff says:
        Jan 24, 2011 at 10:16 am

        Refresh the page… This usually happens when the twitter script is not loading fine. Try placing the twitter script part in the head section.

        Reply
  23. CharityHisle says:
    Aug 13, 2010 at 2:28 pm

    I think I’ll stick to the tweetmeme version until the plugin is completely developed with all of the options for placement.

    Reply
  24. Rarst says:
    Aug 13, 2010 at 2:28 pm

    There isn’t much sense in filling out every setting, most of them work just fine without being set and will pick things like current URL and page title by default.

    Non-standard tag attributes will not validate (at least not as XHTML Transitional in my experience so far). Query arguments may not look as tidy, but they are more established and reliable.

    Reply
  25. Konstantin says:
    Aug 13, 2010 at 12:00 pm

    Alternatively, you could use WordPress’ very own add_query_arg() function, to create the url.
    Nice post though, and quick, too. ;)

    Reply
    • Editorial Staff says:
      Aug 13, 2010 at 2:31 pm

      Yup, we had to put it out quick because a lot of our twitter users said they wanted it.

      Reply
  26. Amie says:
    Aug 13, 2010 at 11:15 am

    Is there any chance I don’t have “The Loop” because I keep looking for this (or even a part of it) in my index file and it’s not there. Gah, I was hoping this would be easy! :-(

    Reply
    • Editorial Staff says:
      Aug 13, 2010 at 2:27 pm

      That really depends on what theme you are using. Every theme must have the loop to show the recent posts. You can try Otto’s plugin.

      Reply
  27. DJ NightLife says:
    Aug 12, 2010 at 10:02 pm

    I used to have Topsy buttons… was about to switch for the official button but… It seems this version have a problem recognizing the real count of tweets. I had a post of 52 tweets and now it shows 8.

    Reply
    • Otto says:
      Aug 13, 2010 at 9:20 am

      They’re only counting tweets since July.

      BTW, the new tweet button is fully supported by my Simple Twitter Connect plugin for WordPress. Just so you know. :)

      http://ottopress.com/wordpress-plugins/simple-twitter-connect/

      Reply
      • Editorial Staff says:
        Aug 13, 2010 at 2:28 pm

        Thanks Otto for updating your plugin. Your work is truly awesome :) Jut added the link in the post.

        Reply
  28. Ted Thompson says:
    Aug 12, 2010 at 4:45 pm

    Helpful article, many thanks!

    Reply
  29. josemv says:
    Aug 12, 2010 at 4:37 pm

    Excellent, thanx !
    Any chance to include custom url shorteners, such as cli.gs or bit.ly ?

    Reply
    • Editorial Staff says:
      Aug 12, 2010 at 11:26 pm

      No, twitter is using their very own service to verify the quality of link that is being tweeted.

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
All in One SEO
Improve website SEO rankings with AIOSEO plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
Cozmoslabs
Cozmoslabs Coupon
Get 15% OFF on Cozmoslabs WordPress premium plugins.
ShowThemes
ShowThemes Coupon
Get 20% off on ShowThemes beautiful WordPress themes for event websites.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.