안녕하세요.
카페24 운영도우미 입니다.

쇼핑몰 상품상세화면을 카카오톡과 카카오스토리에 URL을 공유할 수 있는 버튼을 제공해주는 앱을 소개합니다.
- 카카오톡 링크 버튼 : 카카오톡 친구에게 상품명과 상품 주소를 대화내용으로 보내줍니다.
- 카카오 스토리 링크 버튼 : 내 카카오 스토리 계정에 상품 정보를 올려줍니다.

상품상세 화면에 앱을 적용하여 카카오톡&카카오스토리 친구들과 공유하여 홍보에 효과적입니다.
* 단, 카카오링크 버튼은 스마트폰이나 테블릿 PC에서 접속했을때만 나타납니다.(PC에서는 노출되지 않습니다.)

아래의 가이드에 따라 앱을 설치하신 후, 카카오톡에서 제공하는 Javascript Key를 발급해 저장해주셔야

앱이 정상 동작합니다. Key 발급 및 저장은 아래의 링크를 참고해주세요.

[카카오링크 앱 업그레이드 안내 ▶]

■ 필독
카카오링크 모듈 삽입시 A. 스마트디자인편집창 하단영역에서 B. [분할보기] 또는 [HTML]로 설정해야 [모듈삽입] 버튼이 활성화 됩니다.


■ 스마트디자인 - 카카오링크 적용 방법(모바일과 테블릿에서 PC버전일경우 보여집니다.) ----------------------------------------
1. [모듈추가]로 카카오링크 버튼 적용방법
　1) 앱 설치후 카카오링크 버튼 적용 위치 선택
   2) 디자인관리 > 스마트디자인 > 디자인 편집하기 > 상품상세(datail.html) > 모듈추가 > 전체모듈 에서 카카오링크 모듈을 적용
　　A. 카카오링크 : 모바일과 테블릿 PC버전에서 보여지는 버튼 최적화 사이즈
　　B. 카카오링크 - 모바일 : 모바일 웹에서 보여지는 최적화 사이즈
                　　     (디자인 편집창에서 적용해도 모바일 웹에 설치되지 않습니다. 하단 모바일웹 설치방법 참고하셔서 적용하셔야 모바일 웹에서 보여집니다.)

2. [수동적용]으로 카카오링크 버튼 적용방법
　1) 디자인관리 > 스마트디자인 > C스토어 > 마이 앱 > 카카오링크 (kakaolink_display) [샘플소스보기] 소스복사
   2) 스마트디자인 편집창 모듈소스 적용
　　C. 모듈소스 참고
　　　<div module="kakaolink_display" >
 　　　   <!--@css(/apps/kakaolink/skin1/skin1.css)-->
 　　　   {$kakao_link_button}
　　　    {$kakao_story_button}
　　　</div>

　　[Tip]
　　네이버 체크아웃 하단에 모듈을 삽입하면 [쇼핑계속하기][바로 구매하기] 버튼 하단에 적용됩니다.





3. 적용완료
스마트폰 또는 카카오톡이 지원되는 모바일기기에서 PC버전으로 확인시 카카오링크가 노출됩니다.



* 카카오스토리 등록예 -





■ 모바일 웹(뉴모바일) - 카카오링크 적용방법 ---------------------------------------------------------------------
1. 모바일 웹 [모듈소스] 적용방법
　앱 설치후 디자인관리 > 스마트디자인 > C스토어 > 마이 앱 > 카카오링크-모바일 (kakaolink_mobile) [샘플소스보기] 소스복사
　　* 모듈소스 참고
　　　<style type="text/css">
   　　　 .xans-kakaolink-mobile { text-align: right; }
    　　　.xans-kakaolink-mobile .kakaolink_button:first-child { margin-right:-4px;}
    　　　.xans-kakaolink-mobile .kakaolink_button {display:inline-block; position:relative; width:22px; height:22px; vertical-align:top; }
    　　　.xans-kakaolink-mobile .kakaolink_button a { display:block; position:absolute; left:0; bottom:0; width:22px; height:22px; background-image:url("http://img.echosting.cafe24.com/apps/kakao-link/skin1/sfix_btn.png"); background-repeat:no-repeat; font-size:0; line-height:0; background-size :44px 22px;}
    　　　.xans-kakaolink-mobile .kakaolink_button a.talk { background-position:0 0; }
    　　　.xans-kakaolink-mobile .kakaolink_button a.story { background-position:-23px 0; }
    　　　.xans-kakaolink-mobile .kakaolink_button strong { position:absolute; right:0; top:0; min-width:16px; height:16px; padding:2px; background:#4c89df; box-shadow:0 1px 3px #000; border:2px solid #fff; border-radius:15px; font-size:12px; font-family:Verdana, sans-serif; color:#fff; text-shadow:0 -1px 1px #333; line-height:16px; text-align:center; letter-spacing:-1px; }
　　　</style>
　　　<div module="kakaolink_mobile">
    　　　{$kakao_link_button}
    　　　{$kakao_story_button}
　　　</div>


2. 모바일 쇼핑몰 > HTML 설정 변경
　* 모바일쇼핑몰 > 디자인모드 설정에서 'HTML 디자인' 모드로 설정하셔야 카카오링크 모듈소스 적용이 가능합니다.


3. 모바일 쇼핑몰 > 모듈소스 적용
　* 상품상세 > 원하는 위치 선택 후 [모듈소스]를 적용해주세요.

　　[Tip]
　　네이버 체크아웃 하단에 모듈을 삽입하면 [쇼핑계속하기][바로 구매하기] 버튼 하단에 적용됩니다.





4. 적용완료
　스마트폰 또는 카카오톡이 지원되는 모바일기기에서 확인시 카카오링크가 노출됩니다.
    * 구모바일은 적용이 불가능하니 뉴모바일로 업그레이드하여 설치해주세요.


[필독]
블랙베리 및 윈도우폰용 기기는 카카오링크가 지원되지 않습니다.
(해당기기에서는 카카오링크 버튼이 노출되지 않으니 참고 부탁드립니다.^^)

* 자세한 앱설명은 C스토어 > 전체 앱 목록에서 확인해주세요^^*