Category Archives: Quick fix

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!

Advertisements

Quick Fix: Facebook release an iOS SDK update. Time for renovations.

Update: 

Looks like the people at Facebook are hard at work… a couple of weeks after writing this post, Facebook released yet another (pretty major) update to the SDK. Find out what you need to do here:

https://developers.facebook.com/docs/tutorial/iossdk/upgrading-from-3.2-to-3.5/

Since September 2012, Facebook has kept the iOS SDK on the down-low for some reason and the latest version of the SDK up until a few weeks ago was 3.1.1. This, in my opinion was a huge problem for developers that had to settle for a hybrid, half-baked SDK that used deprecated methods as a formal practice. For instance, in order to invoke facebook dialogs, you had to import the “Deprecated Headers” folder and utilize it’s methods. How lame.

Well, the good news is that 3.2 (and 3.2.1 following very shortly after) is out and it contains many improvements, better error handling and most importantly – uses blocks instead of delegation wherever it can. You will no longer find yourself importing the deprecated headers in order to open a web dialog and from now on you can use the new FBWebDialogs class to do your magic.

facebook__y_u_no____by_jaret246-d4arl9w

Natural response, I get it.

Alongside the SDK Facebook did some great work and released more useful tutorials to make sure the transition to the new SDK is smooth and clear:

I highly recommend taking a couple of hours to upgrade your code to support these API changes – you never know when deprecated methods will start breaking things…

Quick Fix: Icons that are things

I recently found some nice UI/UX related material available on Pinterest and amongst it I found some exquisite app icons (not necessarily belonging to actual published apps). I found it interesting that the ones that caught my eye the most were the ones that represent real objects (TV, notebook, flask, etc…) – these are the icons that leave an impression on you and make you remember where they are on your springboard.

Once you really dive in to the details you can really come to appreciate the work that went into every single one – the attention to details, the complex texture, simply amazing! For instance, look at the wooden texture on the blackboard icon. Also, look at the amount of detail on the cocktail umbrella:

595923-Casette-Tape 296804-Ice-Cream-Sandwich 926344- 746554-Chalkboard-Icon 49ers Contacts Nestle 59518 745081-Hd-Movies 911442-Pizza-App-Icon 571983-Fruit-Punch-iOS-App-Icon786866-Fc-Barcelona-Fan-Ios-Icon

More available on Pinterest