Cannot change the height of Login Button in FBSDKLoginKit?

Question

I am using FBSDKLoginKit in iOS with Swift.

Up until recently it has been working perfectly, however I now cannot override the height of my button in the St

Answer 1

As a last resort, try implementing your own custom button to act as a Facebook Login button. They might be preventing the customization of the button from the SDK. https://developers.facebook.com/docs/swift/login -- There is a section here with example code - "Custom Login Button". It doesn't seem complicated.

Answer 2

You can conveniently achieve this with a simple override of the facebook button.

Swift:

class FacebookButton: FBSDKLoginButton {

    override func updateConstraints() {
        // deactivate height constraints added by the facebook sdk (we'll force our own instrinsic height)
        for contraint in constraints {
            if contraint.firstAttribute == .height, contraint.constant < standardButtonHeight {
                // deactivate this constraint
                contraint.isActive = false
            }
        }
        super.updateConstraints()
    }

    override var intrinsicContentSize: CGSize {
        return CGSize(width: UIViewNoIntrinsicMetric, height: standardButtonHeight)
    }

    override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
        let logoSize: CGFloat = 24.0
        let centerY = contentRect.midY
        let y: CGFloat = centerY - (logoSize / 2.0)
        return CGRect(x: y, y: y, width: logoSize, height: logoSize)
    }

    override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
        if isHidden || bounds.isEmpty {
            return .zero
        }

        let imageRect = self.imageRect(forContentRect: contentRect)
        let titleX = imageRect.maxX
        let titleRect = CGRect(x: titleX, y: 0, width: contentRect.width - titleX - titleX, height: contentRect.height)
        return titleRect
    }

}

In this code sample standardButtonHeight is a defined constant with the desired button height.

Also note that the logo size of 24.0 is the same size used in version 4.18 of the SDK.

Answer 3

If you are after just changing the height of your button, you can simply adjust the constant of the already present height constraint on the button, after adding the button in your Storyboard:

for constraint in facebookButton.constraints where constraint.firstAttribute == .height {
    constraint.constant = YOUR_Height
}

This code can be placed in viewDidLoad().

Answer 4

I could manage to change the height of the button this way:

• I added a view facebookButtonView to the storyboard with the size that i want, and then in the viewDidLoad i simple do this:

  let loginButton = LoginButton(frame: self.facebookButtonView.frame, readPermissions: [ .publicProfile ])
  self.view.addSubview(loginButton)
  

The Facebook button take the same size as the facebookButtonView. I tested with height 50 and it's working.

Answer 5

So I took @Dev-iL's solution and tweaked it to something a bit more future proof. I'm very new to this so it took me a few hours to figure it out, but I thought I'd share since it specifically deactivates the height constraint based on being a height constraint instead of based on the constant value.

I've used a subview classed as the Facebook button in my storyboard and have set the new constraint there.

I prefer this method and feel its a cleaner approach.

Note: I believe for a height constraint it will always be the first value however please correct me if I'm wrong and I'll update with an edit. As I mentioned I'm new to this

Edit: I decided to include the constant value of 28 to allow for my storyboard height constraint to be skipped during the removal. This isn't needed if you add the constraint programmatically after the removal

for const in fbLoginButton.constraints{
  if const.firstAttribute == NSLayoutAttribute.height && const.constant == 28{
    fbLoginButton.removeConstraint(const)
  }
}

Answer 6

We had the same problem. We solve this problem by creating the button in code with initWithFrame method.

from documentation

FBSDKLoginButton has a fixed height of @c 30 pixels, but you may change the width. initWithFrame:CGRectZero will size the button to its minimum frame.

this solution is working for us

let facebookButton = FBSDKLoginButton(frame:facebookButtonPlaceholder.bounds)
facebookButton.readPermissions = ["email"]
facebookButton.backgroundColor = UIColor.clear
facebookButtonPlaceholder.addSubview(facebookButton)
facebookButtonPlaceholder.backgroundColor = UIColor.clear