Custom Facebook Login button iOS

Question

I've just integrated the Facebook iOS SDK with my app, and the login works great. That said, the SDK doesnt seem to give me the option to customize my login button (it provides me with that ugly default button in the middle of the screen). I'm using Storyboards with my app - how can I go about hooking up my own button to their provided code? I've seen some older answers posted to Stack, but the FB documentation has since changed :/

Viewcontroller.m

 FBSDKLoginButton *loginButton = [[FBSDKLoginButton alloc] init];
 loginButton.center = self.view.center;
 [self.view addSubview:loginButton];

Answer 1

Make you own custom button in the storyboard. Hook up the action to myButtonPressed .

- (void)viewDidLoad {
    [super viewDidLoad];
    self.loginButton = [[FBSDKLoginButton alloc] init];
    self.loginButton.hidden = YES;
}

- (void)myButtonPressed {
    [self.loginButton sendActionsForControlEvents: UIControlEventTouchUpInside];
}

Answer 2

Updated for Swift 3

@IBAction func fblogin(_ sender: Any) {
    let loginManager = LoginManager()
    UIApplication.shared.statusBarStyle = .default  // remove this line if not required 
    loginManager.logIn([ .publicProfile,.email ], viewController: self) { loginResult in
        print(loginResult)

        //use picture.type(large) for large size profile picture
        let request = GraphRequest(graphPath: "me", parameters: ["fields":"email,name,gender,picture"], accessToken: AccessToken.current, httpMethod: .GET, apiVersion: FacebookCore.GraphAPIVersion.defaultVersion)
        request.start { (response, result) in
            switch result {
            case .success(let value):
                print(value.dictionaryValue)
            case .failed(let error):
                print(error)
            }
        }
    }
}

For Objective-C

You can call this method on UIButton click event

-(void)fblogin{

   FBSDKLoginManager *login = [[FBSDKLoginManager alloc] init];
    if ([UIApplication.sharedApplication canOpenURL:[NSURL URLWithString:@"fb://"]])
    {
        login.loginBehavior = FBSDKLoginBehaviorSystemAccount;
    }

    [login logInWithReadPermissions:@[@"public_profile", @"email"] handler:^(FBSDKLoginManagerLoginResult *result, NSError *error) {
        if (error)
        {
            NSLog(@"Unexpected login error: %@", error);
            NSString *alertMessage = error.userInfo[FBSDKErrorLocalizedDescriptionKey] ?: @"There was a problem logging in. Please try again later.";
            NSString *alertTitle = error.userInfo[FBSDKErrorLocalizedTitleKey] ?: @"Oops";
            [[[UIAlertView alloc] initWithTitle:alertTitle
                                        message:alertMessage
                                       delegate:nil
                              cancelButtonTitle:@"OK"
                              otherButtonTitles:nil] show];
        }
        else
        {
            if(result.token)   // This means if There is current access token.
            {

                [[[FBSDKGraphRequest alloc] initWithGraphPath:@"me"
                                                   parameters:@{@"fields": @"picture, name, email"}]
                 startWithCompletionHandler:^(FBSDKGraphRequestConnection *connection, id userinfo, NSError *error) {
                     if (!error) {


                         dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0ul);
                         dispatch_async(queue, ^(void) {

                            dispatch_async(dispatch_get_main_queue(), ^{

                                // you are authorised and can access user data from user info object 

                             });
                         });

                     }
                     else{

                         NSLog(@"%@", [error localizedDescription]);
                     }
                 }];
            }
            NSLog(@"Login Cancel");
        }
    }];
}

Answer 3

New URL of documentation about custom buttons:

https://developers.facebook.com/docs/facebook-login/ios/advanced

Or if you just want to know what to do when auth button tapped do this in "Button tapped" method (don't forget to link that method with your button):

#import <FBSDKLoginKit/FBSDKLoginKit.h>
#import <FBSDKCoreKit/FBSDKCoreKit.h>

Then

- (IBAction)facebookAuthButtonTapped:(id)sender {

    FBSDKLoginManager *login = [[FBSDKLoginManager alloc] init];
    [login
     logInWithReadPermissions: @[@"public_profile"]
     fromViewController:self
     handler:^(FBSDKLoginManagerLoginResult *result, NSError *error) {
         if (error) {
             NSLog(@"Process error");
         } else if (result.isCancelled) {
             NSLog(@"Cancelled");
         } else {
             NSLog(@"Logged in");
         }
     }];
}

Answer 4

SwiftUI solution

import SwiftUI
import FBSDKLoginKit
import Firebase

struct FaceBookLoginButton: UIViewRepresentable {
    
    func makeCoordinator() -> FBSignInCoordinator {
        return FBSignInCoordinator()
    }
    
    func makeUIView(context: UIViewRepresentableContext<FaceBookLoginButton>) -> FBLoginButton {
        let view = FBLoginButton()
        view.permissions = ["email"]
        view.delegate = context.coordinator
        
        // normal
        view.setTitleColor(.clear, for: .normal)
        view.setImage(nil, for: .normal)
        view.setBackgroundImage(nil, for: .normal)
        
        // tapped
        view.setTitleColor(.clear, for: .highlighted)
        view.setImage(nil, for: .highlighted)
        view.setBackgroundImage(nil, for: .highlighted)
        return view
    }
    
    func updateUIView(_ uiView: FBLoginButton, context: UIViewRepresentableContext<FaceBookLoginButton>) {}
    
}

Answer 5

From Facebook documentation: ( https://developers.facebook.com/docs/swift/login )

import FacebookCore
import FacebookLogin

func viewDidLoad() {    
  // Add a custom login button to your app
  let myLoginButton = UIButton(type: .Custom)]
  myLoginButton.backgroundColor = UIColor.darkGrayColor()
  myLoginButton.frame = CGRect(0, 0, 180, 40);
  myLoginButton.center = view.center;
  myLoginTitle.setTitle("My Login Button" forState: .Normal)

  // Handle clicks on the button
  myLoginButton.addTarget(self, action: @selector(self.loginButtonClicked) forControlEvents: .TouchUpInside) 

  // Add the button to the view
  view.addSubview(myLoginButton)
}

// Once the button is clicked, show the login dialog
@objc func loginButtonClicked() {
  let loginManager = LoginManager()
  loginManager.logIn([ .PublicProfile ], viewController: self) { loginResult in
    switch loginResult {
    case .Failed(let error): 
      print(error)
    case .Cancelled:
      print("User cancelled login.")
    case .Success(let grantedPermissions, let declinedPermissions, let accessToken):
      print("Logged in!")
  }
}

Answer 6

Swift 4.0 Set action to ur button.

func loginButtonClicked() {
        let loginManager = LoginManager()
        loginManager.logIn(readPermissions: [.publicProfile], viewController: self) { (loginResult) in
            switch loginResult {
            case .failed(let error):
                print(error)
            case .cancelled:
                print("User cancelled login.")
            case .success(let grantedPermissions, let declinedPermissions, let accessToken):
                print("Logged in! \(grantedPermissions) \(declinedPermissions) \(accessToken)")
                self.getFBUserData()
            }
        }
    }

Answer 7

It works for me Swift

import FacebookLogin
import FBSDKCoreKit

func connectFacebook() {
        let loginManager = LoginManager()
        loginManager.logIn(permissions: ["user_hometown"],
                           from: nil) { (result, error) in
                            if let result = result {
                                print("Token: \(result.token?.tokenString ?? "")")
                            }
        }
    }

Answer 8

Swift 5.0 Set action for your button

    let loginManager = LoginManager()
    loginManager.logIn(permissions: [.publicProfile], viewController: self) { (loginResult) in
             switch loginResult {
             case .failed(let error):
                 print(error)
             case .cancelled:
                 print("User cancelled login.")
             case .success(let grantedPermissions, let declinedPermissions, let accessToken):
                 print("Logged in! \(grantedPermissions) \(declinedPermissions) \(accessToken)")
                // self.getFBUserData()
             }
         }