iPhone Programming Tutorial: Integrating Twitter Into Your iPhone Applications

If you are a developer (which you most likely are if you are reading this) you probably have (or should have) a Twitter account.  With Twitter getting so much attention lately, you would be crazy to not include some sort of Twitter integration into your own iPhone application.

There are many ways applications can be made more social by including Twitter.  For example, you could make the application auto-tweet when you unlock a special item in a game, or beat it.  This lets all of their friends know they are playing your game and in turn gets you more exposure.  You could also use this as an idea for creating your own Twitter client (don’t just submit my tutorial to the app store).

Twitter has provided us with some very simple API’s to follow making it a snap to interface with them. I have started a series on my personal blog about creating a Twitter client for the Mac that we will be borrowing some code from.

One thing I want to note before starting is: I will be going rather quick through the tutorial when it comes to creating the interface and hooking up the IBOutlets.  If you need extended help on that, this is probably not the tutorial you want to start on. Read some of my previous tutorials and come back.

This basic tutorial will just show you how to post a status update to your Twitter. I will also show you how to create an app that run entirely in landscape mode. So it’s a two-fer.

Let’s get started…

1. Create A View Based Application

Name it something awesome. I called mine TwitUpdate (not awesome, I know).  The first thing we should do is create our IBOutets and IBActions. Now download the images for the tutorial and drag them into the Resources group inside of XCode.

2. Set up your IBoutlets and IBActions

So open TwitUpdateViewController.h. And let’s add the following code:

You can omit the UIButton outlets if you would like.  I just like having them around in case we want to do anything with the button.  This is pretty straight forward, we have a UITextView to enter our Twitter status in. And an IBAction that gets called to post our Twitter status.  Don’t forget to synthesize these properties in TwitUpdateViewController.m or you will be smitten by the compiler.  One other thing you will see here is a UIActionSheet.  We will display this sheet as our “Loading” screen when posting a tweet.

3. Build The Interface

Go ahead and open up TwitUpdateViewController.xib.

So if you are wondering how to get Interface Builder in landscape mode, it’s actually quite simple.  It is not obvious however as it took me forever and a freakin day to figure it out.  There is a little arrow (as in the screenshot below) in the top right corner of the view.  Click it and the view will rotate to landscape mode.

Now that your interface is in landscape mode, remove the Status Bar.  This is done by clicking on the view and setting the Status Bar drop down in the attributes inspector to none. This will just give you more screen real estate.

Now drag a UIImageView on your view and stretch it to fill the entire screen.  Set the Image attribute of the UIImageView to be twit_background.png and bask in the glory of my beautifully created interface!  Next, we need to add the UITextView.

Grab a UITextView and drag in on to the view and stretch it to fit just inside of the chat bubble.  Make sure to delete the lorem ipsum text inside.

The last interface element we need to add is the update button.  Drag a UIButton on to your view.  In the button’s attributes, set it’s type to custom and it’s image to btn_update.png. Make sure you drag the button to fit the update image. Your final interface should look like this

Now, connect the twitterMessageText from File’s Owner to the UITextView and the updateButton to your custom button.  Also, be sure to connect the TouchUpInside method of the UIButton to the postTweet IBAction.  Here is a screenshot of what the connection properties should look like when you click on File’s owner.

Now close Interface Builder.

4. Creating Our Twitter Request Class

So, we will interface with Twitter using an NSMutableURL request and NSURLConnection.  You have two options at this juncture, you can either download the files below and add them to your project to use, or you can head on over to http://brandontreb.com/objective-c-programming-tutorial-creating-a-twitter-client-part-1/ and learn how to create them yourself (recommended route).  I would explain it here, it’s just that I already wrote an in depth tutorial for it on my blog. This is now a tutorial scavenger hunt.

3.1 Note: As pointed out, by teresa and Ivan in the comments , to get it working in 3.1

just comment out the [newCredential release] in

In – (void)connection:(NSURLConnection *)connection didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge

We were releasing this object too early and it was causing a crash

• twitterrequest.zip

If you just want to complete this tutorial and move on, download the file above, unzip and drag the files into your project.  We need to add some code to these files in order to post a status update to Twitter.  So, open TwitterRequest.h and update the following code

We have added a Boolean that denotes whether or not we are making a HTTP POST request (Twitter uses both POST and GET).  Also, there is a string that will represent the POST request.  In our case, this will just get set to “status=foo” (foo being your status update).

Also, we have added a method signature to update your status.  It takes an NSString which is just the status text.  The other variables are explained in my tutorial on brandontreb.com.  Now, open up TwitterRequest.m and add the following code.

Ok, beginning with the status_update method.  This method looks very similar to our friends_timeline method with a few exceptions.  First, we set isPost = YES.  Next, we set the request body = “status=%@” where we set %@ to our status update.

Now, for some trickier code.  In the request method of our class, we need to add some code to do an HTTP POST (rather than a GET).  This is how we tell Twitter what to set our status to.  So, the first thing is to set the HTTPMethod for the request to POST.  Next, we have set the “Content-Type” field to let Twitter know what kind of data we are sending.  Following that, the body of the request is sent.  This is the actual data that Twitter will see.  Finally, we just tell the request how large (in bytes) our data is going to be.  If this is all foreign to you, I recommend you go read up on POST and GET.

Phew… Done with that.  Now for the final part of implementing our postTweet method.

5. PostTweet Method

Open up TwitterUpdateViewController.m and add the following code.

Ok, not super complex as the TwitterRequest class does most of the heavy lifting.  As a reminder, the postTweet method gets called when you press the Update button.  The first thing we do here is build a new TwitterRequest object and set the username and password field.  Make sure you put in YOUR twitter username and password.  Next, we call the resignFirstResponder method on the UITextView.  This is to hide the keyboard.

Just so the user knows something is happening, we display a simple action sheet that has no buttons and says “Posting to Twitter…” . Finally, we call the statuses_update method in our TwitterRequest class.

The Twitter request class will then do some magic and eventually call the callback method that you specified (status_updateCallback) and send it the data that Twitter returned to us.  The first thing we do is dismiss the action sheet. Next, I am simply outputting the response from Twitter in to the terminal.

The response received from Twitter would need to be parsed and displayed or something but that’s for another tutorial.One thing to note, if you enter an invalid username or password, this app will just hang and say  “Posting to Twitter” forever.  You need to handle this in an error callback method. Again described in the tutorial in which we took the TwitterRequest code from.

6. Run The App In Landscape Mode

The last part of this tutorial is to force the app to run in landscape mode as well as hide the status bar.  Open up TwitUpdate-Info.plist. Right click on the table and select “Add Row”. Select Initial interface orientation and set the value to Landscape (left or right).  Right click again and add Status bar is initially hidden. to hide the status bar.  It should now look like this.

We also need to update the TwitUpdateViewConroller.m file to respond to the interface rotations.  Uncomment the following method in TwitUpdateViewController.m and change it to say:

Just tells the the view to rotate when the iphone is rotated…

Well, I hope you have enjoyed this tutorial.  I hope to see some cool Twitter integration in all of your apps (feel free to comment and let me know how you have implemented it in your app).  You can always ask questions in the comments of the post or write me on twitter.  And for lazy people here is the source (j/k).  Happy iCoding.