티스토리 뷰

나는 오늘도 공부한다/Programing

[블로그관리]카카오 공유 링크 만들기

realMarketing 2015. 10. 1. 00:00

 티스토리(Tistory)블로그를 2년간 운영하면서 최대한 티스토리의 장점을 살리고자 많이 노력해왔습니다. 티스토리의 장점이라면 여러가지가 있지만 자유로움과 전문성을 대표로들 수 있습니다. 그래서 최대한 전문적인 글을 쓰려고 노력하였고, 스킨또한 기본적인 웹프로그래밍을 배워가며 열심히 수정해나갔습니다.

 올해초 반응형 웹스킨으로 변경하면서 한가지 아쉬운점이 있었습니다. 모바일 스킨을 이용하게되면 카카오톡을 비롯하여 다양한 공유링크가 제공되는데 반응형 스킨은 그렇지않다는 것입니다. 그래서 과거에 카카오링크를 직접 타사이트에 설치해본 경험을 살려 이번에 블로그에 '카카오톡 공유 기능'을 구현하면서 소개하려고합니다.

카카오톡, 카카오스토리를 비롯한 모든 카카오와 관련된 설정은 '카카오디벨로퍼스(KaKaoDevelopers)'를 통해 이루어집니다. 주로 개발자들을 위한 정보를 많이 포함하고 있지만 최근에는 일반사용자들도 쉽게 이용할 수 있도록 개발가이드가 상당히 자세하게 나와 있어 굳이 HTML, CSS, JavaScript를 모르더라도 쉽게 따라할 수 있습니다.

◎ 카카오톡 공유링크 만들기

1) 카카오 디벨로퍼스(KakaoDevelopers) 접속

사이트 바로가기>>>

 카카오 디벨로퍼스를 이용하기 위해서는 카카오 계정이 필요합니다. 일반적으로 카카오톡 계정을 통해 사이트를 이용할 수 있고, 만약 계정이 없다면 사이트내에서 바로 가입하실 수 있습니다.

2) 앱 개발 시작하기

 로그인을 완료하였다면 사이트 하단에 앱 개발 시작하기를 클릭하여줍니다. 그러면 현재 '내 애플리케이션'관리 페이지가 나오게되고, 앱만들기 버튼을 클릭하여 줍니다. 애플리케이션 이름을 설정한 후 확인버튼을 눌러줍니다.(저의 경우는 test로 설정하였습니다.)

 위의 사진과 같이 자신의 '네이티브 앱키, REST API키, JavaScript키, Admin키'가 발급되었음을 확인하실 수 있는데요, 이중에서 카카오톡 공유링크를 위해서는 'JavaScript키'가 필요하니 별도로 복사해두시면 됩니다.

3) 개발가이드 시작하기

자신의 Key를 발급받았다면 아래의 개발가이드를 클릭하시면 됩니다. 많은 기능 중에 '카카오 링크'를 통해 카카오톡 공유버튼을 만들 것인데요, 그 중에서도 발급받은 JavaScript키를 이용할 것이기에 'JavaScript개발가이드'를 클릭하여줍니다. 어려운 코드들이 잔뜩나왔죠? 지금부터 웹프로그래밍을 모르셔도 쉽게 적용하실 수 있도록 필요한 부분만 뽑아와서 알려드리겠습니다.

1
2
3
4
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

 티스토리 내에 HTML/CSS편집 페이지로 들어가 위의 해당 코드를 '별도의 수정없이 <head>바로 아래'에 넣어줍니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<a id="kakao-link-btn" href="javascript:;">
      <img src="http://dn.api1.kage.kakao.co.kr/14/dn/btqa9B90G1b/GESkkYjKCwJdYOkLvIBKZ0/o.jpg" />
    </a>
 
    <script>
    Kakao.init('YOUR APP KEY');
 
    Kakao.Link.createTalkLinkButton({
      container: '#kakao-link-btn',
      label: '카카오링크 샘플에 오신 것을 환영합니다.',
      image: {
        src: 'http://dn.api1.kage.kakao.co.kr/14/dn/btqaWmFftyx/tBbQPH764Maw2R6IBhXd6K/o.jpg',
        width: '300',
        height: '200'
      },
      webButton: {
        text: '앱으로 이동',
        url: 'http://4343282.tistory.com'
      }
    });
</script>

 위의 코드는 <body>~</body>사이의 들어가는 코드로 약간의 수정을한 후 추가해주어야합니다. 우선적으로 해아할 부분은 위의 코드 6번째줄에 Your APP KEY의 해당하는 부분을 본인의 JavaScript키를 넣어주어야 합니다. 추가로 몇가지 수정해야할 부분이 더 있습니다. 링크 이미지를 변경하기 위해서는 2번째줄에 이미지URL주소를 변경하면 됩니다. 큰따옴표("")안의 주소를 본인이 원하는 이미지 URL주소로 변경하면됩니다.

 9번째줄부터 20번째 줄까지의 내용은 링크를 전송하여야할때 상대방에서 보여지는 이미지입니다.

 위의 이미지를 보시면 쉽게 어느부분을 수정하셔야할지 이해가되실 겁니다. 출력되는 텍스트는 10번째줄의 내용을 수정하여주시면 되고, 보여지는 이미지를 수정하기 위해서는 12번째의 이미지 URL주소를 변경하여주면 됩니다. 링크버튼의 내용은 17번째줄에서 수정을하시면됩니다.

 이때 중요한 것은 연결되는 링크의 URL주소입니다. 18번째줄의 URL로 연결되게 되어있습니다. 현재 저의 블로그의 주소이지요. 18번째 줄의 주소로 페이지가 이동하게되는데 이때 본인의 카카오디벨로퍼스에 앱 설정에서 입력한 URL주소도 동일하여야합니다. 그렇지않으면 링크 연결이 실패합니다.

 수정한 해당 코드를 <body></body>사이에 원하는 위치에 넣어주시면됩니다~ 생각보다 간한하게 카카오톡 공유링크를 만들 수 있죠? 블로그의 유입수를 늘리는 방법 중하나인 공유 버튼. 쉽고 간단하게 카카오링크 공유버튼을 만들어 블로그 활성화에 조금 더 도움이 되셨으면 좋겠네요.

[읽어볼만한 글]

2014/09/08 - [Note] - 카카오톡 이미지

2015/10/02 - [Programing] - 카카오링크 오류-메세지를 발송한 앱의 설정(사이트 도메인)에 오류가 있어 메세지를 전송할 수 없습니다.

2015/10/03 - [Programing/Programing] - 카카오링크 현재페이지 공유하기

2015/09/30 - [IT & Mobile] - 티스토리 네이버 이웃만들기-네이버이웃커넥트

※공감은 블로거에게 큰힘이 됩니다.

저작자표시 비영리 동일조건

'나는 오늘도 공부한다 > Programing' 카테고리의 다른 글

정렬 알고리즘-버블 정렬  (20) 2015.10.27
카카오링크 현재페이지 공유하기  (3) 2015.10.03
카카오링크 오류-메세지를 발송한 앱의 설정(사이트 도메인)에 오류가 있어 메세지를 전송할 수 없습니다.  (0) 2015.10.02
[Arduino] map함수/constrain함수  (0) 2014.07.16
[Arduino] 아두이노 자주사용하는 함수  (0) 2014.07.16
공유하기 링크
댓글