메인 공지사항 기능소개 매뉴얼     TEST BOARD : [1]  [2]  [3]  [4]  [5]
내용없음9
내용없음10
      APPLICATION
무료 스킨.모듈

유료 스킨.모듈

활용 홈페이지

활용팁 공유

자료 공유

유틸리티

웹 스터디
제작자 리소스

최근 활용팁 공유 RANK
신홍
4
작은소망
1
        -- update:30Min --


게시글 카카오톡 링크 서비스 연동
 application
활용팁 공유
테크노트 사용에 관련된 노하우를 공유하는 게시판입니다.
홈페이지 작업/운용중에 알게 된 여러가지 활용팁을 올려 주세요.
나에겐 그저 습관일 뿐이던 것이 누군가에겐 엄청 큰 힘과 도구가 되는 경우가 많답니다.
자료등록시 적립되는 포인트는 200P 입니다.
     
  작성자 TECHSTAR
  분 류 확장
ㆍ조회: 1122  ㆍ추천: 0         
ㆍ작성일: 2016년 2월 24일 수요일
게시글 카카오톡 링크 서비스 연동
게시글을 카톡으로 연동하는 것인데, 모바일페이지에서만 적용됩니다.

기존에 올렸던 링크가 업그레이드가 되어 사용을 못하고 새롭게 알려드립니다.

1. API 신청
https://developers.kakao.com/에서 로그인하고,

2. 카카오링크를 선택해서 앱개발시작 버튼을 누릅니다.

3. 화면이 바뀌면, 왼쪽 메뉴에서 "앱만들기"를 클릭합니다./

4. 원하는 이름을 넣습니다. 사이트명이나, 서비스명등

5. 어플리케이션이 생성되었다는 메세지와 함께, 네이티브 앱 키 / REST API 키 / JavaScript 키 / Admin 키 값이 제공됩니다.

6. 여기까지가 위 카톡사이트에서 해야할 일이구요. 5)번에서 나온 값들을 잘 적어둡니다. (물론 사이트에서 언제라도 조회가 가능합니다.)


테크노트에서,

어차피 본문에 링크될 것이니, 3_body.php 에 해당하는 스킨파일에서 상단에 아래와 같이 입력합니다. (필수)

<!-- 카카오톡 관련 -->
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>


sns 버튼이 있는곳에서 아래와 같이 추가합니다. (필수)

echo "<a id='kakao-link-btn' href="javascript:;"><img src='카톡아이콘이미지경로'></a>&nbsp;";

3_body.php 소스에서 <!-- ############ 본문끝 ############### --> 아래쪽에 아래와 같이 추가합니다. (필수)


<script>
// 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('JavaScript 키');
// 카카오톡 링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
Kakao.Link.createTalkLinkButton({
container: '#kakao-link-btn',
label: '<?=$Body_data[subject]?>',
image: {
src: '카톡링크로 노출될 이미지경로 및 이미지명',
width: '300',
height: '100'
},
webButton: {
text: '회사 및 서비스명',
url: 'http://www.도메인명/board.php?board=<?=$Body_data[board_name];?>&command=body&no=<?=$Body_data[no];?>' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
}
});
</script>

위 처럼 넣어주면 되는데, 주의할것은 "카톡링크로 노출될 이미지경로 및 이미지명" 크기의 높이가 80픽셀이상이어야 합니다. 즉, 회사로고나, 서비스로고등을 위 사이즈로 편집해서 연결합니다.

당연히 pc에서 테스트는 안되구요. 모바일에서만 작동됩니다. 값이 맞지 않으면 연결이 안된다고 에러가 나오니 에러값을 잘확인해서 처리하시면 됩니다.

쉽죠???

*** 문제점 :: 모바일에서 카카오링크는 보내고 카톡에서 정상적으로 받는데클릭하면PC화면이 열려서 이걸 어찌해야하나 고민중입니다. 좋은 방법이 있으면 알려주세요. 방금 적용해서 적용한 뜨거운 활용팁입니다.

       
아이케
2016-02-25 12:24
회원사진
선택된 답변입니다.
음... 테크스타님께서 설마...
-----
http://www.도메인명/board.php?....
이부분을
.
http://www.도메인명/tmob.php?
으로 고치면 되지 않나요+_+?
.
예제
http://herolik.com/technote/board.php?board=iyke3mobb602
보드
-
http://herolik.com/technote/iyke3mob.php?board=iyke3mobb602
iyke3mob 모바일
TECHSTAR 흣..감사합니다. 정신차리고 보니... 맞네요. 2/25 12:53
     
아이케
2016-02-25 12:25
회원사진
선택된 답변입니다.
제가 하다가 알게 된 하나의 팁

자바스크립트는 꼭 버튼소스의 아래에 넣어야 되더라고여;;
왜그런지는 모르겠습니다.
TECHSTAR 일반적으로 자바스크립트는 </body>아래쪽에 넣는게 맞다고 봅니다. ^^ 2/25 12:53
     
TECHSTAR
2016-02-25 12:54
정정합니다. 아이케님이 알려주신대로, 위 내용을 수정하시면 됩니다. 아이케님께 감사드립니다.~~
아이케 ㅎㅎㅎ 2/25 13:59
     
아이런
2016-02-27 09:51
적용을 하면   왜.... 하얗게 나올까요?
스크립트 위치를 바꿔봐도.....  그렇네요..ㅠㅡ
     
아이케
2016-03-07 09:55
회원사진
3_body.zip(13KB)   
제가 쓰는 본문이예요.
짧은주소랑 모바일등등때문에 그냥 적용하시면 안되고여,
열어서 참고해보세요^^
아이런 아... 감사합니다.
참고하여 적용해보도록 하겠습니다.
3/11 08:13
     
  0
3500
FILE #1 .
FILE #2 .
FILE #3 .
FILE #4 .
FILE #5 .
FILE #6 .
FILE #7 .
FILE #8 .
FILE #9 .
FILE #10 .
윗글 변덕쟁이 IE에서 innerHTML 쌍따옴표 있다 없다
아래글 지정된 시간외에 어떤 문구를 나타나게 할때..
1186 방문자의 익스플로러 버전 체크해주는 소스입니다 [1] 신홍 2017-03-07
1185 모바일 웹.. 아이폰, 아이패드 iwindow 레이어 문제 해결 [3]+1 신홍 2017-02-12
1184 모바일에서 주소복사 기능 [1] 신홍 2017-02-10
1183 모바일 [무료모바일프로그램]안드로이드 스튜디오 [2] 작은소망 2017-01-25
1182 게시판에 효율적으로 광고를 하려면... [1] 신홍 2017-01-04
1181 수정 올더게이트 통신 IP 변경 안내 모두모두 2016-12-05
1180 쇼핑몰 회원 장바구니 유지하기 [1] 기즈모SOFT 2016-12-05
1179 수정 커스터마이징된 파일첨부 필드에서 파일 삭제방법 [2] TECHSTAR 2016-10-17
1178 네이트 팀룸으로 메시지 전송~ [2]+2 Terrorboy 2016-09-20
1177 수정 특정 변수값의 한글이 깨질때 사용-삭제 모두모두 2016-09-05
1176 댓글 목록 제한 스크립 추가시 생기는 제한 [1] cherryboyz 2016-07-21
1175 푸시불렛 소스 [2]+4 Terrorboy 2016-06-30
1174 응용 게시물의 날짜 및 시간 변경 [2] 모두모두 2016-05-31
1173 수정 0(제로) 검색 [1] 기즈모SOFT 2016-05-09
1172 운영 종전에 보드 URL을 유보드 URL로 리로딩되게하는 팁. 요나단 2016-04-26
1171 모듈 페이스북처럼 스크롤따라 동영상 재생 컨트롤하는 rolVideo.min... [1]  : DN:1165 rolVideo.min.js : DN:1372 starbros 2016-03-29
1170 DB 오름차순 정렬시 null 또는 공백이 먼저 나오는 문제 해결 기즈모SOFT 2016-03-23
1169 응용 변덕쟁이 IE에서 innerHTML 쌍따옴표 있다 없다 [2] 기즈모SOFT 2016-03-16
1168 확장 게시글 카카오톡 링크 서비스 연동 [5]+4 TECHSTAR 2016-02-24
12345678910,,,63