• About
  • Advertise
  • Privacy & Policy
  • Contact
djavupixel.com
  • Home
  • Design
    • Fonts
    • Icons
    • Logo
    • Photography
    • Wallpapers
  • Development
    • CSS
    • JS
    • Web
  • WordPress
  • Contact
No Result
View All Result
  • Home
  • Design
    • Fonts
    • Icons
    • Logo
    • Photography
    • Wallpapers
  • Development
    • CSS
    • JS
    • Web
  • WordPress
  • Contact
No Result
View All Result
djavupixel.com
No Result
View All Result
Home Development

How to create custom Twitter button with short URL

djavupixel by djavupixel
October 3, 2010
in Development
5k
9
How to create custom Twitter button with short URL
15.5k
SHARES
50k
VIEWS
Share on FacebookShare on Twitter

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!

Tags: cssIconsTutorialTwitter
Previous Post

Best of Free Clean PSD Buttons ready for web2.0

Next Post

How to install WordPress, configure it and secure it

Next Post
How to install WordPress, configure it and secure it

How to install Wordpress, configure it and secure it

Comments 9

  1. Pingback: 150+ Articles: October's Review of Design Across The Web | nenuno creative
  2. Phil says:
    12 years ago

    Thank you.

    Reply
  3. David Bootle says:
    12 years ago

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

    Reply
  4. Akshay says:
    11 years ago

    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

    Reply
  5. Francis Boudreau says:
    11 years ago

    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 🙂

    Reply
  6. Neeraj says:
    10 years ago

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

    Reply
  7. alessandra says:
    10 years ago

    thank you SO MUCH! 🙂

    Reply
  8. mira says:
    10 years ago

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

    btw great share

    Reply
  9. Santosh Kumar says:
    9 years ago

    Very nice and beautiful script

    Reply

Leave a Reply Cancel reply

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

Categories

  • CSS
  • Design
  • Development
  • Fonts
  • Icons
  • JS
  • Logo
  • MacOS
  • Photography
  • Uncategorized
  • Wallpapers
  • Web
  • Wordpress

Tags

Air apple car Chrome city Coding communication Corporate Identity Cross Site Scriptings css Design e-Commerce Earth Extensions Free Google Gradient Styles grd Guideline Icons iPhone iPhone4 JavaScript jQuery Landscape Logo mac Nature Navigation osx Photography Photoshop php plugins PSD Sans-Serif security Serif setup SQL Injections Tutorial Water Wordpress WP e-Commerce xss
  • About
  • Advertise
  • Privacy & Policy
  • Contact

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Home
  • Review
  • Apple
  • Applications
  • Computers
  • Gaming
  • Gear
    • Audio
    • Camera
    • Smartphone
  • Microsoft
  • Photography
  • Security

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.