티스토리 뷰
미루다가 이제야 써봅니다 @.@
최근에 몸살로 몸이조금 안좋았던것도 있고
(지금은 많이 좋아졌군요!)
그리고 카카오톡 공유버튼을 만들었지요~
사실 그냥 모바일이라도 주소복사+붙이기하면 자동으로 카톡에서 링크반영이되는데
굳이 이런걸 만들어야 할까 싶긴했는데
만.들.었.군.요
...
사실 처음에 하다가 잘 안되서 그냥 포기할까 했습니다
그러다가 좋은블로그의 글을보고 도움도 좀 받고해서 완성되었네요!
소소한 정보라도 누군가에게는 도움이되고
또 저에게는 기록용으로 메모도해두고 1석2조라 생각하고 글을 써내려가보겠습니다
아무것도 모르는 초보가봐도
누구나 적용할 수 있게 쉽게 작성하는만큼
따라오시면 누구나 100% 적용가능할겁니다
(자부합니다)
저는 일부.. 쉬운걸 굉장히 길게 어렵게 적어놓은
블로그때문에 폐해..를 보곤했는데 그런분이 없었으면 좋겠습니다
시작 -
우선 KakaoDevelopers 에서 앱을 만들어야 합니다
카카오톡 아이디로 로그인하시고
위 사진의 " 앱 만들기 " 를 클릭
앱의 이름을 적어줍니다
평소 본인이 사용하던 블로그에 다는거라면 저처럼 " 설란블로그 " 라고 적어주셔도 됩니다
그러면 여러가지 키 들이 나오는데
자바스크립트키가 나중에 쓰일테니 복사해두시거나 기억해두세요
설정 - 일반에서 플랫폼추가를 클릭합니다
웹으로 등록하시면 됩니다
이때 본인의 티스토리 블로그 주소를 적어주시면 되요
예)http://chlwlchlwlal.tistory.com
그럼 위 사진처럼 도메인주소를 입력하고 저장버튼을 클릭
여기서 이제 소스가 2개가 HTML쪽에 들어가야 하는데
첨부파일 올려뒀으니 참고하세요
</head> 앞에 소스1을 넣어주세요
(아래 첨부파일 참고)
카카오톡 공유하기 소스1.txt첨부파일의 소스를 복사 후 그대로 붙여넣기 합니다
저는 기존에 #1반응형스킨에서 공유하기링크를 지원하는게 있어서
빡간박스안의 내용처럼 href 에 javascript:; 로 수정해주고 id="kakao-link-btn" 이란 명령을 추가합니다
(이렇게해야 버튼을 눌렀을때 모바일에서 명령이 활성화된답니다)
(#1 반응형스킨을 사용한다면 그대로 똑같이 하시면 됩니다)
저랑같은 스킨을 사용하지않는다고해도 걱정마시고 아래로 따라와주세요
그리고 두번째 소스를 <body> ~ </body> 사이에 넣어주면 됩니다
저는 보기쉽게 카카오톡 공유하기 버튼 아래에 넣어줬습니다
마지막으로 첨부파일 소스2를 <body> ~ </body> 사이에 원하는위치에
넣어주시면 됩니다
kakao.init 란에보면 자바스크립트키는 여기에 <- 라는 부분에
아까전에 본인의 javascript 키를 입력하세요
빨간박스위에 소스는 카카오톡 버튼을 만드는 값입니다
본인이 사용하고자하는 카카오톡 이미지는 스스로 구하시거나 만드셔야해요
(저는 포토샵으로 작업 ㅠㅠ)
이부분은 #1반응형스킨에서 PC와 모바일버전에서의
위치값을 추가했는데
사실pc에서는 카카오톡버튼이 활성화가 안되기때문에
제 블로그에서처럼 보이는건 솔직히말하면 아무의미가없는데
만들었던 정성이있어서,, 그냥 뽀대(?) 용으로 노출을 시키고 있답니다
사실은 모바일에서만 저게 정상적으로 작동합니다 ^_^;;
<모바일 공유버튼 위치 및 소스값>
모든게 정상적으로 되었다면 본인이 만들었던 카카오버튼이 활성화 될겁니다!
이제 버튼을 누르면
카카오톡에서 친구에게 링크를 바로 공유가 할 수 있게 되는거지요~
그리고 아래에 " 블로그로 보러가기 " 를 클릭하면?
이처럼 상위에 카카오아이콘이 뜨면서
블로그로 연결되는걸 볼 수 있답니다
저도 검색을 하면서 알게된 정보이지만..
이상한 정보를 올려놔서 혼동을 주는분들이 있더군요 ㅠㅠ
제가 카카오톡버튼을 만들면서 참고하게된 블로그는 아래와 같습니다
혹시나 글을 보시다가 궁금한점이 있으시면 물어보시고
저도 도움을 받았던 블로그의 글들도 한번씩 살펴보시면 도움이 될 듯 합니다
'블로그 팁&생활지식' 카테고리의 다른 글
| 3d mark 사용법 벤치마크 점수 (2) | 2016.09.21 |
|---|---|
| 윈도우10 녹화 게임 캡쳐 (2) | 2016.03.03 |
| 윈도우10 앱 기본값이 초기화되었습니다 (8) | 2016.02.23 |
| hdmi 소리 tv 컴퓨터 pc 둘다 (2) | 2016.02.20 |
| 윈도우10 스카이림 게임오류 (16) | 2016.02.19 |