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 Custom Twitter Button Tutorial

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:

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 Custom Twitter Button Tutorial

We also added how to create the orginal twitter button with no counter, vertical counter or horizontal counter!

This entry was posted in Development and tagged , , , .

9 Responses to How to create custom Twitter button with short URL

  1. Pingback: 150+ Articles: October's Review of Design Across The Web | nenuno creative

  2. Phil says:

    Thank you.

  3. David Bootle says:

    Is it possible to have a custom button AND a counter (also customised)?

  4. Akshay says:

    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

  5. 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 🙂

  6. Neeraj says:

    To track the number of clicks, use Event Tracking feature of Google Analytics. Capture the click event on tag.

  7. alessandra says:

    thank you SO MUCH! 🙂

  8. mira says:

    Here is tutorial on how to retrieve the count: tweet counter

    btw great share

  9. Very nice and beautiful script

Leave a Reply

Your email address will not be published. Required fields are marked *