可以设置自定义推文按钮并使用数据属性吗?

ign*_*aur 33 twitter styles tweets

我正在使用自己的样式创建自定义Tweet按钮,但是当您选择自定义自己时,您似乎无法使用数据属性(data-text,data-url等).当您使用使用小部件javascript(http://platform.twitter.com/widgets.js)的Twitter样式按钮时,数据属性的使用似乎才可用.

以下是一些来自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>
Run Code Online (Sandbox Code Playgroud)

现在,这里是'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>
Run Code Online (Sandbox Code Playgroud)

希望一切都有意义......

小智 54

出于某种原因,他们不允许您使用自定义按钮使用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">
Run Code Online (Sandbox Code Playgroud)

其他代码是相同的,只是添加&related=等.

确保用它代替任何空格%20.

  • 这有点过时,请在此处查看文档,使用查询字符串,但这显示了如何执行添加主题标签的操作:https://dev.twitter.com/web/tweet-button/web-intent (2认同)