Take the 2-minute tour ×

I am creating a custom Tweet button with my own styles however it seems when you opt for customising your own you cannot use the data attributes (data-text, data-url etc.). The utilisation of the data attributes only seem available when you use the Twitter styled button that uses the widget javascript (http://platform.twitter.com/widgets.js).

Here is some code taken from the Twitter dev website. Below is the Tweet button using the data attributes:

    data-related="anywhere:The Javascript API"

Now below here is the 'Build your Own' Tweet button:

  #custom-tweet-button a {
    display: block;
    padding: 2px 5px 2px 20px;
    background: url('http://a4.twimg.com/images/favicon.gif') left center no-repeat;
    border: 1px solid #ccc;
<div id="custom-tweet-button">
  <a href="http://twitter.com/share?url=http%3A%2F%2Fdev.twitter.com%2Fpages%2Ftweet-button" target="_blank">Tweet</a>

Hopefully that all makes sense...

share|improve this question
add comment

1 Answer

up vote 32 down vote accepted

For some reason they won't let you use the Javascript data attributes with a custom button so you have to add them to the URL in your HTML. So for your example:

You would then add &text=your%20text with your text.

<a href="http://twitter.com/share?url=http%3A%2F%2Fdev.twitter.com%2Fpages%2Ftweet-button&text=my%20text%20here" target="_blank">

The other codes are the same, just add &related= etc.

Make sure you replace any spaces with %20 and that is it.

share|improve this answer
That's the one. Cheers. –  igneosaur Mar 9 '11 at 17:47
i needed this answer for so long!!! thanks! –  juanchod Dec 10 '13 at 11:24
add comment

Your Answer


