使用jQuery捕獲Twitter“Tweet”按鈕的單擊

Question

我在我的網站上有以下代碼，當它訪問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>

Answer 1

您無法處理此元素上的點擊事件，因為它位於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');
});​

Answer 2

向您的網站添加自定義Twitter按鈕比您想象的要容易得多。

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

是的，真的，這就是全部。 給你的鏈接一些設計愛和tada！ 你自己的自定義Twitter按鈕。

在彈出窗口中打開Twitter Share Box

要將Twitter Share Box顯示為彈出窗口，只需添加一些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>

現在，當您的用戶點擊您的推文鏈接時，默認情況下會在推文框中顯示“這很簡單”的消息。 更多..

Answer 3

你可以嘗試用jquery ...

<script>
        $(document).ready(function(){
    $(".twitter-share-button").on("click",function(){
        // do something
        });
    });
</script>

我懷疑即使標記發生變化，課程也會改變。