更换推特按钮

Question

我设计了自己的 Twitter 按钮，以更好地适应我网站的图形章程。 为此，我使用了 Boostrap 的社交按钮。

问题是，如果我将 twitter-share-button 类替换为我自己的类 btn btn-social-icon btn-twitter btn-xs，data-text 将不再起作用。

如何在保留 data-text 等功能的同时用我的按钮替换 twitter-share-button？

这是来自 twitter 的工作代码，我想在其中替换类：

    <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
    <div>
       <a href="https://twitter.com/share" class="twitter-share-button"
          data-url="https://dev.twitter.com/pages/tweet_button"
  data-via="your_screen_name"
          data-text="Checking out this page about Tweet Buttons"
          data-related="anywhere:The Javascript API"
          data-count="vertical">Tweet</a>
    </div>

Answer 1

正如我所说，我们不能从不同的域更改 iframe 的 CSS。所以这是一种解决方案。我用了这个most of the time。它被称为 Twitter Web Intent。

我希望这会有用。

P.S 请检查此jsbin 链接。不知何故 jsfiddle 不支持。

$(document).ready(function() {
  $('#tweetBtn').click(function() {
    var url = 'https://twitter.com/intent/tweet?hashtags=YouAreAwesome&original_referer=' + encodeURIComponent('stackoverflow.com') + '&text=' + encodeURIComponent('Thank you so much @knowkalpesh, you made my day!');
    window.open(url, '_blank');
  });

});

#tweetBtn {
  background: tomato;
  padding: 10px;
  display: inline-block;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tweetBtn">Custom Tweet Button</div>