Recently, I’ve been creating an app that rewards users for tweeting messages. However, I wanted to avoid using OAuth authentication and full integration of the Twitter API but still be able to reward users for tweeting. Luckily, I found a way of doing so using the Tweet button and something called Web Intents.
The Twitter JavaScript API needs to be used (which is simple to integrate by copy-and-pasting the plugin code into your page). The functionality works as follows:
- User presses tweet button
- User logs into twitter (in popup) if they are not already logged in
- User previews message and confirms the tweet (in popup)
- Tweet is posted and popup closes
- JavaScript callback is triggered
The Tweet button handles steps 2-5 above so the only points of integration required are adding the tweet button and the callback implementation.
I integrated the Tweet button as follows:
Then, I added some extra JavaScript to the page to listen for the callback and trigger the function to reward the user:
Once a tweet has been posted, twitter will trigger the tweet event. The web intent we created will listen for the tweet event and then trigger the reward_user function.
Simples!
UPDATE (28th April 2014):
The code has been updated after Ryan spotted that the previous code was no longer working. You can see the working version of the new code on JSFiddle.
Does this still work? I cannot get it to work. 50 SO points to you if you can put a fiddle together. 😉 Thanks. http://stackoverflow.com/q/23278951/834525?stw=2
Hey Ryan,
I’ve copied your code verbatim, but I get the following error: “Uncaught TypeError: Cannot read property ‘ready’ of undefined ” on page load.
It could be that the code for
twttr.readyis being executed before twitter has a change to initialise. Have a look at the JSFiddle example and see how the code should be arranged. If the problem persists, try adding a timeout or use the jQueryready()function to delay the event binding.This callback is evoked when the user clicks the share-button, not when he actually submits the tweet. The user can choose to close the dialog. I am also working on something with reward points but I need to be sure the user actually submitted the tweet.
Twitter has changed the behaviour of the click event. Previously (when this article was written), the callback was only triggered when the user successfully tweeted and so correctly tracked actual tweets. Now, it will only track the click to the button, but not if the tweet was actually posted. You will have to rely on other verification methods now, e.g. checking the user’s twitter profile programatically to see if they tweeted a specific message.