카카오스토리 공유하기

예제: 카카오스토리 공유 버튼 추가하기

  • 웹페이지에 카카오스토리 공유 버튼을 추가하는 예제입니다.
  • 앱 등록 과정을 통해 공유 버튼을 추가하는 웹페이지의 도메인을 등록하면, 보다 정확한 통계를 제공받을 수 있게 됩니다.
  • 'YOUR APP KEY'를 등록한 앱의 JavaScript 키로 변경해 주세요.
  • 카카오스토리 버튼 이미지는 여기에서 다운로드 할 수 있습니다.
  • 카카오스토리 공유 기능만 사용할 경우, 용량이 더 작은 스토리 전용 SDK를 사용할 수도 있습니다.
  • 공유창에 스크랩되는 내용은 OG 프로토콜에 따라 정해집니다. 자세한 내용은 이곳을 참조하세요.

웹페이지에 카카오스토리 공유 버튼을 추가합니다.

<!DOCTYPE html>
<html>
<head>
<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"/>
<title>KakaoStory Share Button Demo - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<div id="kakaostory-share-button"></div>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // 스토리 공유 버튼을 생성합니다.
    Kakao.Story.createShareButton({
      container: '#kakaostory-share-button',
      url: 'https://developers.kakao.com',
      text: '카카오 개발자 사이트로 놀러오세요! #개발자 #카카오 :)'
    });
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오스토리에 글을 작성하기 위해서는 카카오스토리와 연결된 카카오계정으로 테스트해야 합니다.

스토리 공유와 관련된 자세한 내용이 궁금하다면? Kakao.Story 레퍼런스

예제: 카카오스토리 공유 팝업창 직접 열기

  • 공유 버튼을 자동으로 웹페이지에 추가하는 대신, 직접 카카오스토리 공유 팝업창을 띄우는 방법에 대한 예제입니다.
  • 앱 등록 과정을 통해 공유 버튼을 추가하는 웹페이지의 도메인을 등록하면, 보다 정확한 통계를 제공받을 수 있게 됩니다.
  • 'YOUR APP KEY'를 등록한 앱의 JavaScript 키로 변경해 주세요.
  • 카카오스토리 버튼 이미지는 여기에서 다운로드 할 수 있습니다.
  • 카카오스토리 공유 기능만 사용할 경우, 용량이 더 작은 스토리 전용 SDK를 사용할 수도 있습니다.
  • 공유창에 스크랩되는 내용은 OG 프로토콜에 따라 정해집니다. 자세한 내용은 이곳을 참조하세요.

카카오스토리 공유 팝업창을 직접 엽니다.

<!DOCTYPE html>
<html>
<head>
<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"/>
<title>KakaoStory Share Button Demo - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a href="javascript:shareStory()">
<img src="https://developers.kakao.com/sdk/js/resources/story/icon_small.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    function shareStory() {
      Kakao.Story.share({
        url: 'https://developers.kakao.com',
        text: '카카오 개발자 사이트로 놀러오세요! #개발자 #카카오 :)'
      });
    }
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오스토리에 글을 작성하기 위해서는 카카오스토리와 연결된 카카오계정으로 테스트해야 합니다.

스토리 공유와 관련된 자세한 내용이 궁금하다면? Kakao.Story 레퍼런스

예제: 카카오스토리 앱으로 공유하기

  • 모바일 웹 사이트에서 웹이 아닌 카카오스토리 앱으로 공유하는 예제입니다.
  • 'YOUR APP KEY'를 등록한 앱의 JavaScript 키로 변경해 주세요.
  • 카카오스토리 버튼 이미지는 여기에서 다운로드 할 수 있습니다.
  • 카카오스토리 공유 기능만 사용할 경우, 용량이 더 작은 스토리 전용 SDK를 사용할 수도 있습니다.
  • 공유창에 스크랩되는 내용은 OG 프로토콜 에 따라 정해집니다. 자세한 내용은 이곳을 참조하세요.

카카오스토리 앱으로 공유합니다.

<!DOCTYPE html>
<html>
<head>
<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"/>
<title>KakaoStory App Launch Demo - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a href="javascript:shareStory()">
<img src="https://developers.kakao.com/sdk/js/resources/story/icon_small.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    function shareStory() {
      Kakao.Story.open({
        url: 'http://blog.kakaocorp.co.kr/390',
        text: '카카오검색에서 카카오스토리를! #카카오스토리 #카카오검색 :)'
      });
    }
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오스토리에 글을 작성하기 위해서는 카카오스토리와 연결된 카카오계정으로 테스트해야 합니다.

스토리 공유와 관련된 자세한 내용이 궁금하다면? Kakao.Story 레퍼런스


Last Modified : 2017-07-28