替换推特按钮

Replacing twitter button

本文关键字：按钮 替换      更新时间：2023-09-26

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

问题是，如果我用我自己的类btn btn-social-icon btn-twitter btn-xs替换类twitter-share-button，数据文本就不再起作用了。

如何在保留数据文本等功能的同时用按钮替换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>

正如我所说，我们不能从不同的域更改 Iframe 的 CSS。所以这里有一个解决方案。我大部分时间都在使用它。它被称为Twitter Web Intent。

我希望这会有用。

附言请检查此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>

相关文章：