카페24 SNS 로그인 연동! 가능합니다!

2017.01.16 17:23|

나리보스|

좋아요16|

조회수3,227|

댓글11

카페24를 사용하는 많은 분들이 궁금해 하시는    SNS 로그인 연동  

 

※카페24 '쇼핑몰'을 운영중이어야 합니다.

 

 SNS로그인 연동 방법 

 

1. CAFE24 쇼핑몰센터 접속 후 로그인

http://eclogin.cafe24.com/Shop/ 

 

2. 프로모션 > SNS 관리 > SNS 로그인연동 관리 (사용함 체크)

 

 

 

※ APP ID, Client ID 등 발급방법은 우측 [발급방법 보기] 버튼 클릭 후 확인

 

3. 로그인 페이지 HTML 소스 수정

 

 

※ 참고URL

 

http://service-api.echosting.cafe24.com/Shopboard/index.php?url=BoardView&no=339590&bbs_no=12&version=1.9&class=local&server=ue0033 

 

 ※ HTML 수정 TIP 

 

카페24 제공 소스

 

<ul class="snsArea"> 

<li class="{$display_naver|display}">

<a href="#none" onclick="{$naver_func_login}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/member/btn_naver_login.gif" alt="네이버 로그인" /></a>

</li>

<li class="{$display_facebook|display}">

<a href="#none" onclick="{$facebook_func_login}"><img src="http://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="http://img.echosting.cafe24.com/skin/base_ko_KR/member/btn_google_login.gif" alt="구글 로그인" /></a>

</li>

</ul>

 

 

이 소스인 경우 아래와 같이 나타납니다. ( CSS 제거상태 )

 


한땀한땀 보자면

1. {$display_naver|display} : 네이버 로그인을 사용함으로 설정했을때만 노출.

2. <ul><li><a href="#" target=""> :

<ul class="snsArea">

<li class="{$display_naver|display}">

<a href="#none" onclick="{$naver_func_login}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/member/btn_naver_login.gif" alt="네이버 로그인" /></a>

</li>

</ul>

 

어디서 많이 본듯한..

HTML태그 정리에서 보셨나요? 

 

<ul></ul> : unordered list 순서가 붙지 않는 리스트 형태 (기호가 붙는다)

 <li></li> : 리스트

[ http://www.i-boss.co.kr/ab-5368-112 ] 

 

이러한 이유로 리스트 형태로 나오게 됩니다.


"나는 리스트가 아닌 일렬로 나오게 하고싶은데?"

 

 

짜잔 수정 방법은 간단합니다. 리스트 형태를 없애줍니다

 

<a href="#none" onclick="{$naver_func_login}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/member/btn_naver_login.gif" alt="네이버 로그인"></a>

<a href="#none" onclick="{$facebook_func_login}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/member/btn_facebook_login.gif" alt="페이스북 로그인"></a> 

<a href="#none" onclick="{$google_func_login}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/member/btn_google_login.gif" alt="구글 로그인"></a>

 

"나는 이미지나 텍스트를 바꾸고 싶어"

 

1. 이미지 변경

 

<a href="#none" onclick="{$naver_func_login}"><img src="경로/파일명" alt="네이버 로그인"></a>

 

2. 텍스트 변경

<a href="#none" onclick="{$naver_func_login}">네이버로그인</a> 

 

 

이런식으로 간단하게 SNS로그인 연동과 소스 수정이 가능합니다. 

오늘은 즐거운 월..요일입니다 :) 보스님들 한주 시작 화이팅 입니다!

 

스크랩

공유하기

신고

하트 아이콘조은자리님 외 15명이 좋아합니다.

아이보스 정회원팔로우
아이보스 정회원입니다.
 나리보스
  • 활동지수5단계 (438점)
  •  

댓글 11
아이보스 알림

지금 이 글은 나리보스 보스님의 아이보스 인기 게시글입니다.

SNS에 공유하여 정보를 나누어 보세요. 페이스북 트위터 카카오스토리
하루동안 보지 않기
소셜로그인
번호제목작성자등록일좋아요조회
128쇼핑몰 만드실때 참고되는 사이트[2] 

메리고고

08.29843
127고도몰5 모바일샵변경 관련해서[2] 

테슬라살거야

08.24523
126고도몰5 기능추가 관련[1] 

룰루노아

08.23599
125판촉사이트 운영중입니다. 네이버 쇼핑 연동관련[2] 

다연맘

07.19644
124쇼핑몰 스토리보드 샘플 혹시 구할수있을까요? 

나스민

07.19575
123직영몰 제작 준비중입니다. 그런데...[4] 

툴홀릭

07.14764
122카페24에서 상품후기 에디터문의드립니다.[10] 

클림트가구

06.29922
121무점포 소자본창업을 꿈꾸고있습니다[1] 

택배왕김착불

06.19631
120고도몰, 카페24 쇼핑몰제작시 기본 구매해야할 것?[4] 

달슈

06.13807
119고도몰VS카페24VS메이크샵 어떤게 좋은가요?[9] 

환희씨

06.021,251
118스토어팜 폰트사이즈 조절[2] 

수성이

05.30859
117개인방송국 솔루션 제작[4] 

택배왕김착불

05.26909
116오픈마켓 크롤링 하시는 업체 있나요?[3] 

쇼핑왕

05.19967
115자사몰 운영하시는 분들의 비율이 어느정도될까요?[5] 

두둠칫두둠칫

05.12773
114안녕하세요, 쇼핑몰 솔루션을 환불해 보신 분이 계실까..[3] 

코스모스플랜

04.26617
113안녕하세요. 사이트 운영에 도움이 필요해 의견 여쭤봐..[2] 

스텝어라운드

04.18598
BEST(html코딩)마케터를 위한 바로가기 버튼 생성법 [8] 

권용범

04.111,822
111기존 쇼핑몰 리뉴얼 관련 질문입니다.[4] 

ajlfdsjl

04.03657
110쇼핑몰 홈페이지 자체개발 vs 메이크샵 어떤게?[3] 

무슨상관

03.291,080
109동영상강좌 1강[4] 

바나로이

02.28807
108쇼핑몰제작 추천좀해주세요.[4] 

바나로이

02.27880
107[IOS]하이브리드앱 , 웹뷰에 관하여. 

바나로이

02.271,241
1061.쇼핑몰 솔루션의 선택 !![9] 

바나로이

02.251,252
105쇼핑몰 제작 강좌를 진행해보려 합니다[13] 

바나로이

02.25773
104다수엑셀파일을 하나로 합치기(무료프로그램)[7] 

전옥철

02.161,298
103기존 임대몰에서 몰인몰로의 이전 문의드립니다.[5] 

라임엘프

02.13766
102모바일에 HTML5 적용하면 문제가 될까요?[2] 

보스톡4

02.05602
101파비콘(Favicon) : 웹페이지 상단 탭 아이콘 

나리보스

02.01784
BEST카페24 SNS 로그인 연동! 가능합니다![11] 

나리보스

01.163,228
99자사몰 SNS 연동 로그인 기능 문의드립니다.[3] 

CHLOE_SK

01.16752
첫 페이지로 이동 이전 페이지로 이동 123456 다음 페이지로 이동 마지막 페이지로 이동

로그인 후 더욱 많은 기능을 이용하세요!

네이버 계정으로 로그인
페이스북 계정으로 로그인
구글 계정으로 로그인
카카오톡 계정으로 로그인
이메일 또는 아이디로 로그인
X
회원가입ID/PW 찾기 소셜 계정 로그인

전체 알림

모두 읽음 표시 알림함

받은 쪽지함

모두 읽음 표시 쪽지함