Twitter button.

On 03.28.07, In Buttons, Design, By Adriano

Here is a Twitter button that I did with Photoshop CS2 and that you can use on your website or blog to drive users to your Twitter profile!

Twitter is a social networking service, where members can inform each other about “what they are doing” or “what they think“. It’s a little bit like sending sms but in broadcast! It’s possible to send messages via phone, instant messaging or the Twitter website. Other users (twitters? :) ) can receive updates via web, IM, or SMS.

Ok now the buttons. It actually took me 5 or 10 mins only to do them. I created the button from zero using a round shape and playing with the “Blending options” of the “Layer style”. Then I just added the t letter making it similar to the one from the twitter’s logo.

Buttons

Here are the 120×120 and 70×70 pixels versions of the Twitter button with a transparent background that you can place on any background color of your website:

120x120 transparent

120x120 transparent background

70x70 transparent

70x70 transparent background

Buttons are free to grab but please leave some feedback if you are using it! ;)

Instructions

Due to the number of requests received, I’ll also explain here briefly how to use the button on your website:

  1. Upload the button image above to the server where your website is hosted or to a 3d party service as Twitpic.
  2. Get the URL of the image, that is the link to the image location.
  3. If you use Twitpic, after you upload the image you can click on “Put this photo on your website” and you’ll get the following code: 
    <a title="Twitter button 120x120 pixels - MilkAddict on Twitpic" href="http://twitpic.com/1ebqu7"><img src="http://twitpic.com/show/thumb/1ebqu7.png" alt="Twitter button 120x120 pixels - MilkAddict on Twitpic" width="150" height="150" /></a>

    You can modify this for use on your website. You need to set the image size to for example 120×120 instead of 150×150 and to change the link of the image to your own twitter account. Here is an example with my Twitter account link:

    <a title="MilkAddict Twitter account" href="http://twitter.com/milkaddict"><img src="http://twitpic.com/show/thumb/1ebqu7.png" alt="Twitter button 120x120 pixels - MilkAddict on Twitpic" width="120" height="120" /></a>
  4. In case you host the image on your own website simply get the link to the location where the image is and add the link to your twitter account. Again it will look like this: 
    <a title="MilkAddict Twitter account" href="http://twitter.com/milkaddict"><img src="http://your_website_address.com/images/button.png" alt="Twitter button" /></a>
  5. Include the html code above in the place on your website where you want the button to appear!

Featured on

My button is featured on the following websites:

Do you like this? Check out also my other Social Networking buttons!

FacebookTwitterPinterestBlogger PostMySpaceDiggTechnorati FavoritesDeliciousShare
Tagged with: app • art • badge • button • design • download • guests • icon • image • instagram • link • networking • photoshop • png • social • twit • twitter • visitors • website
 
156 Comments
Leave A Response

156 Responses to “Twitter button.”

    Glad I could help! and good to see that the button looks great as well ;)

    2. thanks! these are really cool!

    3. Just what we are lookimg for! PERFECT :-)

    4. Hi

    I’ve used one of your buttons for my Blog.

    Thanks for this useful resource.

    5. You’re welcome :)

    6. Thanks for this! I’m going to use on home page.

    7. cool buttons…will use for sites developed

    8. love the button! working on email links and such.

    9. Thank you, they are simple and to the point:)

    10. Love it, thanks!

    11. hey, thanks!

    12. Hi,

    I think your buttons are amazing…I want to put these buttons on my website but I don’t know how….

    Can you school me?

    13. Thanks! Sure. Upload the button image on your website and write down the address. The image code would be: <img src=”http://thewebsiteaddress.com/images/example.png”;/>.

    To create then on your website a button that links to your twitter or facebook etc. you need to add a link to the image as well. You need to use some code like: <a href=”http://www.facebook.com/myprofile”;><img src=”http://mywebsiteaddress.com/images/facebook_button.png”;/></a>.

    I hope this helps! :)

    14. Thank you soo much!

    15. Thank you.

    16. thanks!

    17. Hi there. my grandfather let me know about your website a few months ago, and I absolutely like it. I will be back! Right on!

    18. We are going to be using your button when the new site goes live (at least it’s on the draft now) thanks so much!!!

    aloha!

    19. Wow!! thanks, greetings to Hawaii! wish I could visit there sometimes :)

    20. Thanks for the button.

    21. Just what I was looking for, thx.

    22. Hi i am so pleased I found your blog, I really found you by mistake, while I was searching Yahoo for something else, At Any Rate I am here now and would just like to say thank you for a wonderful blog posting and a all round intriguing blog (I also love the theme/design), I do not have time to read it all at the right now but I have bookmarked it and also added your RSS feeds.

    23. Love them :)

    24. thanks for sharing!
    cool button:)

    25. A beautiful & simple Twitter button – just what I was looking for. Thanks!

    26. Thanks for the beautiful button! :)

    27. perfection! thanks- you ROCK!!

    28. Wonderful.. thanks.. was looking for a small, simple button to use on my site. Good job!

    29. It’s beautiful, I’ll use it! THANKS!!!

    30. Getting Followers on Twitter is the crucial part of marketing your product or service to all over the world using twitter but automation is the most important way to get you there, you definitely must have tools to automate the process.

    31. how do i get it to work and add my twitter site to it so when people click on the button it will work???

    32. Hi! I just updated the post with some instructions about how to use the button on your website. Please also check the other buttons on my Buttons page. Enjoy! :)

    33. i’ll be using this on my site! thanks a lot!

    34. Nice button, I will consider to use it on my website.

    Thank you.

    35. I was searching for Twitter button. These are really very nice buttons. Thank you.

    36. Need this info for my site! Thanks :)

    37. Thank you for the button. It’s fantastic!

  37. Storyteller Girl says:
    May 14, 2010 at 4:35 am

    38. Thanks for sharing and for the very user-friendly instructions!

    39. Would actually like to use a button in my email, but haven’t figured out how to do it yet.

    40. Pretty nice, thanks a lot..
    Today Infolicious

  40. budi marvic says:
    May 23, 2010 at 6:25 pm

    41. Great Button. Thnx

    42. Cool button, Thank you!

    43. Looks cool, thanks! :D

    44. Using the button for a post on http://www.tengrrl.com/

    45. Thanks for the great 70×70 button – added! Good instructions too. Easy and worked first time.

    46. thank you! I’m using your button on my sidebar

    47. Thanks so much, these are really professional looking and I like how they do not have too much text. I don’t like it when it says FOLLOW MY EVERY MOVE ON TWITTER NOW!

    Futhark Lifehack – Build Your Ideal Life

    48. Awesome! Love the clean, simple design. Just added it to my blog. :)

    49. Thank you for the use of the twitter button!

    50. Thank you so much for this valuable information! I would never been able to figure out how to do this without your instructions. :-)

« Older Comments
Newer Comments »

Leave a Reply



Go To Top »