Hi Guys,
While I was working on a plugin for WordPress I have to write fair bit of code to get the social stuff happening. Callbacks are necessary from all the major Social buttons that users interact with. Be it Facebook, Google Plus, Twitter or LinkedIn.
In this post I will show you exactly how to add a Twitter’s Tweet button with a callback in your page that will print “Tweet successful” on Javascript Console once user tweets.
1. The Markup
Everything that I will show here is from Twitter
|
1 |
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://jaspreetchahal.org" data-text="Check this out" data-via="jschahal" data-dnt="true">Tweet</a> |
You should change all the data values in the code as per your requirements
Next steps is to include twitter Javascript API
2. Twitter API
Put this code somewhere in your body tag
|
1 2 3 4 5 6 7 8 |
<script> 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="https://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> |
|
1 |
Now that we have window.twttr object available its time to bind some events supported by twitter
3. Event Handler
Place this code before the body end tag and after the above code, but that’s just me saying that
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
twttr.ready(function (twttr) { twttr.events.bind('tweet', function (event) { console.log("Tweet successful"); }); // other events that twitter supports twttr.events.bind('follow', function (event) { var followed_user_id = event.data.user_id; var followed_screen_name = event.data.screen_name; console.log("Followed User ID: "+followed_user_id ); console.log("Followed Screen Name: "+followed_screen_name ); }); twttr.events.bind('retweet', function (event) { var retweeted_tweet_id = event.data.source_tweet_id; console.log("ReTweet successful for tweet ID: "+event.data.source_tweet_id); }); twttr.events.bind('favorite', function(event) { var favorited_tweet_id = event.data.tweet_id; console.log("Tweet Favorited successfully for tweet ID: "+event.data.source_tweet_id); }); }); |
As you can see that its that simple. I can go on and explain other events stuff here too but its just me re-writting what Twitter documentation already have for you. So just go and check it out here
https://dev.twitter.com/docs/intents/events
I hope that this helps
Thanks its working. But Sir i need to show alert box on my website after successful tweet.