可以为自定义推文按钮设置样式并利用数据属性吗？

Question

可以为自定义推文按钮设置样式并利用数据属性吗？

34

我正在创建一个自定义的推特按钮并加入自己的样式，但似乎当您选择自定义时，无法使用数据属性（如data-text、data-url等）。只有在使用使用小部件JavaScript的Twitter样式按钮时才能使用数据属性（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>

现在以下是“创建您自己的”推文按钮：

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

希望这一切都很清晰明了。

- igneosaur

嗨@igneosaur，请在大多数情况下使用我的更改并点击“改进”按钮，而不是拒绝它 :-) - Michael Sørensen

1

@MichaelSørensen 抱歉，老兄，是我不好。我在看的时候不小心按错了鼠标，点错了按钮。我不太擅长网站工作。无法撤销，所以从你那里偷了修改。我是一个编辑抢劫犯。 - igneosaur

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JTP · Accepted Answer

因为某种原因，你不能在自定义按钮中使用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即可。