ALBERT SITE

카톡 line sns링크 추가하기

Posted by Albert 3996Day 5Hour 21Min 1Sec ago [2014-05-13]

카카오톡

https://developers.kakao.com/ 에 카톡계정으로 로그인한다.

개발시작하기 버튼을 클릭후 +앱만들기 버튼을 클릭한다.

프로젝트 이름을 입력후 만들기를 클릭하면 관련 키가 발급된다.

하단에 설정버튼을 클릭후 플랫폼 추가->웹 클릭후 적용하려는 사이트 url을적고 추가하면 끝이다.

그리고

상단메뉴 개발가이드->카카오링크 javascript개발가이드 항목을 클릭한다.

<!doctype HTML>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
  </head>
  <body>
    <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.createTalkLink({
        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: '카카오 디벨로퍼스'
        },
        fail: function() {
          alert('KakaoLink is currently only supported in iOS and Android platforms.');
        }
      });
    </script>
  </body>
</html>

=======================================================================================

YOUR APP KEY 대신 조금전 발급받은 키값만 넣어주면 끝이다.

2. line

line은 카톡보다 간단하다

http://media.line.me/howto/en/ 에 접속하여 원하는 옵션선택후 코드를 복사하여 적용하려는 사이트 위치에 넣어주면 끝이다

참고로 모바일에서만 버튼이 보인다. ^^

LIST