Customized Facebook Login Button - After integration

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.

Answers

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

POD INSTALL

source 'https://github.com/CocoaPods/Specs.git'
use_frameworks!
target “ProjectName” do
  pod 'FacebookCore'
  pod 'FacebookLogin'
  pod 'FacebookShare'
end

AppDelegate.swift

import FacebookLogin
import FBSDKLoginKit
import FacebookCore

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

    FBSDKApplicationDelegate.sharedInstance().application(application, didFinishLaunchingWithOptions: launchOptions)
    return true
}

func application(_ application: UIApplication, open url: URL, sourceApplication: String?, annotation: Any) -> Bool {
    return FBSDKApplicationDelegate.sharedInstance().application(application, open: url, sourceApplication: sourceApplication, annotation: annotation)
}

ViewController.swift

import UIKit
import FacebookLogin
import FBSDKLoginKit
import FacebookCore

class ViewController: UIViewController {

override func viewDidLoad() {
    if(FBSDKAccessToken.current() == nil){
        print("Not logged in ")
    }else{
        print("Logged in already")
        getFacebookUserInfo()
    }
}

@IBAction func CustomButton_Click(_ sender: Any) {
    getFacebookUserInfo()
}

func getFacebookUserInfo(){
    let loginManager = LoginManager()
    loginManager.logIn([.publicProfile, .email ], viewController: self) { (result) in
        switch result{
        case .cancelled:
            print("Cancel button click")
        case .success:
            let params = ["fields" : "id, name, first_name, last_name, picture.type(large), email "]
            let graphRequest = FBSDKGraphRequest.init(graphPath: "/me", parameters: params)
            let Connection = FBSDKGraphRequestConnection()
            Connection.add(graphRequest) { (Connection, result, error) in
                let info = result as! [String : AnyObject]
                print(info["name"] as! String)
            }
            Connection.start()
        default:
            print("??")
        }
    }
}
}

Info.plist

Info.plist --> right click ->OpenAs -->Source Code --> add < dict > .. < /dict >

<key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>YOUR APP ID</string>
            </array>
        </dict>
    </array>
    <key>FacebookAppID</key>
    <string>YOUR APP ID</string>
    <key>FacebookDisplayName</key>
    <string>YOUR APP NAME</string>

@IBAction func buttonLogin(_ sender: Any) {

    let fbLoginManager : FBSDKLoginManager = FBSDKLoginManager()

    fbLoginManager.logIn(withReadPermissions: ["public_profile","email"], from: self) { (result, error) in

        if (error == nil){
            let fbloginresult : FBSDKLoginManagerLoginResult = result!
            if fbloginresult.grantedPermissions != nil {
                if(fbloginresult.grantedPermissions.contains("email")) {
                    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){
                               let dict: NSDictionary = result as! NSDictionary
                                if let token = FBSDKAccessToken.current().tokenString {
                                    print("tocken: \(token)")

                                    let userDefult = UserDefaults.standard
                                    userDefult.setValue(token, forKey: "access_tocken")
                                    userDefult.synchronize()
                                }
                                if let user : NSString = dict.object(forKey:"name") as! NSString? {
                                    print("user: \(user)")
                                }
                                if let id : NSString = dict.object(forKey:"id") as? NSString {
                                    print("id: \(id)")
                                }
                                if let email : NSString = (result! as AnyObject).value(forKey: "email") as? NSString {
                                    print("email: \(email)")
                                }
                            }
                        })
                    }
                }
            }
        }
    }
 }

Welcome to StackOverflow, Shika! That tutorial shows you how to add the button that Facebook provides as part of their SDK. The tutorial tells you centers the button in the center of the device's screen. Facebook allows you to create your own button, if you'd like to. In my opinion, I like it better, because you can play with it in the storyboard, unlike the button created programmatically in Swift. You can use the Facebook docs here and scroll down to "Custom Login Button". Your code will change, but not by much! If you choose to go this route, make sure to delete the code you copied and pasted to add the button located in viewDidLoad. Also, you can delete the FBSDKLoginButtonDelegate you added at the top of the Swift file.

Need Your Help