As you may know twitter allows you to build your own Tweet Button. In this example we will take the tweet button and add an image with 3 states using CSS.
Today we have a quick tutorial on how to create our custom Twitter button with (twitter -> http://t.co/) URL shortener.
Preview | Download [download id=”2352″ format=”5″]
We also added how to create the orginal twitter button with no counter, vertical counter or horizontal counter!
Choose or design a button
You can create or download a button, but remeber we need 3 states:
- Link (the “normal” button)
- Hover (on mouse over)
- Active (when link is pressed, mouse down)
For this tutorial we took the twitter button below created by Jord Riekwel. Download this and the other buttons (facebook, linkedin, myspace, rss) here.
Here are some links for more twitter icons:
- Ultimate Collection of Social Media Icons
- Friday Freebies: Flavours Icon Set And Cute Tweeters Icon Set
- Freestyle and Square, Two Free Social Media Icon Sets
Styling the button with CSS
#custom-tweet-button a { background: url('twitter-button.png') 0 0 no-repeat; display: block; width: 54px; height: 52px; } #custom-tweet-button a:hover { background: url('twitter-button.png') 0 -53px no-repeat; } #custom-tweet-button a:active { background: url('twitter-button.png') 0 -106px no-repeat; }
Twitter API
Here is a quick and dirty piece of the twitter api.
The properties in this table can be used by the javascript, iframe and build your own Tweet Buttons. Each property is a query string parameter for the http://twitter.com/share URL.
Query String Parameter Description
- url – URL of the page to share
- via – Screen name of the user to attribute the Tweet to
- text – Default Tweet text
- related – Related accounts
- count – Count box position
- lang – The language for the Tweet Button
- counturl – The URL to which your shared URL resolves to
With our button we can only use: url, via, text, related and counturl.
HTML code of the button
PHP code for WordPress
For WordPress
Finished
This was a quick tutorial. You can download or preview the tutorial on the buttons below.
Preview | Download [download id=”2352″ format=”5″]
We also added how to create the orginal twitter button with no counter, vertical counter or horizontal counter!
Thank you.
Is it possible to have a custom button AND a counter (also customised)?
Thanks for the post. All working fine for me but the URL doesn’t seems to be like Shortened. Even in your preview code url are not shortened automatically.
Any way to achieve it??
Thanks in advance
Thank you very much for this tutorial! Exactly what I was looking for. I’m on WordPress and it’s nice that you included the code for WordPress. Works like a charm 🙂
To track the number of clicks, use Event Tracking feature of Google Analytics. Capture the click event on tag.
thank you SO MUCH! 🙂
Here is tutorial on how to retrieve the count: tweet counter
btw great share
Very nice and beautiful script