Like Button for iOS

The Like Button is a way for people to share content with their friends. The Like button can be used to like a Facebook Page or any Open Graph object and can be referenced by URL or ID.

Liking on Mobile - User-Flow

The Like Button on mobile follows slightly different criteria than the Like Button on web: Initially it will not show whether a person liked a URL or Facebook Page before or how many people liked the element as well. Instead you will observe the following behavior:

  1. Like Button: Will be displayed without personalized information. When a person taps the Like Button, a new window will open (also known as fast-app-switch).

  2. Confirmation Dialog: The window will show a simple confirmation the like action (E.g. "You now like Facebook Developers"). If the person installed the Facebook app for iOS the dialog will be served by the Facebook app otherwise by the Safari Browser. Via tap on the OK button the user will come back to your application. Users may revoke the like action using the Unlike button.

  3. Like Button Updated: Once people come back to your application the Like Button will change its status to "Liked" and show the like count message (E.g. "You and 3,416,561 like this")

The scenario above describes the most common case. Depending on farious factors this behavior will change. We will discuss advanced cases in the following.

Miscellaneous

  • The BETA banner will be present until your app has been approved to use the Native Like Button feature.
  • If the person already liked the page before the confirmation dialog will show the message "You and {like-count} others like this".

Adding the Like Button to your Application

1. General iOS Setup

2. Add Fameworks

3. Add Like button code

1. General iOS Setup

Complete the Getting Started Guide for Facebook iOS SDK before adding the Like button. The guide will include:

  • Setting up a Facebook application.
  • Downloading and installing the Facebook iOS SDK.
  • Adding the Facebook iOS SDK to your project.
Facebook SDK for iOS - Getting Started

2. Add Fameworks

To use the Like button in your view you need to add the Frameworks FBSDKCoreKit and FBSDKShareKit. You can find both in the Facebook iOS directory (~/Documents/FacebookSDK).

  1. Drag & drop the frameworks to your Frameworks folder in Xcode's project explorer.
  2. Add the following #import calls to the header of your view controller:
// For example in ViewController.m after `#import "ViewController.h"`
#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <FBSDKShareKit/FBSDKShareKit.h>

3. Add Like button code

You can add the Like button to your view like you would any other UIView. Create a new Like button FBSDKLikeControl instance as shown in the code example shown below. Assign the URL to like via property objectID.

//  ViewController.m (example)

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    FBSDKLikeControl *likeButton = [[FBSDKLikeControl alloc] init];
    likeButton.objectID = @"https://www.facebook.com/FacebookDevelopers";
  likeButton.center = self.view.center;
    [self.view addSubview:likeButton];
}
@end

Adjust Button Layout

You can customize the Like button layout using the options shown in the following table.

SettingOptions

likeControlStyle

FBSDKLikeControlStyleStandard (default): Displays the button and the social sentence. FBSDKLikeControlStyleBoxCount: Displays the button and a box thatcontains the like count.

likeControl HorizontalAlignment

FBSDKLikeControlHorizontalAlignmentLeft (default): The subviews are left aligned. FBSDKLikeControlHorizontalAlignmentCenter: The subviews are center aligned. FBSDKLikeControlHorizontalAlignmentRight: The subviews are right aligned.

Code Example:

// Change the style to box count 
button.likeControlStyle = FBSDKLikeControlStyleBoxCount;
// Change the style to box count 
button.likeControlHorizontalAlignment =
   FBSDKLikeControlHorizontalAlignmentRight;

Next you can use elements like CGRectMake to change the position and size of the Like button:

FBSDKLikeControl *button = [[FBSDKLikeControl alloc]
   initWithFrame:CGRectMake(150, 150, 100, 50)];

// Center Button
CGRect bounds = self.view.bounds;
button.center = CGPointMake(
   CGRectGetMidX(bounds), CGRectGetMidY(bounds)
);

Avoiding the Like Confirmation Dialog

You can improve your user experience by adding Facebook Login to your application. After adding the Facebook Login your application will not open a Like confirmation dialog anymore if:

  1. the person has provided publish_actions permission to your app
  2. the liked Object is not a Facebook Page.

The Like button will immediately update and perform the action from your app using the og.likes API for OG objects. For Facebook Pages we will always show the Like confirmation dialog. In contrast to liking OG objects or URLs you do not need to submit Page like actions for review.

Facebook Login Implementation

For adding the Facebook Login to your Application please refer to the Facebook Login for iOS documentation. A quick implementation could look like this:

#import <FBSDKLoginKit/FBSDKLoginKit.h>
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    FBSDKLoginButton *loginView = [[FBSDKLoginButton alloc] init];
    loginView.publishPermissions = 
        [NSArray arrayWithObjects: @"publish_actions", nil];
    [self.view addSubview:loginView];
}

For Facebook Pages we will always show the Like confirmation dialog. In contrast to liking OG objects or URLs you do not need to submit Page like actions for review.

If you do not use Facebook Login the Like button will always open the Like Dialog to perform the like and confirm the action.

Like Button & Login Review

Please note that you will have to submit your integration of the Like button for review via the Status and Review tab in the App Dashboard

We review your app to ensure a high-quality Facebook experience across apps. In general, people must be aware that they are logging in and posting to Facebook. People should be able to control the information they share with your app or back to Facebook.

Read more about this topic in our Review Guidelines. You will also need to abide by our Platform Policy 4.14: if you use the Like button on iOS or Android, don’t collect or use any information from it.

Class Reference

Please see the documentation for the FBSDKLikeControl for more information on what you can set on the control.