How to create custom Twitter button with short URL

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!