Resource icon

Social Network Authentication Login Buttons on Sidebar

rdn

Well-known member
Evina submitted a new resource:

Social Network Authentication Login Buttons on Sidebar (version 1.0.0) - Social Network Authentication Login Buttons on Sidebar, Manual Edits.

Addon can be downloaded Here:
http://xenforo.com/community/resources/social-network-authentication-twitter-google-vk-com.645/
1. Quick Login:

> Open sidebar_visitor_panel template

> Search for
<xen:include template="ad_sidebar_below_visitor_panel" />

> Add this code before it:
<xen:include template="sidebar_custom_login_form" />

> Create template name it: sidebar_custom_login_form
HTML:
<xen:if is="!{$visitor.user_id}">
<div class="section">
<div class="secondaryContent">...

Read more about this resource...
 
What's the problem you encounter?
No images on buttons ?
Ya I'm sure it was something I did, I was trying to add it quick last night before bed and we have a custom style from miner.
I'll try it again tonight when I'll have more time, it looks awesome, I'm sure it was an error on my part :p
 
Ya I'm sure it was something I did, I was trying to add it quick last night before bed and we have a custom style from miner.
I'll try it again tonight when I'll have more time, it looks awesome, I'm sure it was an error on my part :p
Is all you get a quick logon box? That is all that shows up on mine - and I have the latest of the required add-on installed. :oops:
 
I'll have to check it out again, this was 2 months ago so I have no idea what the issue was..lol

:D
Trying to get the social logins to display below the regular login button. I figured out another way of doing it using TMS.
If you want the TMS edits, I can send them to you in a conversation. Just let me know.
 
:D
Trying to get the social logins to display below the regular login button. I figured out another way of doing it using TMS.
If you want the TMS edits, I can send them to you in a conversation. Just let me know.
sure or you can post them here?
I have TMS installed :)
 
sure or you can post them here?
I have TMS installed :)

Template to edit sidebar_visitor_panel
Search for
Code:
<xen:if is="{$visitor.user_id}">
 
<div class="section visitorPanel">
    <div class="secondaryContent">
   
        <xen:avatar user="$visitor" size="m" img="true" />
       
        <div class="visitorText">
            <h2>{xen:phrase signed_in_as_x_sidebar, 'name={xen:helper username, $visitor, 'NoOverlay'}'}</h2>       
            <div class="stats">
            <xen:hook name="sidebar_visitor_panel_stats">
                <dl class="pairsJustified"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
                <dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
                <dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>
            </div>
            </xen:hook>
        </div>
       
    </div>
</div>
 
<xen:else />
 
<div class="section loginButton">       
    <div class="secondaryContent">
        <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
    </div>
</div>
 
</xen:if>

Replace with

Code:
<xen:if is="{$visitor.user_id}">
 
<div class="section visitorPanel">
    <div class="secondaryContent">
   
        <xen:avatar user="$visitor" size="m" img="true" />
       
        <div class="visitorText">
            <h2>{xen:phrase signed_in_as_x_sidebar, 'name={xen:helper username, $visitor, 'NoOverlay'}'}</h2>       
            <div class="stats">
            <xen:hook name="sidebar_visitor_panel_stats">
                <dl class="pairsJustified"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
                <dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
                <dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>
            </div>
            </xen:hook>
        </div>
       
    </div>
</div>
 
<xen:else />
 
<div class="section loginButton">       
    <div class="secondaryContent">
        <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="OverlayTrigger inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
<div align="center">
<xen:if is="{$xenOptions.facebookAppId}">
<li><a href="{xen:link register/facebook, '', 'reg=1'}" class="fbLogin"><span>{xen:phrase login_with_facebook}</span></a></li>
</xen:if>
<xen:if is="{$xenOptions.twitterConsumerKey}">
<li><a href="{xen:link register/twitter, '', 'reg=1'}" class="twitterLogin"><span>{xen:phrase social_login_with_twitter}</span></a></li>
</xen:if>
<xen:if is="{$xenOptions.googleAppId}">
<li><a href="{xen:link register/google, '', 'reg=1'}" class="googleLogin"><span>{xen:phrase social_login_with_google}</span></a></li>
</xen:if> </div>
    </div>
</div>
 
</xen:if>

Result is

sociallogin.png
 
Template to edit sidebar_visitor_panel
Search for
Code:
<xen:if is="{$visitor.user_id}">

<div class="section visitorPanel">
    <div class="secondaryContent">
  
        <xen:avatar user="$visitor" size="m" img="true" />
      
        <div class="visitorText">
            <h2>{xen:phrase signed_in_as_x_sidebar, 'name={xen:helper username, $visitor, 'NoOverlay'}'}</h2>      
            <div class="stats">
            <xen:hook name="sidebar_visitor_panel_stats">
                <dl class="pairsJustified"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
                <dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
                <dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>
            </div>
            </xen:hook>
        </div>
      
    </div>
</div>

<xen:else />

<div class="section loginButton">      
    <div class="secondaryContent">
        <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
    </div>
</div>

</xen:if>

Replace with

Code:
<xen:if is="{$visitor.user_id}">

<div class="section visitorPanel">
    <div class="secondaryContent">
  
        <xen:avatar user="$visitor" size="m" img="true" />
      
        <div class="visitorText">
            <h2>{xen:phrase signed_in_as_x_sidebar, 'name={xen:helper username, $visitor, 'NoOverlay'}'}</h2>      
            <div class="stats">
            <xen:hook name="sidebar_visitor_panel_stats">
                <dl class="pairsJustified"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
                <dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
                <dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>
            </div>
            </xen:hook>
        </div>
      
    </div>
</div>

<xen:else />

<div class="section loginButton">      
    <div class="secondaryContent">
        <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="OverlayTrigger inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
<div align="center">
<xen:if is="{$xenOptions.facebookAppId}">
<li><a href="{xen:link register/facebook, '', 'reg=1'}" class="fbLogin"><span>{xen:phrase login_with_facebook}</span></a></li>
</xen:if>
<xen:if is="{$xenOptions.twitterConsumerKey}">
<li><a href="{xen:link register/twitter, '', 'reg=1'}" class="twitterLogin"><span>{xen:phrase social_login_with_twitter}</span></a></li>
</xen:if>
<xen:if is="{$xenOptions.googleAppId}">
<li><a href="{xen:link register/google, '', 'reg=1'}" class="googleLogin"><span>{xen:phrase social_login_with_google}</span></a></li>
</xen:if> </div>
    </div>
</div>

</xen:if>

Result is

sociallogin.png


I got mine to work in 1.3 replacing the code you mentioned with the following:


Code:
<xen:if is="{$visitor.user_id}">

<div class="section visitorPanel">
    <div class="secondaryContent">
   
        <xen:avatar user="$visitor" size="m" img="true" />
       
        <div class="visitorText">
            <h2>{xen:phrase signed_in_as_x_sidebar, 'name={xen:helper username, $visitor, 'NoOverlay'}'}</h2>      
            <div class="stats">
            <xen:hook name="sidebar_visitor_panel_stats">
                <dl class="pairsJustified"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
                <dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
                <dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>
            </div>
            </xen:hook>
        </div>
       
    </div>
</div>

<xen:else />

<div class="section loginButton">      
    <div class="secondaryContent">
        <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="OverlayTrigger inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
<div align="center">
<ul id="eAuthUnit">
                <xen:hook name="login_bar_eauth_items">
                <xen:if is="{$xenOptions.facebookAppId}">
                    <xen:require css="facebook.css" />
                    <li><a href="{xen:link register/facebook, '', 'reg=1'}" class="fbLogin" tabindex="110"><span>{xen:phrase login_with_facebook}</span></a></li>
                </xen:if>
               
                <xen:if is="{$xenOptions.twitterAppKey}">
                    <xen:require css="twitter.css" />
                    <li><a href="{xen:link register/twitter, '', 'reg=1'}" class="twitterLogin" tabindex="110"><span>{xen:phrase login_with_twitter}</span></a></li>
                </xen:if>
               
                <xen:if is="{$xenOptions.googleClientId}">
                    <xen:require css="google.css" />
                    <li><span class="googleLogin GoogleLogin JsOnly" tabindex="110" 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></li>
                </xen:if>
                </xen:hook>
        </ul>
</div>

</xen:if>
 
Top Bottom