Topic-icon Custom HTML buttons for social login?

Active Subscriptions:

None
9 years 2 months ago #61193 by aphils
Hi Alex,

I'm familiar (thanks to the great documentation) with creating custom image buttons for social login, but is there a way to create a standard HTML button to invoke the same functionality? Due mostly to responsive layouts, I would like to have a like,

<button type="button" class="btn btn-blue btn-facebook">Sign in with Facebook</button>

... and use CSS to style it (including adding the Facebook image.)

I can copy-and-paste the output of the current image buttons, like...

<a class="sc_fblogin btn btn-etc" href="javascript:void(0)" onclick="jfbc.login.provider('facebook');">MY NEW TEXT</a>

But is that reliable? Or should I create a short code of some sort, an equivalent of {JFBC}? I don't mind hacking away at some code to make it happen :-)

Thanks in advance!

Amy
The topic has been locked.
Support Specialist
9 years 2 months ago #61200 by mel
Amy,

The {JFBCLogin} easy-tag uses the provider images (that we provide or custom images from you).

To do a custom login button image or button, here's the blurb from our documentation on what we suggest:

You have full control of the Joomla Facebook Login button. While Facebook recommends the standard blue Login With Facebook button, you're free to use any image, html button, or standard text link. All you need to do is add a bit of Javascript to let JFBConnect know to use that button for logging in, and you're good to go! For example, to use your own custom image, use the following code:

<a href="javascript:void(0)" onclick="jfbc.login.provider('facebook');"><img src="/linktoimage.jpg" /></a>

That code snippet is pretty much what you've already narrowed down to, but let us know if you need clarification or run into problems using it.

-Melissa
The topic has been locked.
Active Subscriptions:

None
9 years 2 months ago #61206 by aphils
Great, thanks for clarifying -- just wasn't sure if that snippet was reliable. Glad to know it is!
The topic has been locked.