javascript - capture the click of the Twitter "Tweet" button using jQuery - Stack Overflow

admin管理员组

文章数量:1299996

I have the following code on my site, which when it accesses Twitter's API generates it's own markup.

I'm looking to call a JavaScript function on the onClick even of this but, but as the markup changes it seems it's not as simple as just adding an onClick to the anchor.

How can I capture the click of the 'Tweet' button?

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

I have the following code on my site, which when it accesses Twitter's API generates it's own markup.

I'm looking to call a JavaScript function on the onClick even of this but, but as the markup changes it seems it's not as simple as just adding an onClick to the anchor.

How can I capture the click of the 'Tweet' button?

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

• javascript
• jquery
• twitter
• onclick

Share Improve this question Follow asked Aug 1, 2012 at 10:19 crmpiccocrmpicco 17.2k3131 gold badges138138 silver badges220220 bronze badges 1

• stackoverflow./questions/14421429/… – Pankaj Parkar Commented Jan 16, 2015 at 20:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You can't handle click events on this element, because it's in an iFrame, however twitter gives you the opportunity to bind events to the button.

Example: http://jsfiddle/ZwHBf/2/ Docs: https://dev.twitter./docs/intents/events

Code: HTML:

<div class="social_button twitter_button">
    <div id="foo">
        <a href="https://google." class="twitter-share-button" data-count="horizontal">
    Tweet
  </a>
    </div>
    <script type="text/javascript" src="//platform.twitter./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./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');
});​

Adding a customized Twitter button to your website is a lot easier than you might think.

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

Yes, really, that's all it takes. Give your link some design love and tada! Your very own custom Twitter button.

Opening the Twitter Share Box in a popup window

To show the Twitter Share Box as a popup, simply add some lines of javascript to open the link in a new window. Here's an example using jQuery:

<a class="twitter popup" href="http://twitter./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>

Note: This is just an example. You'll probably want to put the javascript code in a .js file and call it on document ready.

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

Setting a default message for the tweet

You can set a default text for the tweet adding a text parameter to the link:

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

Now when your users click on your Tweet link, the message "This is so easy" will appear in the tweet box by default. more..

本文标签： javascriptcapture the click of the Twitter quotTweetquot button using jQueryStack Overflow