How to Add a Custom Twitter Button to Your Website

Irene Morente

Adding a customized Twitter button to your website is a lot easier than you might think.

<a href="http://twitter.com/share">Tweet</a>

Yes, really, that's all it takes. Give your link some design love and tada! Your very own custom Twitter button.

Opening the Twitter Share Box in a popup window

To show the Twitter Share Box as a popup, simply add some lines of javascript to open the link in a new window. Here's an example using jQuery:

<a class="twitter popup" href="http://twitter.com/share">Tweet</a>

<script>
  $('.popup').click(function(event) {
    var width  = 575,
        height = 400,
        left   = ($(window).width()  - width)  / 2,
        top    = ($(window).height() - height) / 2,
        url    = this.href,
        opts   = 'status=1' +
                 ',width='  + width  +
                 ',height=' + height +
                 ',top='    + top    +
                 ',left='   + left;
    
    window.open(url, 'twitter', opts);
 
    return false;
  });
</script>

Note: This is just an example. You'll probably want to put the javascript code in a .js file and call it on document ready.

$(document).ready(function() {
  $('.popup').click(function(event) {
    // and so on...
  }
});

Setting a default message for the tweet

You can set a default text for the tweet adding a text parameter to the link:

<a class="twitter popup" href="http://twitter.com/share?text=This%20is%20so%20easy">Tweet</a>

Now when your users click on your Tweet link, the message "This is so easy" will appear in the tweet box by default.

Want to learn more? Check out Twitter's thorough documentation on building Tweet buttons.

Enjoy :)

« Back to Blog Index

Sign up now

30 days free trial. Sign up in 60 seconds. Upgrade, downgrade, cancel at any time.
×
blog comments powered by Disqus