1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Add "login with" buttons in registration page

Discussion in 'XenForo Questions and Support' started by giorgino, Jan 14, 2015.

  1. giorgino

    giorgino Well-Known Member

    I 'd like to add Facebook/twitter/google "login with" buttons in registration page.

    How can I do?
    Thanks in advance :)
     
  2. vbuser

    vbuser Active Member

    You have those features offered on login/registration:
    admin>options>facebook integration
    admin>options>twitter integration
    admin>options>google integration
    You want to add them to the registration fields? I think that would make it more complicated.
     
  3. giorgino

    giorgino Well-Known Member

    I need to add then to registration page.

    Example...

    reg.png
     
  4. Mike

    Mike XenForo Developer Staff Member

    You would need to add the relevant HTML to the register_form template. (See helper_login_form for examples of the HTML used.)
     
  5. giorgino

    giorgino Well-Known Member

    So, following your suggestion, this is what I obtained

    Schermata 2015-01-14 alle 22.39.40.png

    and this is the code modification.

    template: registration_form
    Search:
    Code:
    <xen:title>{xen:phrase sign_up}</xen:title>
    Change to:
    Code:
    <xen:title>{xen:phrase sign_up}</xen:title>
    
        <h2 class="textHeading" style="text-align: center">Entra usando il tuo account che hai su Facebook Twitter o Google...</h2>
       
    <div style="text-align: center; padding-bottom: 10px;">
        <div style="padding-top: 5px;>
        <xen:if is="{$xenOptions.facebookAppId}">
            <xen:require css="facebook.css" />
            <dl class="ctrlUnit">
                <dt></dt>
                <dd><a href="{xen:link register/facebook, '', 'reg=1'}" class="fbLogin" tabindex="10"><span>{xen:phrase login_with_facebook}</span></a></dd>
            </dl>
        </xen:if>
        </div>
       
        <div style="padding-top:3px;">
        <xen:if is="{$xenOptions.twitterAppKey}">
            <xen:require css="twitter.css" />
            <dl class="ctrlUnit">
                <dt></dt>
                <dd><a href="{xen:link register/twitter, '', 'reg=1'}" class="twitterLogin" tabindex="10"><span>{xen:phrase login_with_twitter}</span></a></dd>
            </dl>
        </xen:if>
        </div>
       
        <div style="padding-top:6px;">
        <xen:if is="{$xenOptions.googleClientId}">
            <xen:require css="google.css" />
            <dl class="ctrlUnit">
                <dt></dt>
                <dd><span class="googleLogin GoogleLogin JsOnly" tabindex="10" data-client-id="{$xenOptions.googleClientId}" data-redirect-url="{xen:link register/google, '', 'code=__CODE__', 'csrf={$session.sessionCsrf}'}"><span>{xen:phrase login_with_google}</span></span></dd>
            </dl>
        </xen:if>
        </div>
    </div>
       
        <h2 class="textHeading"  style="text-align: center">...oppure registrati col tuo indirizzo e-mail compilando nei prossimi 20 secondi questo breve modulo :)</h2>
    Hope it can help someone else :)
     
    netkingZ, maszd and Mike like this.

Share This Page