스토리채널 구독버튼을 티스토리에 달아보자!


카카오스토리나 스토리채널과 블로그(또는 웹사이트) 동시에 운영하는 운영자라면 자신의 사이트에 카카오스토리나 스토리채널의 소식받기 버튼(구독버튼)을 달아서 블로그와 SNS를 연동시킬 수 있습니다.

여기에서는 여러 종류의 사이트 중에서 티스토리에 스토리채널 소식받기 버튼을 생성하는 것을 학습하도록 하겠습니다.



스토리채널 소식받기 버튼 웹사이트에 적용 방법


스토리채널의 소식버튼을 사이트에 게재하는 방법은 간단합니다. 아래 다섯 가지 과정을 차례대로 진행하면 됩니다.

첫째, 카카오스토리 개발자사이트에 방문
둘째, 스토리채널 URL 입력창에 스토리채널 ID 입력하기
세째, 구독 스타일 선택하기
네째, 코드 생성하기
다섯째, 생성한 코드를 블로그나 웹사이트에 적용하기

그럼 순서대로 진행하겠습니다.


첫째, 카카오스토리 개발자사이트에 방문하기


 스토리채널의 소식버튼을 달기위해서는 카카오스토리 개발자 사이트에 방문해야합니다.
카카오스토리 개발자 사이트는 다음과 같습니다.


위의 링크로 접속하면 아래와 같은 카카오스토리 개발자 사이트가 나타납니다. 




둘째, 스토리채널 URL 입력창에 스토리채널 ID 입력하기


두번째는 스토리채널 URL의 자신의 스토리채널 ID를 입력해야합니다. 입력창에 자신의 스토리채널 ID를 아래와 같이 입력합니다.





세째, 구독 스타일 선택하기


이제 소식받기 버튼의 스타일을 선택할 차례입니다. 스타일 콤보박스를 클릭하면 아래와 같이 세가지 옵션이 나타납니다.
구독자수를 노출시키지 않을 수도 있지만, 두번째 옵션인 구독자수 노출(위쪽)을 선택하겠습니다.

또한, 카카오스토리는 포토샵 화일인 psd 화일을 직접 제공합니다. 만약 웹사이트에 게재하는 카카오스토리 구독버튼 이미지를 편집해서 달고 싶다면 오른쪽 아이콘 다운로드 버튼을 클릭해서 포토샵 psd 화일을 다운로드 받을 수 있습니다.





네째, 코드 생성하기


이제 코드를 생성할 차례입니다. 코드 생성하기 버튼을 클릭합니다.



코드 생성하기 버튼을 클릭하면 아래 화면과 같이 1번과 2번 코드가 나타납니다.
1번 코드는 스토리 소식받기 버튼을 구동하는 스크립트 코드로 복사해서 자신의 사이트 HTML 소스 화면에서 <body> 태그 바로 뒤에 붙여넣으면 됩니다.
2번 코드는 웹사이트 화면에서 소식받기 버튼을 보여주고 싶은 곳에 HTML 소스를 붙여넣으면 됩니다.

일단 1번 코드와 2번 코드를 각각 메모장에 복사해둔 뒤에 다음을 진행합니다.




다섯째, 생성한 코드를 티스토리등 블로그나 웹사이트에 적용하기


이제는 복사한 코드를 티스토리에 붙여넣을 차례입니다. 티스토리에 로그인한 뒤에 관리자 왼쪽 메뉴 에서 꾸미기 > HTML/CSS 을 클릭합니다.



조금전 아래 1번코드를 메모장에 복사해두었을 것입니다. 



1번 코드를 아래와 같이 HTML 소스의 <body> 태그 바로 뒤에 붙여넣습니다.



동일한 방법으로 이제는 미리복사해둔 아래 2번코드를 자신의 사이트 HTML 소스에 붙여넣기를 합니다.
저의 경우에는 공유하기 버튼들이 있는 소스부분에 붙여넣었습니다.




티스토리 사이트에 적용 결과보기


1번 2번 코드를 모두 HTML 소스에 붙여넣으면 아래 화면과 같이 스토리채널 소식받기 버튼이 나타나는 것을 확인할 수 있습니다.



+ Recent posts