Custom design for Twitter button with events

I’ve got a custom tweet button:

<a href="http://twitter.com/share?url=http://example.com;text=myText;size=l&amp;count=none" target="_blank">
    <div>
        <img src="/assets/twitter-logo.jpg">
        <span>Twitter</span>
    </div>
</a>

Now I want to achieve some result after the tweet has been published. To do so, I’ve looked at the Twitter Events API:

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript">
    twttr.events.bind('tweet', function (event) {
        alert("Tweet Successful");
    });
</script>

However, this API only works on non-custom buttons (twitter-share-button class).

Anyone has managed to create a custom button which listens to events?

You can have a custom link and still have the web intents!

The key is, instead of your link pointing to “https://twitter.com/share” it should point to “https://twitter.com/intent/tweet

like this:

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

This way you can use the web intents like you were trying:

twttr.events.bind('tweet', function (event) {
  // Do something there
  alert('Tweeted');
});

Check this jsFiddle

I got some one with a share action

<a href="https://twitter.com/share" class="twitter-share-button" data-via="pincheregio" data-size="large" data-count="none">Tweet</a>

<script>
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

      twttr.ready(function (twttr) {
        twttr.events.bind('tweet', function (event) {
        alert("paso");
      });

    });
</script>

http://jsfiddle.net/aXCNX/139/

DO NOT WASTE your time with “tweet” event. Unlike other social networks, twitter will fire this even regardless was the tweet successfully completed or user just closed the window. So instead use code bellow:

jQuery('#twitter').off('click').on('click', function() {
  var field_list = {
    url: 'https://example.com/',
    text: 'Some random text',
    hashtags: 'myhashtag,anothertag',
  }
  window.open('https://twitter.com/share?'+jQuery.param(field_list), '_blank', 'width=550,height=420').focus();
});


The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   gapless looping audio html5

Similar Posts