Can one style a custom Tweet button AND utilise the data attributes?

twitter styles tweets
igneosaur picture igneosaur · Dec 22, 2010 · Viewed 26.6k times · Source

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:

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<div>
  <a href="http://twitter.com/share" class="twitter-share-button"
    data-url="http://dev.twitter.com/pages/tweet_button"
    data-via="twitterapi"
    data-text="Checking out this page about Tweet Buttons"
    data-related="anywhere:The Javascript API"
    data-count="vertical">Tweet</a>
</div>

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

<style type="text/css" media="screen">
  #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;
  }
</style>
<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>
</div>

Hopefully that all makes sense...

Answer

JTP picture JTP · Mar 2, 2011

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.

Related questions

Find objects between two dates MongoDB

I've been playing around storing tweets inside mongodb, each object looks like this: { "_id" : ObjectId("4c02c58de500fe1be1000005"), "contributors" : null, "text" : "Hello world", "user" : { "following" : null, "followers_count" : 5, "utc_offset" : null, "location" : "", "profile_text_color" : "000000", "friends_count" : 11, "profile_…

Read More
Simplest PHP example for retrieving user_timeline with Twitter API version 1.1

Because of the Twitter API 1.0 retirement as of June 11th 2013, the script below does not work anymore. // Create curl resource $ch = curl_init(); // Set url curl_setopt($ch, CURLOPT_URL, "http://twitter.com/statuses/user_timeline/myscreenname.json?count=10"); // Return …

Read More
Sharing a URL with a query string on Twitter

I'm trying to put a Twitter share link in an email. Because this is in an email I can't rely on JavaScript, and have to use the "Build Your Own" Tweet button. For example, sharing a link to Google: <…

Read More