Twitter is the darling for many folks on the internet these days. The sheer simplicity of Twitter is what makes it so endearing. This simplicity is observed not only in it’s UI and UX, but also in it’s brilliant API. With one of the most well documented APIs I have seen to date, for a web service, it is pretty easy to fiddle with Twitter.
In this 2 part post, we will have a look at a small PHP script which posts tweets for a given user. I have used jQuery along with the cURL library to post the tweets. This is just an example, and hence has almost no validation. Ensure that all the requirements given on the Twitter API wiki are met, when writing your own code.
The HTML code for this, which i’ll keep in the twitter.html file, is:
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <body> | |
| <fieldset> | |
| <legend>Twitter Details</legend> | |
| <ul> | |
| <li> | |
| <label for="username">Username: </label> | |
| <input id="username" name="username" type="text" /> | |
| </li> | |
| <li> | |
| <label for="password">Password: </label> | |
| <input id="password" name="password" type="password" /> | |
| </li> | |
| <li> | |
| <label for="status">Status: </label> | |
| <textarea id="status" name="textarea"> </textarea> | |
| </li> | |
| <li> | |
| <input id="submit" name="submit" type="submit" value="Post Tweet" /> | |
| </li> | |
| </ul> | |
| </fieldset> | |
| <div id="response"></div> | |
| </body> | |
| </html> | |
This is pretty simple HTML code. We have a form that takes in the users Twitter username, password, and the text for the tweet. The textarea has a maximum length of 140 characters, which should also be validated by the JavaScript and PHP. Twitter expects the clients to validate this.
The tweet.js file contains the following jQuery code:
| $(document).ready(function() { | |
| $("#response").hide(); | |
| $("#submit").click(function(event) { | |
| event.preventDefault(); | |
| $("#response").text("Processing...").show("slow"); | |
| $.ajax({ type: 'POST', | |
| url: 'twitter_ajax.php', | |
| data:{ajax_req: true, | |
| username: $("#username").val(), | |
| password: $("#password").val(), | |
| status: $("#status").val() | |
| }, | |
| success: function(data){ | |
| var output = ""; | |
| output += "Tweet ID : "+data.id+"<br />"; | |
| output += "Text : "+data.text+"<br />"; | |
| output += "Username : "+data.user.name+"<br />"; | |
| $("#response").html(output); | |
| } | |
| }) | |
| }); | |
| }); |
As you can clearly see, this is one of the two main parts of our how to. It makes an AJAX request to our twitter_ajax.php script, with the username, password and text as POST parameters. On a successful response from our AJAX script, it constructs the HTML to be inserted into the ‘response’ div, and then inserts it into that.
In the next post, we’ll have a look at the PHP back-end (twitter_ajax.php) of this how-to, where cURL will do all the hard work of actually posting our tweet to Twitter.