title: How to detect completed tweet made using Twitter intents and Javascript
body: <p>I'm totally new to programming Twitter, so please excuse my ignorance. I've tried to find a solution to this problem, but to no avail..</p>
  
  <p>In HTML I've got this:</p>
  
  <pre><code>&lt;a href='javascript: submit_with_twitter()'&gt;submit&lt;/a&gt;
  </code></pre>
  
  <p>I'm using my own button to trigger the tweet because the button is actually a 'submit and tweet' button, not just a standard 'tweet' button.</p>
  
  <p>in JS:</p>
  
  <pre><code>function submit_with_twitter() {
  
    twttr.events.bind('click', function (event) {
    alert("foo");
  });
  
  
      var myURL = encodeURIComponent("http://www.xxx.org.uk/compose-letter");
  
      var my_text = encodeURIComponent("blah blah");
      var url = "https://twitter.com/intent/tweet?url=" + myURL + "&amp;text=" + my_text + "&amp;via=xxx";
  
      window.open(url, "Twitter", "status = 1, left = 430, top = 270, height = 550, width = 420, resizable = 0");
  }
  </code></pre>
  
  <p>The twitter pop up window opens and the tweet can be posted successfully. But, 2 problems:</p>
  
  <p>1) the tweet is actually the first stage of the form submit process, so when the tweet has been made JS needs to detect this so it can trigger the form submission</p>
  
  <p>2) the pop up window does not close automatically</p>
  
  <p>If I manually include the twitter JS like so:</p>
  
  <pre><code>&lt;script type="text/javascript" src="//platform.twitter.com/widgets.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I get this console error when my JS function is called:</p>
  
  <pre><code>Uncaught TypeError: Object function a(e){if(!e)return;var t,r,i,o;n.apply(this,[e]),t=this.params(),r=t.size||this.dataAttr("size"),i=t.showScreenName||this.dataAttr("show-screen-name"),o=t.count||this.dataAttr("count"),this.classAttr.push("twitter...&lt;omitted&gt;...t' 
  </code></pre>
  
  <p>If I don't manually include the twitter JS, the tweet still works but there's no error message and nothing else happens.</p>
  
  <p>I should add that all this is being done in wordpress. I include my own JS file in the WP page editor, as this seems to work best generally, and I have added:</p>
  
  <pre><code>&lt;meta name="twitter:widgets:csp" content="on"&gt;
  </code></pre>
  
  <p>to the page. </p>
  
  <p>------------ EDIT ---------------------</p>
  
  <p>now I've got my JS like this:</p>
  
  <pre><code>jQuery(document).ready(function($) {
      // Code here will be executed on document ready. Use $ as normal.
  
       console.log("jQuery(document).ready");
  
      $.getScript('https://platform.twitter.com/widgets.js', function(){
    //  console.log("twttr: "+twttr);
      console.log("twttr object: %o", twttr);
       console.log("jQuery object: %o", jQuery);
  
    $(twttr).ready(function (twttr) {
         console.log("twttr ready, adding tweet handler");
  
  
  
  
         $(twttr.events).bind('tweet', function () {
           console.log("tweeted event!");
        });
  
          $(twttr.events).bind('click', function () {
           console.log("click event!");
        });
  
          $(twttr.events).bind('follow', function () {
           console.log("follow event!");
        });
      });
  
  
  });
  
  });
  </code></pre>
  
  <p>which gets rid of all errors, the tweet window now closes itself and all the console logs are seen as expected, except for those which should appear after the tweet is made.</p>
  
  <p>Basically, everything seems fine except that the tweet event is never caught! </p>