Можно ли стилизовать пользовательскую кнопку Tweet И использовать атрибуты данных? - PullRequest
Новая
       0

Можно ли стилизовать пользовательскую кнопку Tweet И использовать атрибуты данных?

33 голосов
/ 22 декабря 2010

Я создаю пользовательскую кнопку Tweet со своими собственными стилями, однако, когда вы выбираете свою собственную настройку, вы не можете использовать атрибуты данных (data-text, data-url и т. Д.). Использование атрибутов данных представляется доступным только при использовании кнопки в стиле Twitter, которая использует JavaScript виджета (http://platform.twitter.com/widgets.js).

Вот некоторый код, взятый с сайта разработчика Twitter. Ниже кнопка Tweet, использующая атрибуты данных: 

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

Теперь вот кнопка «Построй свой собственный» 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>

Надеюсь, что все имеет смысл ...

1 Ответ

54 голосов
/ 02 марта 2011

По какой-то причине они не позволят вам использовать атрибуты данных Javascript с пользовательской кнопкой, поэтому вам нужно добавить их в URL в вашем HTML.Итак, для вашего примера:

Затем вы добавите &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 и все.

...