Social Media Integration in iOS 6

At WWDC 2012, which took place in June this year, the Social framework was introduced among the innovations. This framework makes it possible to integrate sharing buttons in social networks quickly and easily. The social framework has supplanted the Twitter framework introduced in iOS 5. Now we have the opportunity to integrate not only Twitter, but also Facebook and Weibo (the Chinese analogue of Twitter) in our applications without undue troubles.

Let's get started. First of all, you need to create a new project in Xcode, you can choose any name. Project Type - Single View Application.

First, create an application interface, in our case it will consist of a picture window, a text input form and two buttons.

An image will be displayed in the picture window that will be attached to your post, in the input form you can enter the link that you also want to share, and 2 buttons will be used to select the social network we need.

First, open ViewController.h and declare UIImageView and UITextField. We will still need to make our ViewController a delegate to UITextField. All this is done very simply, this is how the ViewController.h code should look in your project.

@interface ViewController : UIViewController {
    UITextField *textField;
    UIImage *shareImage;

Now we can start the most interesting part - creating the application interface.

By the way, do not forget to add any image to the project - it will be attached to your posts on social networks.

Open ViewController.m and find the viewDidLoad method. It is called when the ViewController is loaded, so we will “add” interface elements to your application window there. Here is the code that is used to create the whole interface.

- (void)viewDidLoad
    shareImage = [UIImage imageNamed:[NSString stringWithFormat:@"48X48.jpg"]];
    UIImageView *imageView = [[UIImageView alloc]initWithImage:shareImage];
    imageView.frame = CGRectMake(138, 40, 48, 48);
    [self.view addSubview:imageView];
    CGRect textFieldFrame = CGRectMake(20.0f, 100.0f, 280.0f, 31.0f);
    textField = [[UITextField alloc] initWithFrame:textFieldFrame];
    textField.placeholder = @"Ссылка";
    textField.backgroundColor = [UIColor whiteColor];
    textField.textColor = [UIColor blackColor];
    textField.font = [UIFont systemFontOfSize:14.0f];
    textField.borderStyle = UITextBorderStyleRoundedRect;
    textField.clearButtonMode = UITextFieldViewModeWhileEditing;
    textField.returnKeyType = UIReturnKeyDone;
    textField.textAlignment = UITextAlignmentCenter;
    textField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
    textField.delegate = self;
    [self.view addSubview:textField];
    UIButton *twitterButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [twitterButton addTarget:self
    [twitterButton setTitle:@"Share on Twitter" forState:UIControlStateNormal];
    twitterButton.frame = CGRectMake(80.0, 170.0, 160.0, 40.0);
    [self.view addSubview:twitterButton];
    UIButton *facebookButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [facebookButton addTarget:self
    [facebookButton setTitle:@"Share on Facebook" forState:UIControlStateNormal];
    facebookButton.frame = CGRectMake(80.0, 240.0, 160.0, 40.0);
    [self.view addSubview:facebookButton];
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.

Now you can compile your project, the interface should look something like this:
Large screenshot of the interface

If you try to press any of the buttons, the application will crash. This will happen because we have not yet added the twiShare and fbShare methods, which are called when you click on the corresponding button. To fix this, you must create these methods. This is done like this:

Compile the project again, now the program should not crash when you click on the "social" buttons.

When you click on the text input window, the keyboard should appear, but when you click on the "Done" button, the keyboard will not close. To fix this, we need to add a method responsible for closing the keyboard. This is done like this:
- (BOOL)textFieldShouldReturn:(UITextField *)textField{
    [textField resignFirstResponder];
    return YES;

Try to copy the project again, now the keyboard will close when you click on the "Done" button.

The interface is ready, now let's get down to the most interesting part - setting up sharing by clicking on one of the buttons.

The first step is to add Social.framework to your project. Open the Frameworks folder in the project, right-click on one of the added frameworks and select “Show in Finder”. Now a folder with all the frameworks should open, you just have to find and add Social.framework to the project.

Do not forget to import Social.framework into the ViewController, otherwise the application will generate compilation errors after adding sharing functions to the buttons. This is done like this:
 #import "Social/Social.h"

Now we just need to configure the sharing buttons in the application. In the twiShare and fbShare methods, add this code:

  SLComposeViewController *composeController = [SLComposeViewController
    [composeController setInitialText:@"Тест твит из iOS 6"];
    [composeController addImage:shareImage];
    [composeController addURL: [NSURL URLWithString:
                                [NSString stringWithFormat:@"%@",textField.text]]];
    [self presentViewController:composeController
                       animated:YES completion:nil];

Now, when you click on the sharing button, a Twitter window will open. To open the Facebook window when you click on the “Share on Facebook” button, you just need to change SLServiceTypeTwitter to SLServiceTypeFacebook. You can also change it to SLServiceTypeSinaWeibo if you want to add the possibility of sharing in the Chinese analog of Twitter - Weibo.

Try compiling the project again, now everything should work. If you have not logged into one of the social networks, then when you click on the corresponding button you will be entered in the settings.
Large screenshot of entry offer

Here's what the standard sharing windows on Twitter and Facebook look like:
Large screenshots of sharinga windows

You can download a working project here .

Also popular now: