Twitter

Tip: How to Use the Official Twitter Tweet Button

Recently I showed here how to create sharing buttons for different social media. At the time there was no official Twitter code for this purpose. But this week Twitter released it’s own Tweet Button. So I’ll quickly show how to use it.

Introduction

Recently I wrote the post Adding Share Buttons for Twitter, Facebook, Buzz and Others, where I explained how to create sharing buttons for some social media sites. But when I wrote that post, there was no official solution provided by Twitter itself. Now Twitter has made available their own code for this. So let’s see how it works.

Code

It’s quite simple and can be obtained in the following address Twitter / Tweet Button. Let me make it simpler and show the necessary code:

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://yourdomain.com" data-text="Share Text" data-count="vertical" data-via="oscardias">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

As you can see we can customize the following information:

  • data-url: link to be shared. If you delete this property, the page link will be shared by default. Twitter will also use their own URL shortener, so you don’t have to worry about that.
  • data-text: text to be shared. If you delete this property, the page title will be shared by default.
  • data-count: button style. I can contain the values: vertical, horizontal or none. The “vertical” value will show the counter above the button. The “horizontal” value will show the counter next to the button. And the value “none” will show only the button, without the counter.
  • data-via: Twitter’s username to be reshared.

You can also change the button text by replacing the text inside the link tags

Conclusion

This is all we need to add the official Twitter button. A lot of people is already changing Tweetmeme button for Twitter’s one, but the decision is up to you. Thanks for visiting.