捕捉Twitter的点击“;Tweet”;按钮使用jQuery

capture the click of the Twitter "Tweet" button using jQuery

本文关键字：按钮 jQuery Tweet 捕捉 Twitter      更新时间：2024-06-30

我的网站上有以下代码，当它访问Twitter的API时，它会生成自己的标记。

尽管如此，我还是想在onClick上调用一个JavaScript函数，但随着标记的变化，它似乎并不像向锚添加onClick那么简单。

如何捕捉"推特"按钮的点击？

<div class="social_button twitter_button">
  <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">
    Tweet
  </a>
  <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>

您无法处理此元素上的点击事件，因为它在iFrame中，但是twitter为您提供了将事件绑定到按钮的机会。

示例：http://jsfiddle.net/ZwHBf/2/文档：https://dev.twitter.com/docs/intents/events

代码：HTML:

<div class="social_button twitter_button">
    <div id="foo">
        <a href="https://google.com" class="twitter-share-button" data-count="horizontal">
    Tweet
  </a>
    </div>
    <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
    <script type="text/javascript" charset="utf-8">
        window.twttr = (function (d, s, id) {
            var t, js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s);
            js.id = id;
            js.src = "//platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js, fjs);
            return window.twttr || (t = {
                _e: [],
                ready: function (f) {
                    t._e.push(f)
                }
            });
        }(document, "script", "twitter-wjs"));
    </script>
</div>​

JS:

twttr.events.bind('click', function(event) {
    console.log('clicked');
});​

在网站上添加自定义的Twitter按钮比你想象的要容易得多。

<a href="http://twitter.com/share">Tweet</a>

是的，真的，这就是全部。给你的链接一些设计爱和塔达！你自己的自定义推特按钮。

在弹出窗口中打开Twitter共享框

要将Twitter共享框显示为弹出窗口，只需添加几行javascript即可在新窗口中打开链接。下面是一个使用jQuery的例子：

<a class="twitter popup" href="http://twitter.com/share">Tweet</a>
<script>
  $('.popup').click(function(event) {
    var width  = 575,
        height = 400,
        left   = ($(window).width()  - width)  / 2,
        top    = ($(window).height() - height) / 2,
        url    = this.href,
        opts   = 'status=1' +
                 ',width='  + width  +
                 ',height=' + height +
                 ',top='    + top    +
                 ',left='   + left;
    window.open(url, 'twitter', opts);
    return false;
  });
</script>

注意：这只是一个例子。您可能希望将javascript代码放在.js文件中，并在文档就绪时调用它。

$(document).ready(function() {
  $('.popup').click(function(event) {
    // and so on...
  }
});

为推特设置默认消息

您可以为推特设置默认文本，并在链接中添加文本参数：

<a class="twitter popup" href="http://twitter.com/share?text=This%20is%20so%20easy">Tweet</a>

现在，当你的用户点击你的推文链接时，默认情况下，推文框中会出现"这太容易了"的消息。更多

相关文章：