카카오스토리 공유하기가 웹에서 지원이 된다.
기존에는 카카오링크가 앱에서 지원이 되었는대 웹에서는 없었다. 이번에 카카오스토리 공유하기가 지원되면서 각종 웹페이지에 사용될거 같다.
사용방법은
https://developers.kakao.com/docs/social-plugins/story-share
에 자세히 나와있고 다음과 같다.
1. 아래의 코드를 페이지에 삽입하세요. <body> 태그 바로 뒤에 추가하는 것을 권장합니다.
<script>
window.kakaoAsyncInit = function () {
Kakao.Story.createShareButton({
container: '#kakaostory-share-button'
});
};
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//developers.kakao.com/sdk/js/kakao.story.min.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'kakao-js-sdk'));
</script>
2. 스토리 공유 버튼을 표시할 위치에 다음 코드를 삽입하세요.
<div id="kakaostory-share-button" data-url="https://dev.kakao.com"></div>
또 다른 방법으로
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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>
// 사용할 앱의 Javascript 키를 설정해 주세요.
Kakao.init('YOUR APP KEY');
// 스토리 공유 버튼을 생성합니다.
Kakao.Story.createShareButton({
container: '#kakaostory-share-button',
url: 'https://dev.kakao.com',
text: '카카오 개발자 사이트로 놀러오세요! #개발자 #카카오 :)'
});
</script>
</body>
</html>
이 두가지 예를 조합해서 사용할수도있다.
또한 공유창에 스크랩되는 내용은 OG 프로토콜에 따라 정해진다.
'Story > html/css' 카테고리의 다른 글
| 파일첨부에 이미지만 첨부할 수 있도록 처리 input file (0) | 2016.03.09 |
|---|---|
| 반응형 및 여러 디바이스 미리보기 (0) | 2015.09.21 |
| OG 프로토콜 - The Open Graph protocol - facebook , KakaoStory (0) | 2015.07.13 |
| YouTube 내장 플레이어 및 플레이어 매개변수 (0) | 2015.07.10 |
| F12 개발자 도구의 콘솔 오류 메시지 (0) | 2015.06.29 |