Topic-icon Display a CSS Facebook login button

Active Subscriptions:

None
1 year 11 months ago - 1 year 10 months ago #67946 by [email protected]
Hello there,

I integrated JFBConnect with easysocial and instead of getting a button image for Facebook Login, i want to display a css button on easysocial registration, on social widget module (i run just this JFBConnect module for now)... actually on every place where the Facebook Login button of JFBConnect is supposed to display.

So i'd like to get the same button style as Facebook button came with easysocial (currently enabled on testing site, cf. link in AutoTune tool), with the possibility to set language string in button code as label, for multilanguage site purpose.

Help please.

ps: if we could avoid bootstrap style, it'd be fine.
Last edit: 1 year 10 months ago by mel.
The topic has been locked.
Support Specialist
1 year 11 months ago - 1 year 11 months ago #67949 by mel
You'll have to do a template override of the easysocial registration (or the module) and update the link on click method

In general it would be something like this:
<a href="javascript:void(0)" onclick="jfbc.login.provider('facebook');"><img src="/linktoimage.jpg" /></a>

Specifically for your page, if you want it to follow the styles on your test page, then you'd have to add something like the following:
At the top of the file in PHP:
<?php
use Joomla\CMS\Language\Text;
?>

Wherever you want to put the button:
<a href="javascript:void(0)" onclick="jfbc.login.provider('facebook');" class="btn btn-es-facebook btn-sm btn-block">
<i class="fab fa-facebook"></i><?php echo Text::_('YOUR_LANGUAGE_CODE')?></a>

Let us know if you have questions.

-Melissa
Last edit: 1 year 11 months ago by mel.
The topic has been locked.
Active Subscriptions:

None
Hello there,

I reached the support of Easysocial and they indicated the file of registration as following: JoomlaFolder/components/com_easysocial/themes/wireframe/facebook/button.jfbconnect.php

So, the file button.jfbconnect.php contains this code:

START
defined( '_JEXEC' ) or die( 'Unauthorized Access' );
?>
<div class="jfbconnect-wrapper">
    <?php if ($buttons) { ?>
        <?php echo $buttons; ?>
    <?php } else { ?>
    {JFBCLogin}
    <?php } ?>
</div>
END
I tried to paste your button code, but does not work (actually, i'm not a developer).
What i must do exactly?

Best regards.
The topic has been locked.
Support Specialist
1 year 11 months ago #67957 by mel
defined( '_JEXEC' ) or die( 'Unauthorized Access' );
use Joomla\CMS\Language\Text;
?>
<div class="jfbconnect-wrapper">
    <a href="javascript:void(0)" onclick="jfbc.login.provider('facebook');" class="btn btn-es-facebook btn-sm btn-block">
<i class="fab fa-facebook"></i><?php echo Text::_('YOUR_LANGUAGE_CODE')?></a>
</div>

Then replace the YOUR_LANGUAGE_CODE with whatever your language key is.
The topic has been locked.
Active Subscriptions:

None
Hello,
It works fine, thank you.
But what about these files for Scsocial widget and Sclogin modules? I don't know where to place custom code:

- public_html/modules/mod_scsocialwidget/tmpl/default.php
- public_html/modules/mod_sclogin/tmpl/socialLogin.php

Best regards
The topic has been locked.
Support Specialist
1 year 11 months ago - 1 year 11 months ago #67965 by mel
You'll have to do a template override of the sociallogin.php file. That's the one that displays the buttons.

Copy sociallogin.php files into /templates/YOURTEMPLATENAME/html/mod_sclogin directory. Edit that new file. Around line 27 replace
echo $loginButtons;
with
?>
<div class="jfbconnect-wrapper">
<a href="javascript:void(0)" onclick="jfbc.login.provider('facebook');" class="btn btn-es-facebook btn-sm btn-block">
<i class="fab fa-facebook"></i><?php echo Text::_('YOUR_LANGUAGE_CODE')?></a>
</div>
<?php
Last edit: 1 year 11 months ago by mel.
The topic has been locked.
Active Subscriptions:

None
Hello there,

I override this file as following for Scsocial Widget module: 
public_html/templates/TEMPLATE_NAME/html/mod_scsocialwidget/default.php

with code:
START
<?php
/**
 * @package         JFBConnect
 * @copyright (c)   2009-2021 by SourceCoast - All Rights Reserved
 * @license         www.gnu.org/licenses/gpl-2.0.html GNU/GPL
 * @version         Release v9.0.197
 * @build-date      2022/02/01
 */
if (!(defined('_JEXEC') || defined('ABSPATH'))) {     die('Restricted access'); };
use Joomla\CMS\Language\Text;
if ($userIntro != '') {
    echo '<div class="sc_social_widget">'.$userIntro."</div>";
}
if($widget)
    ?>
<div class="jfbconnect-wrapper">
<a href="javascript:void(0)" onclick="jfbc.login.provider('facebook');" class="btn btn-es-facebook btn-sm btn-block">
<i class="fab fa-facebook"></i><?php echo Text::_(' FBLOG_JFBC_LAB')?></a>
</div>
<?php
require(JPATH_ROOT.'/components/com_jfbconnect/assets/poweredBy.php');
?>
END

But i get another style on Scsocial Widget module instead of the style in registration page. Please see screenshot:

 


Best regards
Attachments:
The topic has been locked.
Support Specialist
1 year 11 months ago #67986 by mel
Which language string is that FBLOG_JFBC_LAB key defined in?
The topic has been locked.
Active Subscriptions:

None
I imagined this key, then i added this line in
public_html/language/overrides/en-GB.override.ini (and .../fr-FR.override.ini):
FBLOG_JFBC_LAB="Login with Facebook"
But does not replace.

The key COM_ES_LOGIN_FACEBOOK coming with easysocial does not replace the text neither.

Best regards.
The topic has been locked.
Active Subscriptions:

None
1 year 11 months ago - 1 year 11 months ago #67989 by [email protected]
Hello there,

Please note that the issue about language string has been solved, cause i should eliminate space at the begining of FBLOG_JFBC_LAB key, so it should be Text::_('FBLOG_JFBC_LAB') instead of Text::_(' FBLOG_JFBC_LAB'). Please see screenshot:

 


As for the CSS issue on Scsocial Widget module, it's still stucking.

Help please.
Attachments:
Last edit: 1 year 11 months ago by [email protected].
The topic has been locked.