How can I change the default design of FBSDKLoginButton iOS 8.3/Swift 1.2?

Question

I'm working on App currently and I need to change the default design of Facebook button which is provided by Facebook SDK. I succeeded to let the provided button be transparent and stick it above over designed view , and it worked well(now the design is matched and the functionality of Facebook SDK button is working well). my problem turned up after I did that because the button lost it's Ui effects (no highlighting upon clicking). Please if any one can help me , I need to put highlighting effect to this designed button. Let clarify: I've UIView designed as button , I've put a transparent Facebook SDK button above it, the result is shape of my design and functionality of Facebook button at same time ,the loses : no highlighting effect upon clicking.

Answer 1

I've tried the following code , it gives the functionality in right manner.However I failed to give the highlighting effect to the button upon clicking on it. here is the code :

{
    if (FBSDKAccessToken.currentAccessToken() != nil)
        {
            // if user logged in then handleTap func will run instead of button functionality
            let tap = UITapGestureRecognizer(target: self, action: "handleTap:")
            self.btnSignUpwithFaceBook.addGestureRecognizer(tap)

        }

        else
        {
            let loginView : FBSDKLoginButton = FBSDKLoginButton()
            self.view.addSubview(loginView)
            loginView.center = self.btnSignUpwithFaceBook.center
            loginView.frame.size.width = self.btnSignUpwithFaceBook.frame.width
            loginView.frame.size.height = self.btnSignUpwithFaceBook.frame.height
            loginView.frame.origin.x = self.btnSignUpwithFaceBook.frame.origin.x
            loginView.frame.origin.y = self.btnSignUpwithFaceBook.frame.origin.y

            for subView in loginView.subviews
            {
                subView.removeFromSuperview()
            }
            loginView.layer.shadowColor = UIColor.clearColor().CGColor

            loginView.setBackgroundImage(nil, forState: UIControlState.Normal)
            loginView.setBackgroundImage(nil, forState: UIControlState.Application)
            loginView.setBackgroundImage(nil, forState: UIControlState.allZeros)
            loginView.setBackgroundImage(nil, forState: UIControlState.Highlighted)
            loginView.setBackgroundImage(nil, forState: UIControlState.Reserved)
            loginView.setBackgroundImage(nil, forState: UIControlState.Selected)

            loginView.setImage(nil, forState: UIControlState.Normal)
            loginView.setImage(nil, forState: UIControlState.Application)
            loginView.setImage(nil, forState: UIControlState.allZeros)
            loginView.setImage(nil, forState: UIControlState.Highlighted)
            loginView.setImage(nil, forState: UIControlState.Reserved)
            loginView.setImage(nil, forState: UIControlState.Selected)

            loginView.backgroundColor = UIColor.clearColor()
            // just for test
            self.btnSignUpwithFaceBook.layer.borderWidth = 1
            self.btnSignUpwithFaceBook.layer.borderColor = UIColor.whiteColor().CGColor
            loginView.layer.backgroundColor = UIColor.clearColor().CGColor

            loginView.readPermissions = ["public_profile", "email", "user_friends"]
            loginView.delegate = self
            loginView.setTranslatesAutoresizingMaskIntoConstraints(false)

            var constX = NSLayoutConstraint(item: loginView, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self.btnSignUpwithFaceBook, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
            view.addConstraint(constX)

            var constY = NSLayoutConstraint(item: loginView, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: self.btnSignUpwithFaceBook, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0)
            view.addConstraint(constY)

            let views = ["loginView": loginView]

            var constH = NSLayoutConstraint.constraintsWithVisualFormat("H:[loginView(57)]", options: NSLayoutFormatOptions(0), metrics: nil, views: views)
            view.addConstraints(constH)


            var constW = NSLayoutConstraint.constraintsWithVisualFormat("V:[loginView(281)]", options: NSLayoutFormatOptions(0), metrics: nil, views: views)

            view.addConstraints(constW)

}

actually the major problem is that facebookLogInButton is customized class for FBSDK and swift doesn't consider it as uiButton that's why no highlighting property appears. So the point I'm aiming to find it by your help guys is to find a way that let's facebookLoginButton to be considered as uiButton in swift.

Answer 2

You can use a default UIButton, and use FBSDKManager instead of using Facebook SDK/FBSDKLoginButton to log in. You can set highlighted state color, etc on the UIButton.

Call method fbLoginInitiate from IBAction of your custom FB Button.

func fbLoginInitiate() {
    let loginManager = FBSDKLoginManager()
    loginManager.logInWithReadPermissions(["public_profile", "email"], handler: {(result:FBSDKLoginManagerLoginResult!, error:NSError!) -> Void in
        if (error != nil) {
            // Process error
            self.removeFbData()
        } else if result.isCancelled {
            // User Cancellation
            self.removeFbData()
        } else {
            //Success
            if result.grantedPermissions.contains("email") && result.grantedPermissions.contains("public_profile") {
                //Do work
                self.fetchFacebookProfile()
            } else {
                //Handle error
            }
        }
    })
}

func removeFbData() {
    //Remove FB Data
    let fbManager = FBSDKLoginManager()
    fbManager.logOut()
    FBSDKAccessToken.setCurrentAccessToken(nil)
}

func fetchFacebookProfile()
{
    if FBSDKAccessToken.currentAccessToken() != nil {
        let graphRequest : FBSDKGraphRequest = FBSDKGraphRequest(graphPath: "me", parameters: nil)
        graphRequest.startWithCompletionHandler({ (connection, result, error) -> Void in

            if ((error) != nil) {
                //Handle error
            } else {
                //Handle Profile Photo URL String                        
                let userId =  result["id"] as! String
                let profilePictureUrl = "https://graph.facebook.com/\(id)/picture?type=large"

                let accessToken = FBSDKAccessToken.currentAccessToken().tokenString                        
                let fbUser = ["accessToken": accessToken, "user": result]
            }
        })
    }
}