상세 컨텐츠

본문 제목

티스토리에 소셜(SNS) 공유 버튼을 달아 보자! - 카카오톡, 카카오스토리 편

Review/Blog Review

by Ming footprint 2019. 6. 24. 18:00

본문

728x90
반응형

이제는 카카오스토리 공유 버튼을 할 차례입니다.

카카오 톡, 카카오 스토리 공유버튼 적용하기

  1. 카카오톡, 카카오스토리 공유 준비 및 코드 획득

  2. 이미지 업로드

  3. 이미지 버튼 사용을 위한 코드 수정

  4. 티스토리 HTML 태그에 적용

카카오톡과 카카오스토리는 기존과는 다른 API 제공 방식을 사용하는 듯 하여서,

위의 방법으로 진행을 하였습니다.

티스토리의 다른 포스팅을 보면, 카카오스토리의 경우 공유 url을 사용하여 하는 방법도 있습니다.

코드만 공유하겠습니다.

<!-- url을 이용한 공유 방법 -->
<a href="#" onclick="javascript:window.open('https://story.kakao.com/s/share?url='+encodeURIComponent(document.URL), 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');
	return false;" 
	target="_blank" alt="Share on kakaostory">
	<img src="./images/Kakao_Story.png"></a>

저는 KaKao Developers에서 개발 가이드 해주는 부분으로 진행을 하였습니다.

1. 카카오톡, 카카오스토리 공유 준비 및 코드 획득


카카오 Developers 페이지에 접속합니다.

그래서 API 관련을 찾았어요.

카카오스토리 공유하기 페이지 이 곳에 접속하시면 됩니다.

접속해서 카카오스토리 공유하기를 보았습니다.

카카오는 앱을 등록하여 'YOUR APP KEY'를 JavaScript키로 변경을 해주어야 한다고 합니다.

그래서 저는 기존 카카오 아이디로 로그인을 하고 내 애플리케이션을 만들어 주었습니다.

그러면 JavaScript 키가 생성이 됩니다.

자바스크립트키는 굳이 가릴 필요가 없었습니다. 페이지에서 소스보기 하면 누구나다 찾아 볼수 있었습니다.

그리고 내 애플리케이션 > 개요> 카카오 로그인 사용자 관리를 설정하여 사용가능으로 만들어 주었습니다.

프로필 정보에 수집 목적, 카카오 계정(이메일) 수집 목적은 카카오 공유로 하고 저장 하였습니다.

그리고 설정 > 일반 > 플랫폼에서 플랫폼 추가를 하였습니다.

그리고 개발자 가이드로 가서 카카오톡 공유와 카카오스토리 공유 코드를 얻습니다.

카카오에서는 JavaScript 방법으로 공유를 지원합니다.

카카오톡은 shareKatalk(), 카카오스토리는 shareStory()가 됩니다.

<!-- 카카오스토리 공유 버튼 -->
<script type='text/javascript'>
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    function shareStory() {     
      	<!-- 카카오 Link 공유 API 사용-->
    };
</script>
	
<!-- 카카오톡 공유 버튼 -->
<script>
	// 사용할 앱의 JavaScript 키를 설정해 주세요.
	Kakao.init('YOUR APP KEY');
	function shareKatalk() {
    	<!-- 카카오 Link 공유 API 사용-->		
	};
</script>

script의 코드를 정리하면 위와 같습니다.

 

2. 이미지 업로드 - 카카오톡, 카카오스토리 공유 버튼 이미지 추가


저는 둥근 모양의 이미지를 사용기 위해서 이미지 업로드를 진행 하겠습니다.

파일은 각각 Kakao.png, Kakao_Strory.png 이름을 가지고 있습니다.

위 이미지를 티스토리에 업로드하기 위해서

티스토리 편집 메뉴에서

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

그리고 상단의 파일 업로드를 선택하여 이미지 파일을 하단의 추가 버튼을 이용하여 추가를 해 줍니다.

추가한 이미지는 각각 'images/Kokao.png', 'images/Kokao_Story.png" 파일 경로를 가지게 됩니다.

3. 이미지 버튼 사용을 위한 코드 수정 - 카카오톡, 카카오스토리 공유 버튼 코드 수정


Kakao Developers 에서 얻은 JavaScript를 사용하여 이미지 버튼 코드를 작성하겠습니다.

그리고, 카카오에서 제공하는 사이트의 메타 정보를 링크로 전송하는

Kakao.Link.sendScrap() API와 Kakao.Story.share() API를 사용하겠습니다.

<!-- 카카오스토리 공유 버튼 -->
<!-- 카카오스토리 버튼 이미지-->
<a href="javascript:shareStory()"><img src="./images/Kakao_Story.png"></a>
<!-- 카카오스토리 공유 JavaScript -->
<script>
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('ee909bb9d71436fc3912b195d2045ff7');
    function shareStory() {
      	<!-- 카카오 Link 공유 API 사용-->
		Kakao.Story.share({
			url : document.URL,
			text : document.title			  
		});
    };
</script>
	
<!-- 카카오톡 공유 버튼 -->
<!-- 카카오톡 버튼 이미지 -->
<a href="javascript:shareKatalk()"><img src="./images/Kakao.png"></a>  
<!-- 카카오톡 공유 JavaScript -->
<script>
	// 사용할 앱의 JavaScript 키를 설정해 주세요.
	Kakao.init('ee909bb9d71436fc3912b195d2045ff7');
	function shareKatalk() {
    	<!-- 카카오 Link 공유 API 사용-->
		Kakao.Link.sendScrap({
			requestUrl: location.href
		});	
};
</script>

Kakao.Link.sendScrap()에서 requestUrl은 

스크랩 할 사이트 URL, 해당 사이트의 메타 정보를 토대로 링크를 생성합니다.

4. 티스토리 HTML 태그에 적용 - 카카오톡, 카카오스토리 공유 버튼 코드 적용


공유 버튼 코드를 자신의 티스토리 블로그에 적용하기 위해서,

티스토리 편집 메뉴에서

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

저는 제일 위에서 보여 드린 이미지처럼 본문과 태그 사이에 공유 버튼을 위치하겠습니다.

티스토리 본문 치환자는

728x90
반응형

이제는 카카오스토리 공유 버튼을 할 차례입니다.

카카오 톡, 카카오 스토리 공유버튼 적용하기

  1. 카카오톡, 카카오스토리 공유 준비 및 코드 획득

  2. 이미지 업로드

  3. 이미지 버튼 사용을 위한 코드 수정

  4. 티스토리 HTML 태그에 적용

카카오톡과 카카오스토리는 기존과는 다른 API 제공 방식을 사용하는 듯 하여서,

위의 방법으로 진행을 하였습니다.

티스토리의 다른 포스팅을 보면, 카카오스토리의 경우 공유 url을 사용하여 하는 방법도 있습니다.

코드만 공유하겠습니다.

<!-- url을 이용한 공유 방법 -->
<a href="#" onclick="javascript:window.open('https://story.kakao.com/s/share?url='+encodeURIComponent(document.URL), 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');
	return false;" 
	target="_blank" alt="Share on kakaostory">
	<img src="./images/Kakao_Story.png"></a>

저는 KaKao Developers에서 개발 가이드 해주는 부분으로 진행을 하였습니다.

1. 카카오톡, 카카오스토리 공유 준비 및 코드 획득


카카오 Developers 페이지에 접속합니다.

그래서 API 관련을 찾았어요.

카카오스토리 공유하기 페이지 이 곳에 접속하시면 됩니다.

접속해서 카카오스토리 공유하기를 보았습니다.

카카오는 앱을 등록하여 'YOUR APP KEY'를 JavaScript키로 변경을 해주어야 한다고 합니다.

그래서 저는 기존 카카오 아이디로 로그인을 하고 내 애플리케이션을 만들어 주었습니다.

그러면 JavaScript 키가 생성이 됩니다.

자바스크립트키는 굳이 가릴 필요가 없었습니다. 페이지에서 소스보기 하면 누구나다 찾아 볼수 있었습니다.

그리고 내 애플리케이션 > 개요> 카카오 로그인 사용자 관리를 설정하여 사용가능으로 만들어 주었습니다.

프로필 정보에 수집 목적, 카카오 계정(이메일) 수집 목적은 카카오 공유로 하고 저장 하였습니다.

그리고 설정 > 일반 > 플랫폼에서 플랫폼 추가를 하였습니다.

그리고 개발자 가이드로 가서 카카오톡 공유와 카카오스토리 공유 코드를 얻습니다.

카카오에서는 JavaScript 방법으로 공유를 지원합니다.

카카오톡은 shareKatalk(), 카카오스토리는 shareStory()가 됩니다.

<!-- 카카오스토리 공유 버튼 -->
<script type='text/javascript'>
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    function shareStory() {     
      	<!-- 카카오 Link 공유 API 사용-->
    };
</script>
	
<!-- 카카오톡 공유 버튼 -->
<script>
	// 사용할 앱의 JavaScript 키를 설정해 주세요.
	Kakao.init('YOUR APP KEY');
	function shareKatalk() {
    	<!-- 카카오 Link 공유 API 사용-->		
	};
</script>

script의 코드를 정리하면 위와 같습니다.

 

2. 이미지 업로드 - 카카오톡, 카카오스토리 공유 버튼 이미지 추가


저는 둥근 모양의 이미지를 사용기 위해서 이미지 업로드를 진행 하겠습니다.

파일은 각각 Kakao.png, Kakao_Strory.png 이름을 가지고 있습니다.

위 이미지를 티스토리에 업로드하기 위해서

티스토리 편집 메뉴에서

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

그리고 상단의 파일 업로드를 선택하여 이미지 파일을 하단의 추가 버튼을 이용하여 추가를 해 줍니다.

추가한 이미지는 각각 'images/Kokao.png', 'images/Kokao_Story.png" 파일 경로를 가지게 됩니다.

3. 이미지 버튼 사용을 위한 코드 수정 - 카카오톡, 카카오스토리 공유 버튼 코드 수정


Kakao Developers 에서 얻은 JavaScript를 사용하여 이미지 버튼 코드를 작성하겠습니다.

그리고, 카카오에서 제공하는 사이트의 메타 정보를 링크로 전송하는

Kakao.Link.sendScrap() API와 Kakao.Story.share() API를 사용하겠습니다.

<!-- 카카오스토리 공유 버튼 -->
<!-- 카카오스토리 버튼 이미지-->
<a href="javascript:shareStory()"><img src="./images/Kakao_Story.png"></a>
<!-- 카카오스토리 공유 JavaScript -->
<script>
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('ee909bb9d71436fc3912b195d2045ff7');
    function shareStory() {
      	<!-- 카카오 Link 공유 API 사용-->
		Kakao.Story.share({
			url : document.URL,
			text : document.title			  
		});
    };
</script>
	
<!-- 카카오톡 공유 버튼 -->
<!-- 카카오톡 버튼 이미지 -->
<a href="javascript:shareKatalk()"><img src="./images/Kakao.png"></a>  
<!-- 카카오톡 공유 JavaScript -->
<script>
	// 사용할 앱의 JavaScript 키를 설정해 주세요.
	Kakao.init('ee909bb9d71436fc3912b195d2045ff7');
	function shareKatalk() {
    	<!-- 카카오 Link 공유 API 사용-->
		Kakao.Link.sendScrap({
			requestUrl: location.href
		});	
};
</script>

Kakao.Link.sendScrap()에서 requestUrl은 

스크랩 할 사이트 URL, 해당 사이트의 메타 정보를 토대로 링크를 생성합니다.

4. 티스토리 HTML 태그에 적용 - 카카오톡, 카카오스토리 공유 버튼 코드 적용


공유 버튼 코드를 자신의 티스토리 블로그에 적용하기 위해서,

티스토리 편집 메뉴에서

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

저는 제일 위에서 보여 드린 이미지처럼 본문과 태그 사이에 공유 버튼을 위치하겠습니다.

티스토리 본문 치환자는 입니다.

이 치환자의 위에 삽입하면 본문의 위에, 아래에 삽입하면 본문 아래에 적용이 됩니다.

그러면 저는 본문 아래였기 때문에

치환자의 코드 밑에 배치를 하겠습니다.

HTML 태그에서 'Ctrl+F'를 하시고 검색하시면 쉽게 찾을 수 있습니다.

제가 추가한 부분입니다. 사용하는 스킨에 따라 적용된 모습이 다를 수도 있지만,

본문 치환자의 위치를 기준으로 한다고 생각하시면 됩니다.

추가하면 아래 그림과 같이 좌측에 배치가 됩니다.

개인적인 생각으로 가운데 배치가 깔끔할 듯하여 가운데 배치로 바꿔 보도록 하겠습니다.

<center>태그를 사용할 수도 있지만, 저는 <div>태그를 사용하였습니다.

가운데 배치가 적용된 코드입니다.

 <!-- 티스토리 스킨의 본문 -->
<!-- SNS 공유 -->
<!-- 가운데 배치 -->
<div style="width:100%; margin:30px 0px; text-align:center;">
	<!-- 카카오스토리 공유 버튼 -->
	<!-- 카카오스토리 버튼 이미지-->
	<a href="javascript:shareStory()"><img src="./images/Kakao_Story.png"></a>
	<!-- 카카오스토리 공유 JavaScript -->
	<script>
		// 사용할 앱의 JavaScript 키를 설정해 주세요.
		Kakao.init('ee909bb9d71436fc3912b195d2045ff7');
		function shareStory() {
			<!-- 카카오 Link 공유 API 사용-->
			Kakao.Story.share({
				url : document.URL,
				text : document.title			  
			});
		};
	</script>
		
	<!-- 카카오톡 공유 버튼 -->
	<!-- 카카오톡 버튼 이미지 -->
	<a href="javascript:shareKatalk()"><img src="./images/Kakao.png"></a>  
	<!-- 카카오톡 공유 JavaScript -->
	<script>
		// 사용할 앱의 JavaScript 키를 설정해 주세요.
		Kakao.init('ee909bb9d71436fc3912b195d2045ff7');
		function shareKatalk() {
			<!-- 카카오 Link 공유 API 사용-->
			Kakao.Link.sendScrap({
				requestUrl: location.href
			});	
	};
	</script>
</div>

가운데로 옮겨진 모습입니다.

공유 버튼을 누르면 아래와 같은 창이 나오게 됩니다.

사용한 소스 코드 및 이미지를 첨부하였습니다.

카카오톡_카카오스토리_공유버튼_소스코드.txt
0.00MB
Kakao.png
0.00MB
Kakao_Story.png
0.00MB

티스토리 공유 버튼 관련글

Facebook 공유 버튼

Twitter 공유 버튼

네이버, 밴드 공유 버튼

FlipBoard 공유 버튼

728x90
반응형
입니다.

이 치환자의 위에 삽입하면 본문의 위에, 아래에 삽입하면 본문 아래에 적용이 됩니다.

그러면 저는 본문 아래였기 때문에

치환자의 코드 밑에 배치를 하겠습니다.

HTML 태그에서 'Ctrl+F'를 하시고 검색하시면 쉽게 찾을 수 있습니다.

제가 추가한 부분입니다. 사용하는 스킨에 따라 적용된 모습이 다를 수도 있지만,

본문 치환자

728x90
반응형

이제는 카카오스토리 공유 버튼을 할 차례입니다.

카카오 톡, 카카오 스토리 공유버튼 적용하기

  1. 카카오톡, 카카오스토리 공유 준비 및 코드 획득

  2. 이미지 업로드

  3. 이미지 버튼 사용을 위한 코드 수정

  4. 티스토리 HTML 태그에 적용

카카오톡과 카카오스토리는 기존과는 다른 API 제공 방식을 사용하는 듯 하여서,

위의 방법으로 진행을 하였습니다.

티스토리의 다른 포스팅을 보면, 카카오스토리의 경우 공유 url을 사용하여 하는 방법도 있습니다.

코드만 공유하겠습니다.

<!-- url을 이용한 공유 방법 -->
<a href="#" onclick="javascript:window.open('https://story.kakao.com/s/share?url='+encodeURIComponent(document.URL), 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');
	return false;" 
	target="_blank" alt="Share on kakaostory">
	<img src="./images/Kakao_Story.png"></a>

저는 KaKao Developers에서 개발 가이드 해주는 부분으로 진행을 하였습니다.

1. 카카오톡, 카카오스토리 공유 준비 및 코드 획득


카카오 Developers 페이지에 접속합니다.

그래서 API 관련을 찾았어요.

카카오스토리 공유하기 페이지 이 곳에 접속하시면 됩니다.

접속해서 카카오스토리 공유하기를 보았습니다.

카카오는 앱을 등록하여 'YOUR APP KEY'를 JavaScript키로 변경을 해주어야 한다고 합니다.

그래서 저는 기존 카카오 아이디로 로그인을 하고 내 애플리케이션을 만들어 주었습니다.

그러면 JavaScript 키가 생성이 됩니다.

자바스크립트키는 굳이 가릴 필요가 없었습니다. 페이지에서 소스보기 하면 누구나다 찾아 볼수 있었습니다.

그리고 내 애플리케이션 > 개요> 카카오 로그인 사용자 관리를 설정하여 사용가능으로 만들어 주었습니다.

프로필 정보에 수집 목적, 카카오 계정(이메일) 수집 목적은 카카오 공유로 하고 저장 하였습니다.

그리고 설정 > 일반 > 플랫폼에서 플랫폼 추가를 하였습니다.

그리고 개발자 가이드로 가서 카카오톡 공유와 카카오스토리 공유 코드를 얻습니다.

카카오에서는 JavaScript 방법으로 공유를 지원합니다.

카카오톡은 shareKatalk(), 카카오스토리는 shareStory()가 됩니다.

<!-- 카카오스토리 공유 버튼 -->
<script type='text/javascript'>
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    function shareStory() {     
      	<!-- 카카오 Link 공유 API 사용-->
    };
</script>
	
<!-- 카카오톡 공유 버튼 -->
<script>
	// 사용할 앱의 JavaScript 키를 설정해 주세요.
	Kakao.init('YOUR APP KEY');
	function shareKatalk() {
    	<!-- 카카오 Link 공유 API 사용-->		
	};
</script>

script의 코드를 정리하면 위와 같습니다.

 

2. 이미지 업로드 - 카카오톡, 카카오스토리 공유 버튼 이미지 추가


저는 둥근 모양의 이미지를 사용기 위해서 이미지 업로드를 진행 하겠습니다.

파일은 각각 Kakao.png, Kakao_Strory.png 이름을 가지고 있습니다.

위 이미지를 티스토리에 업로드하기 위해서

티스토리 편집 메뉴에서

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

그리고 상단의 파일 업로드를 선택하여 이미지 파일을 하단의 추가 버튼을 이용하여 추가를 해 줍니다.

추가한 이미지는 각각 'images/Kokao.png', 'images/Kokao_Story.png" 파일 경로를 가지게 됩니다.

3. 이미지 버튼 사용을 위한 코드 수정 - 카카오톡, 카카오스토리 공유 버튼 코드 수정


Kakao Developers 에서 얻은 JavaScript를 사용하여 이미지 버튼 코드를 작성하겠습니다.

그리고, 카카오에서 제공하는 사이트의 메타 정보를 링크로 전송하는

Kakao.Link.sendScrap() API와 Kakao.Story.share() API를 사용하겠습니다.

<!-- 카카오스토리 공유 버튼 -->
<!-- 카카오스토리 버튼 이미지-->
<a href="javascript:shareStory()"><img src="./images/Kakao_Story.png"></a>
<!-- 카카오스토리 공유 JavaScript -->
<script>
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('ee909bb9d71436fc3912b195d2045ff7');
    function shareStory() {
      	<!-- 카카오 Link 공유 API 사용-->
		Kakao.Story.share({
			url : document.URL,
			text : document.title			  
		});
    };
</script>
	
<!-- 카카오톡 공유 버튼 -->
<!-- 카카오톡 버튼 이미지 -->
<a href="javascript:shareKatalk()"><img src="./images/Kakao.png"></a>  
<!-- 카카오톡 공유 JavaScript -->
<script>
	// 사용할 앱의 JavaScript 키를 설정해 주세요.
	Kakao.init('ee909bb9d71436fc3912b195d2045ff7');
	function shareKatalk() {
    	<!-- 카카오 Link 공유 API 사용-->
		Kakao.Link.sendScrap({
			requestUrl: location.href
		});	
};
</script>

Kakao.Link.sendScrap()에서 requestUrl은 

스크랩 할 사이트 URL, 해당 사이트의 메타 정보를 토대로 링크를 생성합니다.

4. 티스토리 HTML 태그에 적용 - 카카오톡, 카카오스토리 공유 버튼 코드 적용


공유 버튼 코드를 자신의 티스토리 블로그에 적용하기 위해서,

티스토리 편집 메뉴에서

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

저는 제일 위에서 보여 드린 이미지처럼 본문과 태그 사이에 공유 버튼을 위치하겠습니다.

티스토리 본문 치환자는 입니다.

이 치환자의 위에 삽입하면 본문의 위에, 아래에 삽입하면 본문 아래에 적용이 됩니다.

그러면 저는 본문 아래였기 때문에

치환자의 코드 밑에 배치를 하겠습니다.

HTML 태그에서 'Ctrl+F'를 하시고 검색하시면 쉽게 찾을 수 있습니다.

제가 추가한 부분입니다. 사용하는 스킨에 따라 적용된 모습이 다를 수도 있지만,

본문 치환자의 위치를 기준으로 한다고 생각하시면 됩니다.

추가하면 아래 그림과 같이 좌측에 배치가 됩니다.

개인적인 생각으로 가운데 배치가 깔끔할 듯하여 가운데 배치로 바꿔 보도록 하겠습니다.

<center>태그를 사용할 수도 있지만, 저는 <div>태그를 사용하였습니다.

가운데 배치가 적용된 코드입니다.

 <!-- 티스토리 스킨의 본문 -->
<!-- SNS 공유 -->
<!-- 가운데 배치 -->
<div style="width:100%; margin:30px 0px; text-align:center;">
	<!-- 카카오스토리 공유 버튼 -->
	<!-- 카카오스토리 버튼 이미지-->
	<a href="javascript:shareStory()"><img src="./images/Kakao_Story.png"></a>
	<!-- 카카오스토리 공유 JavaScript -->
	<script>
		// 사용할 앱의 JavaScript 키를 설정해 주세요.
		Kakao.init('ee909bb9d71436fc3912b195d2045ff7');
		function shareStory() {
			<!-- 카카오 Link 공유 API 사용-->
			Kakao.Story.share({
				url : document.URL,
				text : document.title			  
			});
		};
	</script>
		
	<!-- 카카오톡 공유 버튼 -->
	<!-- 카카오톡 버튼 이미지 -->
	<a href="javascript:shareKatalk()"><img src="./images/Kakao.png"></a>  
	<!-- 카카오톡 공유 JavaScript -->
	<script>
		// 사용할 앱의 JavaScript 키를 설정해 주세요.
		Kakao.init('ee909bb9d71436fc3912b195d2045ff7');
		function shareKatalk() {
			<!-- 카카오 Link 공유 API 사용-->
			Kakao.Link.sendScrap({
				requestUrl: location.href
			});	
	};
	</script>
</div>

가운데로 옮겨진 모습입니다.

공유 버튼을 누르면 아래와 같은 창이 나오게 됩니다.

사용한 소스 코드 및 이미지를 첨부하였습니다.

카카오톡_카카오스토리_공유버튼_소스코드.txt
0.00MB
Kakao.png
0.00MB
Kakao_Story.png
0.00MB

티스토리 공유 버튼 관련글

Facebook 공유 버튼

Twitter 공유 버튼

네이버, 밴드 공유 버튼

FlipBoard 공유 버튼

728x90
반응형
의 위치를 기준으로 한다고 생각하시면 됩니다.

추가하면 아래 그림과 같이 좌측에 배치가 됩니다.

개인적인 생각으로 가운데 배치가 깔끔할 듯하여 가운데 배치로 바꿔 보도록 하겠습니다.

<center>태그를 사용할 수도 있지만, 저는 <div>태그를 사용하였습니다.

가운데 배치가 적용된 코드입니다.







                    
        
728x90
반응형

이제는 카카오스토리 공유 버튼을 할 차례입니다.

카카오 톡, 카카오 스토리 공유버튼 적용하기

  1. 카카오톡, 카카오스토리 공유 준비 및 코드 획득

  2. 이미지 업로드

  3. 이미지 버튼 사용을 위한 코드 수정

  4. 티스토리 HTML 태그에 적용

카카오톡과 카카오스토리는 기존과는 다른 API 제공 방식을 사용하는 듯 하여서,

위의 방법으로 진행을 하였습니다.

티스토리의 다른 포스팅을 보면, 카카오스토리의 경우 공유 url을 사용하여 하는 방법도 있습니다.

코드만 공유하겠습니다.

<!-- url을 이용한 공유 방법 -->
<a href="#" onclick="javascript:window.open('https://story.kakao.com/s/share?url='+encodeURIComponent(document.URL), 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');
	return false;" 
	target="_blank" alt="Share on kakaostory">
	<img src="./images/Kakao_Story.png"></a>

저는 KaKao Developers에서 개발 가이드 해주는 부분으로 진행을 하였습니다.

1. 카카오톡, 카카오스토리 공유 준비 및 코드 획득


카카오 Developers 페이지에 접속합니다.

그래서 API 관련을 찾았어요.

카카오스토리 공유하기 페이지 이 곳에 접속하시면 됩니다.

접속해서 카카오스토리 공유하기를 보았습니다.

카카오는 앱을 등록하여 'YOUR APP KEY'를 JavaScript키로 변경을 해주어야 한다고 합니다.

그래서 저는 기존 카카오 아이디로 로그인을 하고 내 애플리케이션을 만들어 주었습니다.

그러면 JavaScript 키가 생성이 됩니다.

자바스크립트키는 굳이 가릴 필요가 없었습니다. 페이지에서 소스보기 하면 누구나다 찾아 볼수 있었습니다.

그리고 내 애플리케이션 > 개요> 카카오 로그인 사용자 관리를 설정하여 사용가능으로 만들어 주었습니다.

프로필 정보에 수집 목적, 카카오 계정(이메일) 수집 목적은 카카오 공유로 하고 저장 하였습니다.

그리고 설정 > 일반 > 플랫폼에서 플랫폼 추가를 하였습니다.

그리고 개발자 가이드로 가서 카카오톡 공유와 카카오스토리 공유 코드를 얻습니다.

카카오에서는 JavaScript 방법으로 공유를 지원합니다.

카카오톡은 shareKatalk(), 카카오스토리는 shareStory()가 됩니다.

<!-- 카카오스토리 공유 버튼 -->
<script type='text/javascript'>
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    function shareStory() {     
      	<!-- 카카오 Link 공유 API 사용-->
    };
</script>
	
<!-- 카카오톡 공유 버튼 -->
<script>
	// 사용할 앱의 JavaScript 키를 설정해 주세요.
	Kakao.init('YOUR APP KEY');
	function shareKatalk() {
    	<!-- 카카오 Link 공유 API 사용-->		
	};
</script>

script의 코드를 정리하면 위와 같습니다.

 

2. 이미지 업로드 - 카카오톡, 카카오스토리 공유 버튼 이미지 추가


저는 둥근 모양의 이미지를 사용기 위해서 이미지 업로드를 진행 하겠습니다.

파일은 각각 Kakao.png, Kakao_Strory.png 이름을 가지고 있습니다.

위 이미지를 티스토리에 업로드하기 위해서

티스토리 편집 메뉴에서

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

그리고 상단의 파일 업로드를 선택하여 이미지 파일을 하단의 추가 버튼을 이용하여 추가를 해 줍니다.

추가한 이미지는 각각 'images/Kokao.png', 'images/Kokao_Story.png" 파일 경로를 가지게 됩니다.

3. 이미지 버튼 사용을 위한 코드 수정 - 카카오톡, 카카오스토리 공유 버튼 코드 수정


Kakao Developers 에서 얻은 JavaScript를 사용하여 이미지 버튼 코드를 작성하겠습니다.

그리고, 카카오에서 제공하는 사이트의 메타 정보를 링크로 전송하는

Kakao.Link.sendScrap() API와 Kakao.Story.share() API를 사용하겠습니다.

<!-- 카카오스토리 공유 버튼 -->
<!-- 카카오스토리 버튼 이미지-->
<a href="javascript:shareStory()"><img src="./images/Kakao_Story.png"></a>
<!-- 카카오스토리 공유 JavaScript -->
<script>
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('ee909bb9d71436fc3912b195d2045ff7');
    function shareStory() {
      	<!-- 카카오 Link 공유 API 사용-->
		Kakao.Story.share({
			url : document.URL,
			text : document.title			  
		});
    };
</script>
	
<!-- 카카오톡 공유 버튼 -->
<!-- 카카오톡 버튼 이미지 -->
<a href="javascript:shareKatalk()"><img src="./images/Kakao.png"></a>  
<!-- 카카오톡 공유 JavaScript -->
<script>
	// 사용할 앱의 JavaScript 키를 설정해 주세요.
	Kakao.init('ee909bb9d71436fc3912b195d2045ff7');
	function shareKatalk() {
    	<!-- 카카오 Link 공유 API 사용-->
		Kakao.Link.sendScrap({
			requestUrl: location.href
		});	
};
</script>

Kakao.Link.sendScrap()에서 requestUrl은 

스크랩 할 사이트 URL, 해당 사이트의 메타 정보를 토대로 링크를 생성합니다.

4. 티스토리 HTML 태그에 적용 - 카카오톡, 카카오스토리 공유 버튼 코드 적용


공유 버튼 코드를 자신의 티스토리 블로그에 적용하기 위해서,

티스토리 편집 메뉴에서

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

저는 제일 위에서 보여 드린 이미지처럼 본문과 태그 사이에 공유 버튼을 위치하겠습니다.

티스토리 본문 치환자는 입니다.

이 치환자의 위에 삽입하면 본문의 위에, 아래에 삽입하면 본문 아래에 적용이 됩니다.

그러면 저는 본문 아래였기 때문에

치환자의 코드 밑에 배치를 하겠습니다.

HTML 태그에서 'Ctrl+F'를 하시고 검색하시면 쉽게 찾을 수 있습니다.

제가 추가한 부분입니다. 사용하는 스킨에 따라 적용된 모습이 다를 수도 있지만,

본문 치환자의 위치를 기준으로 한다고 생각하시면 됩니다.

추가하면 아래 그림과 같이 좌측에 배치가 됩니다.

개인적인 생각으로 가운데 배치가 깔끔할 듯하여 가운데 배치로 바꿔 보도록 하겠습니다.

<center>태그를 사용할 수도 있지만, 저는 <div>태그를 사용하였습니다.

가운데 배치가 적용된 코드입니다.

 <!-- 티스토리 스킨의 본문 -->
<!-- SNS 공유 -->
<!-- 가운데 배치 -->
<div style="width:100%; margin:30px 0px; text-align:center;">
	<!-- 카카오스토리 공유 버튼 -->
	<!-- 카카오스토리 버튼 이미지-->
	<a href="javascript:shareStory()"><img src="./images/Kakao_Story.png"></a>
	<!-- 카카오스토리 공유 JavaScript -->
	<script>
		// 사용할 앱의 JavaScript 키를 설정해 주세요.
		Kakao.init('ee909bb9d71436fc3912b195d2045ff7');
		function shareStory() {
			<!-- 카카오 Link 공유 API 사용-->
			Kakao.Story.share({
				url : document.URL,
				text : document.title			  
			});
		};
	</script>
		
	<!-- 카카오톡 공유 버튼 -->
	<!-- 카카오톡 버튼 이미지 -->
	<a href="javascript:shareKatalk()"><img src="./images/Kakao.png"></a>  
	<!-- 카카오톡 공유 JavaScript -->
	<script>
		// 사용할 앱의 JavaScript 키를 설정해 주세요.
		Kakao.init('ee909bb9d71436fc3912b195d2045ff7');
		function shareKatalk() {
			<!-- 카카오 Link 공유 API 사용-->
			Kakao.Link.sendScrap({
				requestUrl: location.href
			});	
	};
	</script>
</div>

가운데로 옮겨진 모습입니다.

공유 버튼을 누르면 아래와 같은 창이 나오게 됩니다.

사용한 소스 코드 및 이미지를 첨부하였습니다.

카카오톡_카카오스토리_공유버튼_소스코드.txt
0.00MB
Kakao.png
0.00MB
Kakao_Story.png
0.00MB

티스토리 공유 버튼 관련글

Facebook 공유 버튼

Twitter 공유 버튼

네이버, 밴드 공유 버튼

FlipBoard 공유 버튼

728x90
반응형
<!-- 티스토리 스킨의 본문 --> <!-- SNS 공유 --> <!-- 가운데 배치 --> <div style="width:100%; margin:30px 0px; text-align:center;"> <!-- 카카오스토리 공유 버튼 --> <!-- 카카오스토리 버튼 이미지--> <a href="javascript:shareStory()"><img src="./images/Kakao_Story.png"></a> <!-- 카카오스토리 공유 JavaScript --> <script> // 사용할 앱의 JavaScript 키를 설정해 주세요. Kakao.init('ee909bb9d71436fc3912b195d2045ff7'); function shareStory() { <!-- 카카오 Link 공유 API 사용--> Kakao.Story.share({ url : document.URL, text : document.title }); }; </script> <!-- 카카오톡 공유 버튼 --> <!-- 카카오톡 버튼 이미지 --> <a href="javascript:shareKatalk()"><img src="./images/Kakao.png"></a> <!-- 카카오톡 공유 JavaScript --> <script> // 사용할 앱의 JavaScript 키를 설정해 주세요. Kakao.init('ee909bb9d71436fc3912b195d2045ff7'); function shareKatalk() { <!-- 카카오 Link 공유 API 사용--> Kakao.Link.sendScrap({ requestUrl: location.href }); }; </script> </div>

가운데로 옮겨진 모습입니다.

공유 버튼을 누르면 아래와 같은 창이 나오게 됩니다.

사용한 소스 코드 및 이미지를 첨부하였습니다.

카카오톡_카카오스토리_공유버튼_소스코드.txt
0.00MB
Kakao.png
0.00MB
Kakao_Story.png
0.00MB

티스토리 공유 버튼 관련글

Facebook 공유 버튼

Twitter 공유 버튼

네이버, 밴드 공유 버튼

FlipBoard 공유 버튼

728x90
반응형

카테고리의 글 목록 더보기

댓글 영역

Please Enable JavaScript!
Mohon Aktifkan Javascript![ Enable JavaScript ]