Beginning Twitter in iOS 6 Tutorial

Note from Ray: This is the ninth iOS 6 tutorial in the iOS 6 Feast! In this tutorial, we’re updating one of our older tutorials to iOS 6 so it’s fully up-to-date with the latest features like the new Social Framework in iOS 6.

Parts of this tutorial come from Felipe Laso Marsetti‘s “Beginning Social Framework chapter” in our new book iOS 6 by Tutorials, although the book is about a different app (a “Fun Facts” app!) and takes things MUCH further than this simple example, such as creating a custom activity in the activity view controller. Enjoy!

This is a post by iOS Tutorial Team Member Felipe Laso, an iOS developer working at Lextech Global Services.

These days, social networks are a huge part of our daily lives. Not only do we access social networks via their dedicated websites like twitter.com or facebook.com, but we also find social features in apps, websites, blogs, video games, and more.

Adding some social features into your apps can help you increase the virality of your app, help you identify and retain customers, and can boost the polish and added value of your app.

In the old days, adding social features into your app was a major pain. Not only did you have to use a different API for each social network, but users have to constantly log into each one of them for every app they use

iOS 5 added support for Twitter, but there was still no support for other popular social frameworks like Facebook or Sina Weibo. Now with the new iOS 6 Social Framework, adding support for any of these frameworks is incredibly easy – and you’re all ready to go if Apple adds any more in the future!

Keep reading to see how simple it is to integrate social frameworks into your app, with an example of integrating Twitter into a simple app about tweeting your favorite tutorials! :]

How Does It Work?

iOS 6 includes several ways to interact with Twitter. The simplest, and possibly the one you will most likely implement, is the SLComposeViewController. That name is quite a handful so we will affectionately call it “Tweet Sheet” just as Apple does.

In this tutorial you will see that the tweet sheet is very easy to implement. With literally just a couple of lines you can have a full tweet composer within your app! You don’t have to worry about contacting the Twitter backend, handling user logins, or anything like that.

Here is a code snippet for creating and presenting the SLComposeViewController:

if ([SLComposeViewController isAvailableForServiceType:SLServiceTypeTwitter])
{
    SLComposeViewController *tweetSheet = [SLComposeViewController 
        composeViewControllerForServiceType:SLServiceTypeTwitter];
    [tweetSheet setInitialText:@"Initial Tweet Text!"];
    [self presentViewController:tweetSheet animated:YES completion:nil];
}

All you do is determine whether the device can send tweets, create an instance of SLComposeViewController for the Twitter service, attach any links or images, put some initial text and present it modally, that’s it! All within Xcode and through the use of Objective-C.

In fact it’s so easy, that if you’re an advanced developer you can just skip the rest of this tutorial and implement it yourself! But if you want to see an example of using “simple tweet” capability in a simple project, keep reading!

Overview

In this introductory Twitter tutorial we’ll cover the use of the SLComposeViewController (i.e. the “tweet sheet”) which will enable you to tweet any text, image or link you want from within your applications. It looks something like this:

The advantage of using the tweet sheet is that it’s built right onto iOS, this means lots of things:

• Standard interface throughout the OS
• Automatic use of the user’s system Twitter account
• Automatic check for a tweet less than 140 characters long
• Easy image and link attachments
• Easy to program, no need to implement OAuth or connect to the Twitter backend

As you can see you have lots of advantages and incentives to use this and, being that it’s so simple, there’s no excuse not to include Twitter functionality in your applications!

Getting Started

Alright fellow programmers, it’s time to get your fingers typing and creating an awesome Twitter enabled app. In this example we’re going to create a simple app that will allow the user to tweet whatever text they like, and even include images or links within their tweet.

Create a new project with Xcode with the iOS\Application\Single View Application template. Enter SimpleTweet for the product name, set the device family to iPhone, and make sure that Use Storyboards and Use Automatic Reference Counting are checked (leave the other checkbox unchecked).

Click Next, select a location where you want to save your project, and click Create.

You are only going to support Portrait orientation so you need to set that up within your project settings. In your Project Navigator select the SimpleTweet project and make sure you select the SimpleTweet target inside of it, go to the Summary tab and deselect all orientations except for Portrait:

Now that you have your project created let’s discuss a bit of what it’s going to do. You are going to have four buttons that are images from four tutorials on this site. Your app will allow the user to tap their favorite tutorial, and it will bring up a sheet so the user can tweet about it.

To do this, you’ll need some images first. So download the resources for this tutorial and drag the images into your project.

Now open up MainStoryboard.storyboard and set up some UIButtons and UILabels in the view controller as follows:

To make this interface, simply:

• Set the background image of the buttons to the appropriate images, and set the buttons type to Custom. Size the buttons to fit the images.
• Add 4 labels to show what each button corresponds to, set their Lines to 0 (unlimited), the font size to a Bold System font of size 13, and their text color to White
• Change the background color to a dark gray
• Make the Tweet button’s text black

Don’t worry too much about Auto Layout or what happens if you switch between iPhone or iPhone 5 screen sizes – it’s not important for this tutorial.

Build and run and make sure everything looks ok so far. Now onto the implementation!

Making Some Connections

Next you need to make some connections from your storyboard to the view controller. Open MainStoryboard.storyboard and make sure the Assistant Editor is visible, and displaying ViewController.h.

Control-drag from each of the four labels to below the @interface, and connect them to Outlets named button1Label, button2Label, button3Label, and button4Label.

Similarly, control-drag from each of the four buttons to below the @interface, and connect them to Actions named button1Tapped, button2Tapped, button3Tapped, and button4Tapped.

Finally, control-drag from the “Tweet” button to below the @interface, and connect it to an action named tweetTapped.
n
When you are done, your header file should like this:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet UILabel *button1Label;
@property (weak, nonatomic) IBOutlet UILabel *button2Label;
@property (weak, nonatomic) IBOutlet UILabel *button3Label;
@property (weak, nonatomic) IBOutlet UILabel *button4Label;

- (IBAction)button1Tapped:(id)sender;
- (IBAction)button2Tapped:(id)sender;
- (IBAction)button3Tapped:(id)sender;
- (IBAction)button4Tapped:(id)sender;
- (IBAction)tweetTapped:(id)sender;

@end

Awesome! Now let’s implement these methods to send out some tweets!

In order for you to use the SLComposeViewController you need to add the Social framework to your project. Select your project in the project navigator and then the SimpleTweet target. Go to the Build Phases tab and click on the + button inside the Link Binary With Libraries section, on the window that appears navigate to the Social.framework file and click Add:

Next, open ViewController.m and add the following import at the top of the file:

#import <Social/Social.h>

That’s all you need in order for your file to see the Social API, let’s now add some code so you display the tweet sheet when the user taps the Tweet button. Go to your tweetTapped method add the following code:

- (IBAction)tweetTapped:(id)sender { 
    if ([SLComposeViewController isAvailableForServiceType:SLServiceTypeTwitter])
    {
        SLComposeViewController *tweetSheet = [SLComposeViewController composeViewControllerForServiceType:SLServiceTypeTwitter];
        [tweetSheet setInitialText:@"Tweeting from my own app! :)"];
        [self presentViewController:tweetSheet animated:YES completion:nil];
    }
    else
    {
        UIAlertView *alertView = [[UIAlertView alloc] 
            initWithTitle:@"Sorry"                                                             
            message:@"You can't send a tweet right now, make sure  
                your device has an internet connection and you have 
                at least one Twitter account setup"                                                          
            delegate:self                                              
            cancelButtonTitle:@"OK"                                                   
            otherButtonTitles:nil];
        [alertView show];
    }
}

Yes, believe it or not that’s all you need to do in order to send a tweet (mind you you haven’t included any links or images), it doesn’t get any easier than this! Let’s go over the code you added to your tweetTapped method.

First thing you do is check to see if you can send a tweet, you accomplish this by calling the isAvailableForServiceType: class method on SLComposeViewController. This method will return NO if the device cannot access the specified service.

If your application can send a tweet then all you do is create an instance of the SLComposeViewController for the Twitter service, use the setInitialText: method to load up the tweet sheet with some default text and present it modally. If you cannot send a tweet then you just show a simple alert view to provide the user with feedback.

Build and run your project, touch the Tweet button and this is what you get:

Awesome, huh? If you get the Alert dialog, be sure you have your Twitter account set up by loading the Settings app and selecting the Twitter category.

There is one thing worth mentioning and that is that the SLComposeViewController has a completion handler property which you can use to pass in your own block of code once the tweet sheet is dismissed.

By default the completion handler dismisses the modal tweet sheet, though you can customize it to do whatever you need to. Just keep in mind that if you do implement your own completion handler then you need to dismiss the tweet sheet yourself.

Adding Images and Links

Now let’s implement the logic to allow the user to select one of the tutorials and have its image and link added to the tweet. Add the following category before the implementation inside ViewController.m:

@interface ViewController ()
@property (strong, nonatomic) NSString *imageString;
@property (strong, nonatomic) NSString *urlString;
- (void)clearLabels;
@end

All you are doing here is creating two private string properties to store the image’s name and the link to the tutorial website as well as a private method to set your labels’ text color back to white.

Note you no longer have to synthesize these properties, thanks to some compiler improvements in Xcode 4.5!

Next, implement the clearLabels method to set the text color of each label to white:

- (void)clearLabels
{
    self.button1Label.textColor = [UIColor whiteColor];
    self.button2Label.textColor = [UIColor whiteColor];
    self.button3Label.textColor = [UIColor whiteColor];
    self.button4Label.textColor = [UIColor whiteColor];
}

Yup, that’s all this private method will do for us.

The way you are going to implement this is as follows: when the user selects a tutorial you store its image name and link within your private properties and you set the label’s color to red in order to indicate the current selection.

If the user selects another tutorial then you just set all the labels back to white, store the new image and url and set it’s label to red. Add the following code for your button tapped methods:

- (IBAction)button1Tapped:(id)sender {
    
    [self clearLabels];
    
    self.imageString = @"CheatSheetButton.png";
    self.urlString = @"http://www.raywenderlich.com/4872/
        objective-c-cheat-sheet-and-quick-reference";
    
    self.button1Label.textColor = [UIColor redColor];
}

- (IBAction)button2Tapped :(id)sender {

    [self clearLabels];
    
    self.imageString = @"HorizontalTablesButton.png";
    self.urlString = @"http://www.raywenderlich.com/4723/
        how-to-make-an-interface-with-horizontal-tables-like-the-
        pulse-news-app-part-2";
    
    self.button2Label.textColor = [UIColor redColor];
}

- (IBAction)button3Tapped:(id)sender { 

    [self clearLabels];
    
    self.imageString = @"PathfindingButton.png";
    self.urlString = @"http://www.raywenderlich.com/4946/
        introduction-to-a-pathfinding";
    
    self.button3Label.textColor = [UIColor redColor];
}

- (IBAction)button4Tapped:(id)sender {

    [self clearLabels];
    
    self.imageString = @"UIKitButton.png";
    self.urlString = @"http://www.raywenderlich.com/4817/
        how-to-integrate-cocos2d-and-uikit";
    
    self.button4Label.textColor = [UIColor redColor];
}

In each of the methods you just clear the labels, set the image string to the appropriate image, set the URL to the corresponding tutorial and change the label’s text color to red. You could have implemented things a bit differently in order to avoid writing the same code in all 4 methods but since this example is very simple, we’ll leave it at that.

Now go over to the tweetTapped method and add the following code right before the call to [self presentModalViewController:…]:

if (self.imageString)
{
    [tweetSheet addImage:[UIImage imageNamed:self.imageString]];
}

if (self.urlString)
{
    [tweetSheet addURL:[NSURL URLWithString:self.urlString]];
}

You just added two if statements to check whether you have an image and url, if you do then you just add them to your tweet sheet by using the addImage: and addURL: methods respectively.

Once again, this is all you need! Go ahead and run your project; this time make sure you select one of the tutorials and hit the Tweet button. This is what you get:

If you look at the tweet sheet you will notice a paper clip with 2 attachments, one is the link to our website and the other is the image you added. When the user sees the Tweet, they’ll see two URLs in the tweet – one for the image, and one for the link. Try it out and see what it looks like!

And with that my friends, you are done!

Where To Go From Here?

Here is an example project with all of the code from the above tutorial.

As you can see it’s very easy to integrate Twitter into your own applications and there is really no reason why you shouldn’t do so.

You could try and experimenting with things a bit, perhaps dynamically setting the initial text of the tweet sheet depending on what tutorial was selected, or even include more images or links within your tweet. You could also create instances of SLComposeViewController for Facebook or Sina Weibo.

Have fun and think of unique ways to incorporate Twitter into your app because your users are going to love it!

If you want to do some more cool stuff with Twitter, Facebook and Sina Weibo, check out our book iOS 6 By Tutorials, where we have another chapter that covers how to use the Accounts and Social Frameworks for full access to the Twitter, Facebook and Sina Weibo APIs. This will allow you to do all sorts of things – such as accessing a user’s Facebook profile, viewing their wall, or getting a user’s Twitter feed.

I hope you enjoyed this tutorial as much as I did. Feel free to post your questions and comments on the forums, I can’t wait what you guys and gals come up with for your next great app! :)

This is a post by iOS Tutorial Team Member Felipe Laso, an iOS developer working at Lextech Global Services.