카카오스토리 이미지 포스팅
장미미
10년 전
조회 8,728
sns공유하기에 카카오스토리에 공유하기에는 찾아봐도 전부 링크방식으로 구현되어있더라고요
제가 원하는건 링크방식이 아닌 이미지 와 글을 포스팅 공유하는 방식으로 하고 싶은데 방법을 몰라 질문 합니다.
제가 하려는건 제 홈페이지/쇼핑몰 에서 해당 상품/게시글이 보여지는 페이지에서 카카오 스토리 공유버튼을 누르면
제 카카오 스토리에 상품디테일이미지여러장/게시판 글 내에 이미지들 을 업로드 하는 방식입니다.
카카오 스토리에서 제공하는 api 방식은 로컬에 있는 이미지를 input 방식으로 업로드하는 방식밖에는 제공하지 않는다고 하네요
그런데 이미 상품/게시글 내용들은 이미 서버에 업로드 되어있는 상탠데 어떻게 업로드 할 수 있을까요
</p><p><script type="text/javascript"></p><p>try {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if (Kakao) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>Kakao.init('앱아이디');</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>};</p><p>} catch(e) {};</p><p> </p><p>function shareKakaoStory() {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>try {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>Kakao.Auth.getStatus(function(statusObj) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if (statusObj.status == "not_connected") {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>Kakao.Auth.logout();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>Kakao.Auth.login({</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>success: function(authObj) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>shareKakaoStory();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>},</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>fail: function(err) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>alert(JSON.stringify(err));</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>},</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>persistAccessToken:true</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>} else {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var xhr = new XMLHttpRequest();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>xhr.open("GET", url, true);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>//위에 코드를 <span style="font-size: 13.3333330154419px; line-height: 1.5;">xhr.open("GET", '<span style="color: rgb(255, 255, 255); background-color: rgb(255, 0, 0);">/img.jpg'</span>, true);</span><span style="font-size: 10pt; line-height: 1.5;"></span><span style="font-size: 10pt; line-height: 1.5;"> 이렇게 직접 이미지경로를 입력하면</span></p><p><span style="font-size: 10pt; line-height: 1.5;"> // 포스팅이 되긴 하는데 이미지 한장만 업로드 되네요 근데 상품 페이지에</span></p><p><span style="font-size: 10pt; line-height: 1.5;"> // 디테일 이미지도 다 같이 올려야 하는데 어떤 방법으로 해야 하나요 </span></p><p><span style="font-size: 10pt; line-height: 1.5;"> </span></p><p style="margin-left: 120px;"><span style="font-size: 10pt; line-height: 1.5;"> xhr.responseType = 'blob';</span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>xhr.onload = function(e) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if (this.status == 200) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var blob = this.response;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>Kakao.API.request({</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>url:'/v1/api/story/upload/multi',</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>files:[blob]</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}).then(function(res) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>return Kakao.API.request({</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>url:'/v1/api/story/post/photo',</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>data:{</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>image_url_list:res,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>content:'컨텐츠 테스트'</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}).then(function(res) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>return Kakao.API.request({</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>url: '/v1/api/story/mystory',</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>data: {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>id:res.id</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}).then(function(res) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>alert('카카오스토리에 정상적으로 공유되었습니다 ');</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}, function(err) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>alert(JSON.stringify(err));</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>};</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>};</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>xhr.send();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>};</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>} catch(e) {};</p><p>};</p><p></script> </p><p>
위 코드를 여기 저기 찾아가며 해봤는데 저런식으론 이미지 url에 한개이미지 밖에는 포스팅을 할 수 없더라고요
가령 페이지에 디테일 이미지들의 엘리먼트 아이디값으로 각 이미지들 src를 가져와 카스에 포스팅하는 것을 만들고
싶습니다.
초보라 어떤식으로 코드를 수정해야 하는지 번거러우시더라도 몇줄 샘플 코드라도 적어주시면 넘 감사하겠습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인