Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect Joomla 2.5 Support (CLOSED)
  7. New Facebook button out of context with JomSocial login button

Topic-icon New Facebook button out of context with JomSocial login button

Active Subscriptions:

None
12 years 9 months ago #35785 by petgal
Hi,
Just upgraded JFBconnect and the login with facebook button has been replaced with just a facebook button. The problem with this is that it is far removed from the login button generated by Jomsocial and the inexperienced user may not get that this facebook button is in fact a login option. See screencast.com/t/IDE4t9JU

The user may take this new button (since it does not say "login with Facebook") to simply be a like button.

The implementation of this needs to be like on this site where these buttons are situated close to the login button so that it's clear that they are login options.
The topic has been locked.
Support Specialist
12 years 9 months ago #36104 by alzander
Peter,
Very sorry for missing this post when you first made it. I just went back through some old ones to make sure I didn't miss some and found this.

I really appreciate the feedback and do understand a bit of what you mean. In a future release, we have plans to have an option for setting the default button type that is used. I can also see updating our buttons a little better to reference logging in.

For now, if you want to switch to the older style of "Login with Facebook" and "Login with Google+", there's a quick code edit you make to change that default. To do so, edit the /components/com_jfbconnect/libraries/provider/facebook.php file. Around line 136, you'll see:
function getLoginButton($x = null, $y = null, $z = null)
    {
        $providers = JFBCFactory::getAllProviders();
        $html = "";
        foreach ($providers as $p)
            $html .= $p->loginButton();
Update that to:
function getLoginButton($x = null, $y = null, $z = null)
    {
        $providers = JFBCFactory::getAllProviders();
        $html = "";
        $params = array();
        $params['buttonType'] = 'javascript';
        foreach ($providers as $p)
            $html .= $p->loginButton($params);
Test that out and let me know if you like that style better. The other option is to create your own custom images for the login buttons and use those. We can help you with what to do with the images if you're interested in that.

Just so you know, before you implement that change, v5.1.1 of JFBConnect was released today. There were a few minor bugs fixed in that release. Nothing major, but you may want to upgrade before you make the change above so that you don't have to do it twice.

Thanks again for all your feedback,
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 9 months ago #36259 by petgal
Thanks Alex,
As usual the quality and tone of your responses are an example for all to follow.

As for the options you provide, (at least until you provide the choice in your future update) I think changing the images for now would be the only option that would have me not worry about having to go back in and update this file every time there is a component update.

If "the" fix is a while off, I would prefer to change the image, but it's not my own custom image but rather the one you provided that said "login with Facebook." Can you provide those images (google one also) and let me know where to place them?

Thanks.
The topic has been locked.
Active Subscriptions:

None
12 years 9 months ago #36260 by petgal
Also, just tried updating the three 'things' available to update for jfbconnect and this one won't update. See screencast.com/t/PoxgEhqCUze
The topic has been locked.
Active Subscriptions:

None
12 years 9 months ago #36262 by drjjw
I personally did the same thing with CSS:

.login-area .jfbclogin

{right: 18px;
position: absolute;
margin-top: 3px;display: inline-flex;}

.login-area .jfbclogin:before
{display: inline-flex;content: 'Or Login with:';padding-right: 10px}
.login-area {height: 110px}

Might work for you. Produces the image below:


File Attachment:
The topic has been locked.
Support Specialist
12 years 9 months ago #36287 by alzander
Jordan,
That's an awesome solution! Shifting them to the right (in the JomSocial home page only) is something we're likely going to add to our CSS in the 5.1.2 release (still investigating if that's going to cause other problems). I hadn't even thought of using the contents property to add some text there, which we think would be very useful as well. Going to be investigating, and possibly using something similar in 5.1.2 (or 5.1.3). I did just look and the CSS content property works for IE8 and higher and all versions of other browsers, which makes it a simple solution as well. Thanks!!

Peter,
I'd recommend trying Jordan's solution above, if the result seems good to you. Feedback on anything else that might help would be welcome as well.

The selection to choose a default image will likely *not* be in v5.1.2 but may be in a v5.1.3 (if necessary due to other fixes). It is definitely planned for the 5.2 release (scheduled for late October).

I hope that all helps, but feedback, as always, is welcome.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 9 months ago #36297 by petgal
Jordan's a genius man. ;-)

If you can implement exactly that solution there will be no need for a choice of buttons. I'm not a CSS expert though. Can you tell me exactly where to find the file and where in the file to put that code?

Also, any idea why I'm having trouble getting the latest upgrade to work? screencast.com/t/PoxgEhqCUze
The topic has been locked.
Active Subscriptions:

None
12 years 9 months ago - 12 years 9 months ago #36303 by drjjw
Hi Peter,

I'm not a genius, I assure you, though I'm pretty sure Alex and his team are.

That CSS can be added to your template CSS file or to the Jomsocial CSS file (but would be replaced by future Jomsocial updates):

/components/com_community/templates/default/css/style.css

By the way, I updated it a bit to deal with how chrome uses flex properties; improves the single-line display in webkit:
.login-area .jfbclogin {
	right:18px;
	position:absolute;
	margin-top:9px;
	display: -webkit-box;
	display:inline-flex;
	display: -ms-inline-flexbox;
}

.login-area .jfbclogin:before {
	display: inline;
	display:inline-flex;
	display: -ms-inline-flexbox;

	content:'Or Login with:';
	padding-right:10px;
}

.login-area {
	height:110px;
}
Last edit: 12 years 9 months ago by drjjw.
The topic has been locked.
Support Specialist
12 years 9 months ago #36311 by alzander
Peter,
That SourceCoast library file should be installed with JFBConnect v5.1.1. Please install (or re-install) that file if you haven't already. It will automatically update the extension and our library for you.

Jordan,
Thanks so much for the compliments about our work. We're not geniuses, we've just been doing this a long time and have great users who share their feedback and suggestions back. Both you and Peter have made our extensions better for everyone by helping us understand where the rough edges are.

The v5.1.2 release will definitely have *something* for improving the JomSocial buttons. My guess is that will be the CSS above. The only issue I see with it in a separate CSS file is that it's not multi-lingual.. so we may have to do some inline styles. Not something we're a huge fan of, but it would just be that one line of code. We'll see :)

Either way, thanks so much again to both of you,
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 9 months ago #36318 by petgal
Thanks for the acknowledgment and don't sell yourself short. What you are doing with the quality of this product AND your service level is nothing short of amazing.

Just realized that I have 5.1.0 installed. Will download and install 5.1.1 and see what happens. I think I will wait for 5.1.2 instead of making any custom changes. Doesn't sound like I'll have to wait very long.
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect Joomla 2.5 Support (CLOSED)
  7. New Facebook button out of context with JomSocial login button
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS