Customized Facebook Login Button - After integration

Question

I am trying to customize the Facebook login button after following this guide. Everything is integrated correctly, I can login to Facebook, and logout without a hitch.

Now my next goal is to make the screen look like my mock up, this includes placing the login button correctly on the storyboard, but the only issue is that it doesn't show up on the story board, it just appears when I run the simulation. I looked at other overflow answers, but they weren't really helpful as they were geared towards earlier versions of swift / Xcode, and didn't work from what the comments said. My code is exactly the same as the guide, as this is the first screen that I am trying to implement.

Help would be much appreciated.

Answer 1

If you want to use the custom facebook SDK button you can create any custom button in the storyboard and provide action in the viewcontroller like this

Import at top

import FBSDKCoreKit
import FBSDKLoginKit

Swift 3:

  @IBAction func loginFacebookAction(sender: AnyObject) {//action of the custom button in the storyboard
    let fbLoginManager : FBSDKLoginManager = FBSDKLoginManager()
    fbLoginManager.logIn(withReadPermissions: ["email"], from: self) { (result, error) -> Void in
      if (error == nil){
        let fbloginresult : FBSDKLoginManagerLoginResult = result!
        // if user cancel the login 
        if (result?.isCancelled)!{
                return
        }
        if(fbloginresult.grantedPermissions.contains("email"))
        {
          self.getFBUserData()
        }
      }
    }
  }

  func getFBUserData(){
    if((FBSDKAccessToken.current()) != nil){
      FBSDKGraphRequest(graphPath: "me", parameters: ["fields": "id, name, first_name, last_name, picture.type(large), email"]).start(completionHandler: { (connection, result, error) -> Void in
        if (error == nil){
          //everything works print the user data
          print(result)
        }
      })
    }
  }

Older Swift version:

 @IBAction func loginFacebookAction(sender: AnyObject) {//action of the custom button in the storyboard
        let fbLoginManager : FBSDKLoginManager = FBSDKLoginManager()
        fbLoginManager.logInWithReadPermissions(["email"], fromViewController: self) { (result, error) -> Void in
            if (error == nil){
                let fbloginresult : FBSDKLoginManagerLoginResult = result
                if(fbloginresult.grantedPermissions.contains("email"))
                {
                    self.getFBUserData()
                }
            }
        }
    }

    func getFBUserData(){
        if((FBSDKAccessToken.currentAccessToken()) != nil){
            FBSDKGraphRequest(graphPath: "me", parameters: ["fields": "id, name, first_name, last_name, picture.type(large), email"]).startWithCompletionHandler({ (connection, result, error) -> Void in
                if (error == nil){
                    //everything works print the user data
                    print(result)
                }
            })
        }
    }

If you want default facebook login button you can take UIView and set Class* field of the Custom Class** section in the Identity Inspector, we must set the FBLoginValue

Ref: Default SDK login button tutorial:http://www.appcoda.com/ios-programming-facebook-login-sdk/

Ref: Custom SDK login button for parameters and more info:https://developers.facebook.com/docs/facebook-login/ios