web-dev-qa-db-ja.com

カスタムツイートボタンのスタイルを設定して、データ属性を利用できますか？

私は自分のスタイルでカスタムツイートボタンを作成していますが、独自のカスタマイズを選択すると、データ属性（data-text、data-urlなど）を使用できないようです。データ属性の使用は、ウィジェットのjavascript（http://platform.Twitter.com/widgets.js）を使用するTwitterスタイルのボタンを使用する場合にのみ利用できるようです。

以下は、Twitter開発Webサイトから取得したコードの一部です。以下は、データ属性を使用したツイートボタンです。

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

以下が「Build your Own」ツイートボタンです。

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

うまくいけば、すべてが理にかなっています...

twitterstylestweets
33
igneosaur

何らかの理由で、カスタムボタンでJavascriptデータ属性を使用できないため、HTMLのURLに追加する必要があります。だからあなたの例では：

次に、テキストとともに&text=your%20textを追加します。

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

他のコードは同じですが、&related=などを追加するだけです。

スペースは必ず%20に置き換えてください。

54
JTP