Twitter recently released official tweet buttons to make it easier for content publishers to make it easy for their readers to tweet content they’re viewing. In addition to easier visitor tweeting, it’s easy to view the tweet count for that given content.
Let’s take a look at how to use Twitter’s new tweet buttons and how it can be integrated with third-party services like Bit.ly.
Basic Tweet Button
Head over to http://twitter.com/tweetbutton and you’ll be able to setup your tweet button in three quick steps, assuming you’re already signed in.
Tweet Button Step 1
Step 1
You’ll start by selecting your desired button style; vertical count, horizontal count or no count. You can optionally set specific Tweet text or just go with the default setting which will use the title of the page the button is on.
Tweet Text
You can also optionally select a custom URL or the default which will use the URL for the page the button is on. Lastly, you can optionally select a language other than the default of English.
Step 2
In step two you’re able to recommend up to two accounts for users to follow after they share content from your site. If you’re signed in when you create your Tweet button it will automatically fill in your account for the first recommendation.
Recommend Accounts
Step 3
The only thing left to do is get your Tweet button code and insert it into your site wherever you want it to appear.
Get Code
Here’s our Tweet button for this specific article. Feel free to give it a tweet!
Tweet Button Window
Third-Party Shorteners
Although Twitter’s new Tweet button is nice, it doesn’t provide the analytics and other great features you get with third-party shorteners such as Bit.ly. Fortunately you can use the Tweet button with your URL shortener, even if it uses your own custom URL.
To do this, simply add “?url=YOUR-URL-HERE” to the end of the “http://twitter.com/share” URL within the code provided by Twitter’s Tweet button “creator”. You can alternatively add “data-url=”http://enva.to/caJthb”” to the anchor.
For example, “<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://enva.to/caJthb" data-count="horizontal" data-via="webappstorm">Tweet</a>
The URL you want to pass through needs to be URL encoded (unless passing it via data-url). Here’s an encoder/decoder hosted by meyerweb.com
Here’s an example of a Tweet button for this page, which will pass our custom shortened URL (http://enva.to/caJthb) to Twitter. This makes it easy to track your links!
Custom Shortener
Get more information on the Tweet Button and ways to use it from Twitter’s Tweet Button documentation.
Don’t Forget, Subscribe and Follow
Be sure to subscribe to our feed and follow us on Twitter for more great web app reviews, how-tos, roundups and giveaways!