소셜로그인 추가 #
소셜로그인 기능을 이용하기 위해서 로그인, 회원가입 등 템플릿에 소셜로그인 위젯을 추가해야 합니다.
[엠샵 멤버스 > 모든 멤버스 템플릿 > 소셜로그인 추가할 템플릿]에 소셜로그인 위젯을 추가합니다.
-
종류 #
소셜로그인의 종류를 지정할 수 있습니다.
(페이스북, 구글, 카카오, 라인, 네이버, 애플, 텔레그램) -
스타일 #
총 8개의 스타일을 제공하여 아래 이미지 또는 소셜로그인 아이콘에서 이미지 스타일을 확인하실 수 있습니다.
-
정렬 #
아이콘(텍스트)의 위치를 지정합니다.
좌측, 가운데, 우측을 지원합니다. -
높이 #
아이콘(텍스트)의 크기 값을 px로 지정하며 기본 값은
40
입니다. -
크기 #
필드의 크기를 지정할수 있으며 기본 값은
4
입니다.
아래 이미지처럼 한 컬럼에 2개 이상의 필드를 추가할 경우 레이아웃에서 Field Group 옵션을 사용하여 Field Group 필드 안에 소셜로그인 필드를 드래그합니다.
-
Class #
클래스를 추가하여 예약된 스타일을 사용하거나 CSS 또는 JS 코드를 추가할때 편리하게 사용할 수 있습니다.
커스텀 이미지 사용 #
멤버스 템플릿에 저장된 이미지가 아닌, 커스텀 이미지를 사용하려는 경우 HTML 코드를 추가하여 이용하실 수 있습니다.
(주의) 구글, 페이스북의 경우 아이콘 단독 사용을 금지하고 있습니다.
구글 로그인 브랜드 가이드라인 , 페이스북 로그인 버튼 정책을 참고하여 이용해 주시기 바랍니다.
아래 샘플을 참고하여 사이트에 HTML 코드를 추가해 주시기 바랍니다.
<a href="/?msm-social-connect=google"> <img style="display: inline-block;height: 40px;" src="........"> </a>
멤버스 템플릿에 추가하려는 경우 기본필드의 HTML 필드를 추가하신 다음 HTML 코드를 추가하여 주시기 바랍니다.
-
href #
HTML의
href=""
에는 추가하려는 소셜로그인에 맞게 링크를 설정해 주셔야 하며 아래를 참고해 주시기 바랍니다.
href="/?msm-social-connect=google"
에서 google 부분만 이용하려는 소셜사로 변경해 주시기 바랍니다.페이스북 :
facebook
구글 :google
카카오톡 :kakao
라인 :line
네이버 :naver
인스타그램 :instagram
-
src #
HTML의
src=""
는 이미지 경로로 아래와 같이 멤버스 플러그인에서 제공하는 소셜로그인 로고 이미지 또는 커스텀 이미지의 URL을 입력해 주시기 바랍니다.예시:
src="https://codemshop.com/manual/wp-content/uploads/logo.png"
멤버스 플러그인에서 제공하는 소셜로그인 로고 이미지는 아래와 같으며 멤버스 로그인 타입 B와 같이 스타일을 변경하실 수 있습니다.