Peut-on créer un bouton Tweet personnalisé ET utiliser les attributs de données ?

Question

Je suis en train de créer un bouton Tweet personnalisé avec mes propres styles, mais il semble que lorsque vous optez pour la personnalisation de votre propre bouton, vous ne pouvez pas utiliser les attributs de données (data-text, data-url etc.). L'utilisation des attributs de données semble uniquement disponible lorsque vous utilisez le bouton stylé Twitter qui utilise le widget javascript ( http://platform.twitter.com/widgets.js ).

Voici un code extrait du site Web de Twitter dev. Voici le bouton Tweet utilisant les attributs de données :

<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>

Maintenant, en dessous, il y a le bouton "Build your Own" Tweet :

<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>

J'espère que tout cela a un sens...

Answer 1

Pour une raison quelconque, ils ne vous laissent pas utiliser les attributs de données Javascript avec un bouton personnalisé. Vous devez donc les ajouter à l'URL dans votre HTML. Donc, pour votre exemple :

Vous ajouteriez alors &text=your%20text avec votre texte.

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

Les autres codes sont les mêmes, il suffit d'ajouter &related= etc.

Assurez-vous de remplacer tous les espaces par %20 et c'est tout.