카카오 카카오링크v2 API 적용

REST API가 잘 정리되어있는 카카오톡에서 제공하는 카카오링크v2 API를 사용하려고 한다.

카카오개발자사이트 : https://developers.kakao.com/docs/js/kakaotalklink#카카오톡링크

 

적용 화면

 

---

* 사용방법 *

1. html 내 head 에 카카오 CDN 선언

<!-- 카카오 공유 -->
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

2. html 내 body 에 카카오톡 이미지 사용한 부분

<img class="iconDetail" id="kakaoShare" src="/images/board/share/kakao.png">

3. html 내 javascript 부분

Kakao.init('b3eb26586b770154ea49919a7f59f2d2');
   //실제 카카오톡 이미지 클릭시 실행되는 부분
   $("#kakaoShare").on("click", function(){
       Kakao.Link.sendDefault({
         objectType: 'feed',
         content: {
           title: $("#boardTitle").text(), //제목추출
           description: $("#hashTag").text()+'\n'+$("#boardContent").text(), //해시태그추출+줄바꿈+내용추출
           imageUrl: 'http://www.bagooninara.co.kr/data/file/09/096407ec484ac26ac4a55f9e4c903111.jpg', //이미지주소
           link: {
             mobileWebUrl: 'http://localhost:8080/board/getBoard?boardNo='+$("#boardNo").val(), //클릭시 이동 할 주소
             webUrl: 'http://localhost:8080/board/getBoard?boardNo='+$("#boardNo").val()
           }
         },
         social: {
           likeCount: Number($("#likePrint").text().replace(/[^0-9]/g,"")), //좋아요개수추출
           commentCount: Number($("#commPrint").text().replace(/[^0-9]/g,"")) //
           },
         buttons: [
           {
             title: '웹으로 보기',
             link: {
               mobileWebUrl: 'http://localhost:8080/board/getBoard?boardNo='+$('#boardNo').val(),
               webUrl: 'http://localhost:8080/board/getBoard?boardNo='+$('#boardNo').val()
             }
           },
           {
             title: '앱으로 보기',
             link: {
               mobileWebUrl: 'http://localhost:8080/board/getBoard?boardNo='+$('#boardNo').val(),
               webUrl: 'http://localhost:8080/board/getBoard?boardNo='+$('#boardNo').val()
             }
           }
         ]
       });
   })

 

 

---

이 기능을 구현하는 과정에서 두가지 문제가 발생했다.

1) 401 unsigned 에러가 발생

   => kakao.init() 시 다른 APP 키로 설정 => APP 키를 javascript key로 바꿈 => 해결

2) 공유이미지 설정했으나 이미지가 안보임

   => 공유할 이미지 용량은 1000KB 지만 공유이미지 최대 용량이 500KB 로 제한걸려있다고 찾음 => 용량작은 이미지로 대체했으나 동일 => 더 찾아보니 서버에 올라가지 않은 (즉, localhost 나 내부적으로만 테스트하는 경우) 이미지는 공유할 수 없다고 함 => 우선 다른 대체 이미지로 테스트