javascript - 带有事件的 Twitter 按钮的自定义设计

Question

我有一个自定义推文按钮：

<a href="http://twitter.com/share?url=http://example.com;text=myText;size=l&amp;count=none" target="_blank">
    <div>
        <img src="/assets/twitter-logo.jpg">
        <span>Twitter</span>
    </div>
</a>

现在我想在推文发布后取得一些成果。为此，我查看了 Twitter 事件 API：

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript">
    twttr.events.bind('tweet', function (event) {
        alert("Tweet Successful");
    });
</script>

但是，此 API 仅适用于非自定义按钮（twitter-share-button类）。

有人设法创建了一个自定义按钮来监听事件吗？

Answer 1

你可以有一个自定义链接，但仍然有网络意图！

关键是，您的链接不应指向“ https://twitter.com/share ”，而应指向“ https://twitter.com/intent/tweet ”

像这样：

<a href="https://twitter.com/intent/tweet">Tweet</a>

这样您就可以像尝试一样使用网络意图：

twttr.events.bind('tweet', function (event) {
  // Do something there
  alert('Tweeted');
});

检查这个jsFiddle

Answer 2

我有一个分享动作

<a href="https://twitter.com/share" class="twitter-share-button" data-via="pincheregio" data-size="large" data-count="none">Tweet</a>

<script>
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

      twttr.ready(function (twttr) {
        twttr.events.bind('tweet', function (event) {
        alert("paso");
      });

    });
</script>

http://jsfiddle.net/aXCNX/139/

Answer 3

不要在“推特”活动上浪费您的时间。与其他社交网络不同，即使推文成功完成或用户刚刚关闭窗口，推特也会触发此功能。所以改为使用下面的代码：

jQuery('#twitter').off('click').on('click', function() {
  var field_list = {
    url: 'https://example.com/',
    text: 'Some random text',
    hashtags: 'myhashtag,anothertag',
  }
  window.open('https://twitter.com/share?'+jQuery.param(field_list), '_blank', 'width=550,height=420').focus();
});