KakaoStory Share

You can create a share button for users to share your cool website to KakaoStory. Try clicking it!

KakaoStory share button

[[share button]]

Example: Add a KakaoStory share button to your page

  • This is an example for adding a KakaoStory share button to your website.
  • You need to register your website's domain via Register App step.
  • Change 'YOUR APP KEY' to your registered app's JavaScript Key.
  • If you only use KakaoStory sharing feature, you can use the KakaoStory Only SDK, which has smaller size.
  • The scrapped information for the popup is determined by the OG protocol.
Adding a KakaoStory share button to your page.
<!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[
  // Set JavaScript Key of current app.
  Kakao.init('YOUR APP KEY');
  // Create KakaoStory share button.
  Kakao.Story.createShareButton({
    container: '#kakaostory-share-button',
    url: 'https://developers.kakao.com',
    text: '카카오 개발자 사이트로 놀러오세요! #개발자 #카카오 :)'
  });
//]]>
</script>
</body>
</html>

Check out the above example's live demo right now! Go to demo
* Your account needs to be registered in KakaoStory in order to test this feature.

Interested in more? Kakao.Story Reference

Example: Open a KakaoStory share popup

  • This example shows you how to open a popup yourself, instead of adding a share button automatically to your page.
  • You need to register your website's domain via Register App step.
  • Change 'YOUR APP KEY' to your registered app's JavaScript Key.
  • If you only use KakaoStory sharing feature, you can use the KakaoStory Only SDK, which has smaller size.
  • The scrapped information for the popup is determined by the OG protocol.
Open a KakaoStory share popup directly.
<!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[
  // Set JavaScript Key of current app.
  Kakao.init('YOUR APP KEY');
  function shareStory() {
    Kakao.Story.share({
      url: 'https://developers.kakao.com',
      text: '카카오 개발자 사이트로 놀러오세요! #개발자 #카카오 :)'
    });
  }
//]]>
</script>
</body>
</html>

Check out the above example's live demo right now! Go to demo
* Your account needs to be registered in KakaoStory in order to test this feature.

Interested in more? Kakao.Story Reference

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

  • 모바일 웹 사이트에서 웹이 아닌 카카오스토리 앱으로 공유하는 예제입니다.
  • '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="//developers.kakao.com/assets/img/about/buttons/kakaostory/icon/android/story_android_96x96.png"/>
</a>
<script type='text/javascript'>
//<![CDATA[
  // Set JavaScript Key of current app.
  Kakao.init('YOUR APP KEY');
  function shareStory() {
    Kakao.Story.open({
      url: 'http://blog.kakaocorp.co.kr/390',
      text: '카카오검색에서 카카오스토리를! #카카오스토리 #카카오검색 :)'
    });
  }
//]]>
</script>
</body>
</html>

Check out the above example's live demo right now! Go to demo
* Your account needs to be registered in KakaoStory in order to test this feature.

Interested in more? Kakao.Story Reference


Last Modified : 2017-07-28