Blog Archives

Basic Facebook Messenger Integration on iOS

Dude, it’s April 2015. What.

Hi everyone! I’m going to completely ignore the fact that I haven’t posted anything for 6 months. Let’s move on, shall we?

Today we’re going to demonstrate basic integration of Facebook’s new Messenger platform straight into your iOS app. What does basic mean? Well basically we have two options for sharing content through messenger:

1. Basic integration – This option is… pretty basic. It allows sharing images, GIFs, audio and video. People will see your app’s name and logo but the integration will not go as deep as the other form of integration which is:

2. Optimized integration – Gives you the opportunity to integrate your app with Facebook Messenger in such a way that you can generate engagement and user growth (content shared with your app will include an “Install” or “Reply” button which will transfer the user to the app store or back to your app, which is awesome). This option is a bit more tricky to implement and also requires submitting your app for Facebook to review but is probably worth the trouble.

Having said that, I will now demonstrate basic integration. Technically they aren’t very far apart and after you’ve understood basic integration, moving on to optimized integration is simple. For more information see Facebook’s official guide.

Introducing the Llama Generator™

I know that Llama sharing has been a widely controversial matter worldwide and while I don’t wish to create further conflict, I think it’s important to raise awareness. This is why I have created the Llama Generator app. What does it do? Well, it generates and shares Llamas straight into Facebook messenger. Let’s get started.

Step I: Download, install and integrate the Facebook iOS SDK

For basic (or any) Messenger integration, you are required to install and set up Facebook iOS SDK within your app. The setup is much more straightforward today than it used to be – basically all you need to do is:

  • Download and install the SDK
  • Drag the basic framework files into your project without copying (FBSDKCoreKit, FBSDKLoginKit and of course FBSDKMessengerShareKit)
  • Create a new Facebook app and get a Facebook app ID
  • Update your app’s bundle identifier on your Facebook app’s settings page:

  • Configure your info.plist with your app ID like so:

Note: If you get a build error while testing FB login, try changing the target setting of “Allow Non-Modular Includes in Framework Modules” to YES. (Source)

Step II: Set up content sharing easily

You won’t believe how easy it is to broadcast your content into Messenger now that everything is set up. Because we’re in the business of sharing Llamas, we’re going to demonstrate sharing UIImage content, though it is just as easy sharing GIFs, audio or video (all as NSData objects) similarly.

Our app’s only View Controller consists of 3 UIButtons, all hooked up to their respective outlets.

@property (weak, nonatomic) IBOutlet UIButton *btnShareDalaiLlama;
@property (weak, nonatomic) IBOutlet UIButton *btnShareDragonLlama;
@property (weak, nonatomic) IBOutlet UIButton *btnShareVikingLlama;

All three UIButtons are set to trigger the same IBAction on touch up inside:

- (IBAction)shareLlamaPressed:(UIButton *)sender
{
    /**
     First, let's determine which Llama we want to share.
     */
    NSString *imageName = nil;
    if (sender == self.btnShareDalaiLlama)
    {
        imageName = @"dalai_llama";
    }
    else if (sender == self.btnShareDragonLlama)
    {
        imageName = @"dragon";
    }
    else if (sender == self.btnShareVikingLlama)
    {
        imageName = @"viking";
    }

    /**
     Here we load the content into a UIImage
     */
    UIImage *imageToShare = [UIImage imageNamed:imageName];

    if (imageToShare)
    {
        /**
         Before calling the shareImage: method, we need to make sure we have image sharing capabilities.
         */
        if ([FBSDKMessengerSharer messengerPlatformCapabilities] & FBSDKMessengerPlatformCapabilityImage) {
            /**
             Now we share. For basic integration we need to pass in "nil" as options.
             */
            [FBSDKMessengerSharer shareImage:imageToShare withOptions:nil];
        }
        else
        {
            NSLog(@"Error - Messenger platform capabilities don't include image sharing");
        }
    }
    else
    {
        NSLog(@"Error - There was a problem loading image named %@",imageName);
    }
}

Now let’s launch the app and choose a llama:

Tapping on any of the buttons triggers shareLlamaPressed: which will load the proper UIImage and pass it on to Messenger. Messenger will present the content and ask you about the recipients. Choose. Send. Just like that. Now all that is left is to spread the joy (and the Llamas).

Enjoy!