CODEWITHSUNDEEP
javascripthtmltwitter
Mateu
Mateu

Reputation: 2698

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?

Upvotes: 23

Views: 27829

Answers (3)

Developer
Developer

Reputation: 214

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();
});

Upvotes: 0

Adan Luna
Adan Luna

Reputation: 11

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/

Upvotes: 0

nmoliveira
nmoliveira

Reputation: 1769

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

Upvotes: 36

Related Questions