capture the click of the Twitter “Tweet” button using jQuery

Question

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 onCli

Answer 1

You may try it with jquery...

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

I doubt the class will change even if the markup changes.

Answer 2

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.net/ZwHBf/2/ Docs: https://dev.twitter.com/docs/intents/events

Code: 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 3

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

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

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.com/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..