[카페24] 회원가입 페이지에 SNS 로그인 버튼 넣기

 

카페24 관리자페이지에서 [설정 > 고객설정 > SNS로그인 연동 관리] 페이지에서 각종 로그인 관련 설정을 하고 나면 로그인화면에서 자동으로 SNS 로그인 버튼들이 뜬다. 그런데 회원가입페이지에서는 SNS로그인 버튼이 안보이는 상황이!

회원가입 링크주소를 타고 바로 접속하는 경우도 있어 회원가입 페이지에도 SNS 버튼을 다는 방법을 정리해보려고 한다.

 

(수정 전) SNS로그인 설정을 하고나면 로그인 페이지에는 SNS로그인 버튼이 뜨나, 회원가입 페이지에는 뜨지 않는다.

 

 

 

 

카페24 회원가입 페이지에 SNS 로그인 버튼 넣기 (PC)

 

1) 카페24 관리자페이지에서 [디자인 > 디자인편집]을 클릭해 스마트 디자인 편집창을 연다.

2) 왼쪽 영역에서 [전체화면보기] 클릭 후, 회원(member) 폴더를 찾은 뒤, 그 안의 로그인(login.html)파일을 연다.

 

3) <div module="member_login">~</div> 영역을 전체 복사한다.

 

 

4)  회원가입(join.html) 페이지를 열고 상단에 복사한 코드를 넣는데, SNS로그인 영역을 제외한 불필요한 영역은 삭제한다.

 

불필요한 코드 정리하면 대략 이렇게 정리가 되는데, 이 코드를 넣어주면 된다.

<div module="member_login">
<!--@css(/css/module/member/login.css)-->
    <!--
        $defaultReturnUrl = /index.html
        $forbidIpUrl = member/adminFail.html
    -->
    <div class="login">
        <fieldset>
            <ul class="snsArea" style="border:0;">
                <li class="{$display_naver|display}">
                    <a href="#none" onclick="{$naver_func_login}"><img src="/web/gif/btn_naver_login.gif" alt="네이버 로그인" /></a>
                </li>
                <li class="{$display_facebook|display}">
                    <a href="#none" onclick="{$facebook_func_login}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/member/btn_facebook_login.gif" alt="페이스북 로그인" /></a>
                </li>
                <li class="{$display_google|display}">
                    <a href="#none" onclick="{$google_func_login}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/member/btn_google_login.gif" alt="구글 로그인" /></a>
                </li>
                <li class="{$display_kakao|display}">
                    <a href="#none" onclick="{$kakao_func_login}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/member/btn_kakao_login.gif" alt="카카오계정 로그인" /></a>
                </li>
                <li class="{$display_line|display}">
                    <a href="#none" onclick="{$line_func_login}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/member/btn_line_login.gif" alt="LINE 로그인" /></a>
                </li>
                <li class="{$display_apple|display}">
                    <a href="#none" onclick="{$apple_func_login}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/member/btn_apple_login.gif" alt="apple 로그인" /></a>
                </li>
                <li class="{$display_yahoojp|display}">
                    <a href="#none" onclick="{$yahoojp_func_login}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/member/btn_yahoo_login.gif" alt="Yahoo! 로그인" /></a>
                </li>
            </ul>

        </fieldset>
    </div>
</div>

 

 

이렇게 하면 간단하게 끝이긴한데, 결과를 확인해보면 카카오를 제외하고는 모두 '로그인'이 쓰여있어 회원가입페이지에서는  유저에게 혼란을 줄 수 있어 버튼의 '로그인' 글자를 모두 '시작하기'로 변경해주면 좋을 것 같다.

텍스트가 왜 버튼마다 다른가요..

 

 

 

 

버튼 이미지 변경하기

1) 버튼의 '로그인' 글자를 '시작하기'로 변경하였다. 이 글을 보고 따라하고 계신 분들 하나하나 수정하기 힘들까봐 아래 파일로 공유! 아래 파일을 압축 풀면 된다.

글자 변경한 버튼 이미지

 

 

이미지 파일들 다운 ▼

btn_sns.zip

0.01MB

 

 

 

2) 카페24 관리자페이지 메뉴에서 디자인 > 파일업로더를 클릭하고 web 폴더 하위에서 [Add files]를 눌러 다운받은 버튼 이미지를 업로드!

관리하기 쉽게 따로 폴더 생성해서 그 안에 업로드 해도 된다. 나는 기존에 만들어놓은 gif 폴더에 업로드하였다.

 

 

3) 다시 스마트 디자인 편집창으로 돌아와서 join.html 파일에서 이미지 경로를 위에서 업로드해준 파일 경로대로 수정해준다.

 

 

 

[최종코드] PC 회원가입 페이지 SNS로그인 버튼 코드

버튼 이미지 web > btn 폴더에 업로드 후, 아래 코드를 member > join.html 파일 상단에 추가

<div module="member_login">
<!--@css(/css/module/member/login.css)-->
    <!--
        $defaultReturnUrl = /index.html
        $forbidIpUrl = member/adminFail.html
    -->
    <div class="login">
        <fieldset>
            <ul class="snsArea">
                <li class="{$display_naver|display}">
                    <a href="#none" onclick="{$naver_func_login}"><img src="/web/btn/btn_naver_register.gif" alt="네이버 로그인" /></a>
                </li>
                <li class="{$display_facebook|display}">
                    <a href="#none" onclick="{$facebook_func_login}"><img src="/web/btn/btn_facebook_register.gif" alt="페이스북 로그인" /></a>
                </li>
                <li class="{$display_google|display}">
                    <a href="#none" onclick="{$google_func_login}"><img src="/web/btn/btn_google_register.gif" alt="구글 로그인" /></a>
                </li>
                <li class="{$display_kakao|display}">
                    <a href="#none" onclick="{$kakao_func_login}"><img src="/web/btn/btn_kakao_register.gif" alt="카카오계정 로그인" /></a>
                </li>
                <li class="{$display_line|display}">
                    <a href="#none" onclick="{$line_func_login}"><img src="/web/btn/btn_line_register.gif" alt="LINE 로그인" /></a>
                </li>
                <li class="{$display_apple|display}">
                    <a href="#none" onclick="{$apple_func_login}"><img src="/web/btn/btn_apple_register.gif" alt="apple 로그인" /></a>
                </li>
                <li class="{$display_yahoojp|display}">
                    <a href="#none" onclick="{$yahoojp_func_login}"><img src="/web/btn/btn_yahoo_register.gif" alt="Yahoo! 로그인" /></a>
                </li>
            </ul>
        </fieldset>
    </div>
</div>

 

 

그러면 회원가입페이지에서는 '000로 시작하기' 버튼으로 잘 보여지게 된다.

결과

 

 

 

 

 

모바일 스킨 변경하기

모바일도 동일한 방식으로 변경해주면 되는데, 버튼이 텍스트로 되어있어서 따로 이미지 경로를 변경해줄 필요 없고, 약관페이지가 따로 존재하여, 코드를 약관페이지에 추가해줘야하는 차이점이 있다. 

 

 

1) 모바일 스킨의 member > login.html 파일에서

<div module="member_login" id="{$member_login_module_id}">~</div>영역 복사

 

 

2) 이용약관(agreement.html) 파일을 열고 복사한 코드를 붙여넣기 한 뒤, SNS로그인 관련 부분을 제외하고는 모두 삭제한다. 그리고 '~(으)로 로그인'이라고 되어있는 텍스트를 '~(으)로 시작하기'로 변경해주면 끝! 

 

[최종코드] 모바일 회원가입 페이지 SNS로그인 버튼 코드

member > agreement.html 파일 상단에 추가

<div module="member_login" id="{$member_login_module_id}">
<!--@css(/css/module/member/login.css)-->
<!--@js(/js/module/member/login.js)-->
    <!--
        $defaultReturnUrl = /index.html
    -->
    <div class="loginWrap">
        <fieldset>
            <div class="formBox">
                <div class="snsLogin">
                    <a href="#none" class="btnNaver {$display_naver|display}" onclick="{$naver_func_login}"><span>네이버로 시작하기</span></a>
                    <a href="#none" class="btnFacebook {$display_facebook|display}" onclick="{$facebook_func_login}"><span>Facebook으로 시작하기</span></a>
                    <a href="#none" class="btnGoogle {$display_google|display}" onclick="{$google_func_login}"><span>구글로 시작하기</span></a>
                    <a href="#none" class="btnKakao {$display_kakao|display}" onclick="{$kakao_func_login}"><span>카카오로 시작하기</span></a>
                    <a href="#none" class="btnLine {$display_line|display}" onclick="{$line_func_login}"><span>LINE으로 시작하기</span></a>
                    <a href="#none" class="btnApple {$display_apple|display}" onclick="{$apple_func_login}"><span>Apple로 시작하기</span></a>
                    <a href="#none" class="btnYahoo {$display_yahoojp|display}" onclick="{$yahoojp_func_login}"><span>Yahoo!로 시작하기</span></a>
                </div>
            </div>
        </fieldset>
    </div>
</div>

 

 

※ 스킨에 따라 일부 CSS는 변경해야할 수도 있음.