본문 바로가기
it backup/origin

카카오스토리 공유버튼 (Share버튼)으로 웹 링크 보내기 API

by 낯선.공간 2015. 7. 13.

목차

     [SNS공유버튼] 카카오스토리 공유버튼 (Share버튼)으로 웹 링크 보내기 API

    여러분은 지금 티스토리 블로그를 보고 계신데요.



    티스토리에서는 아래와 같은



    SNS공유 버튼이 있죠. 이 중에서 트위터나 페이스북은 워낙에 오래 됐으니, 이 버튼의 구현 방법은 인터넷에 많이 검색되고 있죠.

    반면에 카카오스토리에 대한 정보는 아직 그리 많지가 않은 편인데요.

    별 것도 아닌데 꽁꽁 싸매두고 공개가 되지 않는 듯한 느낌이예요.

    아니면 공개들을 많이 해놨는데 죄다 네이버 검색에서 저품질 먹고 뒤에 가서 처박혀 있는건지도 모르겠네요.

    아무튼 티스토리는 카카오와 같은 회사기 때문에, 티스토리 관리자에서 플러그인 설정만으로 간단하게 저 버튼이 생기게 되죠.

    하지만 일반 웹사이트에서는 저 부분을 직접 구현을 해주어야 하는데요.

    당연히 카카오에서 제공하는 SDK와 API키가 필요합니다.

    카카오 API키 받는 방법은 위의 링크에서 확인하시구요.

    이 글에서는 실제로 카카오 자바스크립트 API 레퍼런스를 이용해서 구현하는 방법에 대해 설명드릴게요.

    강의가 아니므로 간단하게 구현된 것만 보여드리도록 할게요.


    굉장히 복잡해보이지만 사실 그냥 그대로 사용하면 됩니다.

    약간 수정된 것이라고는 sns공유 버튼 즉 카스로 글을 보내기 위한 카카오스토리 버튼에 대해서 임의의 id를 부여하고 제이쿼리의 click함수를 이용해서 해당 버튼이 클릭되는 이벤트가 발생했을 때 처리되는 상황은 카카오 API에서 제공되는 것에서 별 차이가 없습니다.

    중간에 주석이 주절주절 많이 있는 부분은 조금 더 디테일하게 링크 글을 수정하고자 할 때 사용하면 되며, 기본 값으로 그대로 적용하고자 할 때에는 주석의 부분들은 그냥 주석으로 두시면 됩니다.

    다만, title 부분에 있어서는 기본적으로 링크 걸린 페이지의 문서 타이틀 즉, document.title의 값이 그대로 반영되기 때문에, 이 부분에 대한 보정 처리를 해줄 필요가 있어요.

    제 개인 홈페이지의 데모 페이지에서는 여러 경우에 대한 처리를 진행해놓았기 때문에 조금 복잡해져서 이 부분은 이 글에서 빼 놓았어요.

    웹접근성에 맞춰서 제대로 잘 만든 사이트라면 그냥 그대로 문서 타이틀이 기본값으로 전달되어도 무방합니다.

    데모페이지는 웹접근성에 맞추기 위해서 제이쿼리로 문서 타이틀을 재조합하기 때문에, 카카오스토리 링크는 해당 값을 제대로 인식하지 못해서, 별도로 인식하게끔 

    res.title= "성남시청::" + document.title;

    와 같은 방식을 취했어요.

    카카오스토리 링크 공유 버튼 데모페이지 바로가기



    게시판의 경우 게시글의 제목을 제목으로 쓰기 위해서는 

    res.title= "성남시청::" + $('.listx').text();

    와 같이 게시물의 제목을 선택할 수 있는 적절한 제이쿼리 선택자로 추출해서 넣으면 됩니다.

    이런 방식으로 서버사이드 스크립트의 도움이 전혀 없이도 오직 자바스크립트와 제이쿼리만으로 충분히 카카오스토리 글보내기 구현이 가능합니다.



    어때요? 참~ 쉽죠?^^;

    카카오톡으로 링크를 보내는 것도 같은 원리이며, 위와 같은 방식으로 동작합니다.

    카카오톡으로 링크를 보내는 것은 다음에 시간있을 때 포스팅 하기로 하고~~~

    센스 있으신 분들이야 카카오 디벨로퍼스에서 충분히 정보를 획득하실 수 있으실거예요.

    https://developers.kakao.com/docs/js#카카오-api


    반응형