web-dev-qa-db-fra.com

Peut-on styler un bouton Tweet personnalisé et utiliser les attributs de données?

Je crée un bouton Tweet personnalisé avec mes propres styles, mais il semble que vous optiez pour personnaliser votre propre, vous ne pouvez pas utiliser les attributs de données (texte de données, URL de données, etc.). L'utilisation des attributs de données semble disponible lorsque vous utilisez le bouton Twitter Styled qui utilise le widget JavaScript (http://platform.twitter.com/widgets.js).

Voici un certain code tiré du site Web Twitter Dev. Vous trouverez ci-dessous la touche Tweet à l'aide des 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, ci-dessous, voici le bouton "Construire votre propre" 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 a du sens ...

twitterstylestweets
33
igneosaur

Pour une raison quelconque, ils ne vous laisseront pas utiliser les attributs de données JavaScript avec un bouton personnalisé, vous devez donc les ajouter à l'URL de 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 les espaces avec %20 Et c'est tout.

54
JTP