I have been using the services for TweetMeme for some time now, but recently Twitter recently released their very own Tweet Button. This peaked my interested because Twitter has been well-known for their open API which allows you to do a number of things. Since sharing links is a popular activity on Twitter, the company wanted to make it easier for people to do without seeking out third-party applications. In four simple steps, your site can have the new Tweet Buttons too.
Before you begin you will need to go to the Goodies section on Twitter and click on Tweet Buttons. The page makes it very simple for you to follow the instructions.
1. Choose your button and customize it (optional).
There are four different ways to customize your button. First select the style of button you would like: vertical, horizontal or no count. Click on Tweet Text to determine what the text should say. You can leave it by default to say the name of the page the button is on or a different set of text. If you’re running a blog this is important on your pages in which you list other posts. You may then enter a URL or leave it to default to the current page the button is on. The final customization is choosing a language. English is set to default so it may be likely you’ll skip this option unless you’re running a multi-lingual site.
2. Recommended people to follow (optional).
By default this may already be set on your Twitter user name; however, you have the option to recommend up to two Twitter accounts for users to follow by using this tool. This is a feature that was not available for TweetMeme, and I would imagine in time they will increase this limit if it turns out to be popular.
3. Copy the code provided by Twitter.
Once you’re done making your selections Twitter will have created the code for you. In the box to the right of the button example, select all the text and copy. It may look similar to this:
<a href=”http://twitter.com/share” data-count=”vertical” data-via=”bcoppernoll”>Tweet</a>
<script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>
4. Paste the code into your site.
Whether you are using WordPress, another CMS or simply have code it’s as simple as pasting the code into your website. The code above uses the name and URL of the page it’s on, but with some modifications you can easily create buttons that link to other pages and titles. There may be some legwork that needs to be accomplished on design, but it’s nothing that a simple CSS class can’t solve.
If you’re looking for something a little more advanced.
I am using WordPress 3. On my home page and other search pages I needed a way for the buttons to display the titles and URLs for each post on these pages. Here is a piece of sample code on how I addressed it.
<div class=”twitter-button”><a href=”http://twitter.com/share” data-text=”<?php the_title(); ?>” data-url=”<?php the_permalink() ?>” data-count=”vertical” data-via=”bcoppernoll”>Tweet</a>
<script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script></div>
The two key elements that are different from the basic Tweet Button was I added data-text and data-url attributes and applied code to dynamically insert the title and URL of the post in the list. This allows me to allow the users to share without going into the post first.
I placed the Tweet Button code into a div with a class of “twitter-button” to handle positioning against my content. Here is the snippet of CSS code which should get you on your way.
div.twitter-button { float: left; margin-right: 10px; margin-bottom: 1px; }
Your design may call for a differing look and feel, but my main goal was to show how simple it was to make changes to the button and get it to meet your needs. A few lines of code can go a long way. If you’re interested in other ways to customize your buttons I would suggest the Tweet Button API.
