FBlogin Button Customization

1
votes

I had used facebook login button in my website, is there any way to customize the fblogin button because instead of fblogin i want the button as "Link to your Facebook" like this.Please suggest any ideas to get this button customization

I am using the following set of codes for the fblogin button.

FB.init({ appId : xxxxxxx, status : true, // check login status cookie : false, // enable cookies to allow the server to access the session xfbml : true // parse XFBML });
2
facebook

2 Answers

0
votes

If you are using the javascript sdk, you can implement the login yourself (FB.login) and use whatever button you would like. You just need to run the FB.login code in the onclick. If you do that, you are not bound to the facebook generated iframe.

0
votes

In the case of the javascript sdk mentioned above the actual implementation would look something like this:

<fb:login-button scope="email, user_birthday, user_likes" onlogin="showWelcomeMessage()">Link to your Facebook</fb:login-button>

There's an onlogin event you can use to call a function once the user logs in eg showWelcomeMessage()

or

<div class="fb-login-button" data-scope="email" data-show-faces="true" data-width="200" data-max-rows="1">Link to your Facebook</div>

All the data attributes listed are optional

<script type="text/javascript">
// Code to handle login
</script>

It's the text inside of the elements that counts, and you can imagine using an image if desired as well.

As an aside, you'll want to keep up to date with Facebook and it's rapid changes: https://developers.facebook.com/roadmap/

Resources: https://developers.facebook.com/docs/reference/plugins/login/