CODEWITHSUNDEEP
javascriptjquerywordpresstwitter
Mike Timberlake
Mike Timberlake

Reputation: 63

How to detect completed tweet made using Twitter intents and Javascript

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

In HTML I've got this:

<a href='javascript: submit_with_twitter()'>submit</a>

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.

in JS:

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 + "&text=" + my_text + "&via=xxx";

    window.open(url, "Twitter", "status = 1, left = 430, top = 270, height = 550, width = 420, resizable = 0");
}

The twitter pop up window opens and the tweet can be posted successfully. But, 2 problems:

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

2) the pop up window does not close automatically

If I manually include the twitter JS like so:

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

I get this console error when my JS function is called:

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...<omitted>...t'

If I don't manually include the twitter JS, the tweet still works but there's no error message and nothing else happens.

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:

<meta name="twitter:widgets:csp" content="on">

to the page.

------------ EDIT ---------------------

now I've got my JS like this:

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!");
      });
    });


});

});

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.

Basically, everything seems fine except that the tweet event is never caught!

Upvotes: 0

Views: 1809

Answers (1)

Mike Timberlake
Mike Timberlake

Reputation: 63

Ok,

For future sufferers, I finally figured out that twitter was being set up elsewhere in wordpress, so there was no need to use 

$.getScript('https://platform.twitter.com/widgets.js', function(){}

or 

<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>

or any other attempt to set up twitter widgets.

I haven't looked into which plugin (if any) is causing twitter to be initialised..

Also, if the page does not contain an HTML twitter link, something like this:

<a href='https://twitter.com/intent/tweet' >Tweet Test</a>

twitter is not initialised, so events cannot be detected. So, it's easiest to trigger the tweet normally using the link, then use the captured tweet event to run any subsequent JS, rather than using JS to trigger the tweet

Upvotes: 2

Related Questions