| CMS/프레임워크 | 기타 |
|---|---|
| 개발 언어 | 사용안함 |
| 문제 페이지 주소 | 비공개 (작성 후 5일 경과) |
먼저 라이믹스에 대한 질문이 아닌 타 플랫폼에 대한 질문이라 죄송합니다.
해당 질문을 티스토리 포럼에도 올려 봤습니다만 티스토리 포럼은 이곳처럼 피드백이 원할하지가 않더군요;;;
해서 실례를 무룹쓰고 이곳에 올리게 되었으니 회원 분들과 운영자 님의 넓은 양해를 먼저 부탁드립니다///
질문은 자바스크립트의 핀터레스트 로 포스팅의 url 을 불러오는 구문에 관련된 질문 인데요 티스토리에 핀터레스트 공유에 관한 글이 없어서 자른 플랫폼에 올라온 텍스트 자바스크립트의 구문을 나름대로 편집헤서 티스토리 스킨에 반영해 봤으나 링크를 선택할시 페이지만 새로고침되면서 핀터레스트로 넘어가질 않더군요;;;
티스토리에 올라온 sns 공유링크중 핀터레스트 는 실행이 안되더군요;;; 스크립트 구문을 넣어봤는데 실행이 안되더군요 티스토리에서는 핀터레스트 공유링크가 작동을 안하는건가요?
아래는 제가 테스트해본 자바스크립트 코드입니다.
혹시 자바스크립트 문법에 해박한 분이 있으시면 한번 봐주시면 감사하겠습니다.
실행해보면 다른창으로 글 페이지만 새창으로뜨고 핀터레스트로는 넘어가질 않습니다.
오류난 url을 복사 붙혀넣으면 일단 핀터레스트 까지는 넘어가는데
url 에대한 매개 변수가 유효한 url 형식이 아니란 오류메세지가 뜹니다.
티스토리 스킨에 반영했던 텍스트 자바스크립트 코드 입니다
|
1
2
3
4
5
6
|
<a href="#"
onclick="javascript:window.open('https://www.pinterest.com/pin/create/button/?url=
'+encodeURIComponent(document.URL)+'&mediaurl='+encodeURIComponent(img)+'&description=
'+encodeURIComponent(title), 'pinterestsharedialog', 'menubar=no,toolbar=no,resizable=
yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" title="핀터레스트공유하기" alt="핀터레스트 공유">
<img class="img_sns_box" src="https://tistory1.daumcdn.net/tistory/1887668/skin/images/pinterest.png"></a>
|
cs |
위에 코드의 어떤 부분을 수정해 봐야 하는지 자바스크립트에 능숙한 분의 귀한 조언을 부탁합니다
좋은 하루되시길 바라며 혹시라도 제글이 운영정책에 문제가 된다면 삭제를 하도록 하겠습니다
![b1108e70-aa2d-4338-8257-d0b102bbb641.png [File Size:36.6KB/Download:4]](/files/download/link/1748036/a921e506deaec9aebecfa7765e5fc93d/b1108e70-aa2d-4338-8257-d0b102bbb641.png){kind=link}
![5991748c-6987-4dbd-9d10-3dbf328d53aa.png [File Size:18.9KB/Download:4]](/files/download/link/1748037/429e926573f10b9ca0ac1ef6f9f1a219/5991748c-6987-4dbd-9d10-3dbf328d53aa.png){kind=link}
댓글 7
encodeURIComponent(document.URL) 를 그냥 document.URL 로 바꿔보세요. URL은 http:// 또는 https://로 시작해야 하는데, encodeURIComponent 함수를 쓰면 https%3A%2F%2F 이렇게 인코딩이 되어버립니다. 뒷부분의 제목 등을 인코딩할 때 써야 하는 함수인데 너무 여기저기 다 붙이신 것 같아요.
가진곰 님의 조언대로 encodeURIComponent(document.URL) 를 뒤에만 설정 했습니다 훨씬 깔끔하게 출력이 되는군요 정말 감사합니다 그런데 한가지 이미지 출력을 "mediaurl='+document.img +' " 이렇게 설정을 하니까 pc에서는 대표이미지를 가져오는데 모바일 에서는 페이지의 모든이미지를 가져오는 문제가 있더군요? 브라우져 창을 살펴보니 &mediaurl=undefined& 이렇게 mediaur 출력 요소가 지정되지 않아서 생기는 현상 인듯한데 이부분을 수정해 보려면 어떻게 구성해 보는게 좋을까요?
수정한 목록 입니다
<a href="#" onclick="javascript:window.open('https://www.pinterest.com/pin/create/button/?url='+document.URL+'&mediaurl='+document.img+'&description='+encodeURIComponent(document.title), 'pinterestsharedialog',
'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" title="핀터레스트공유하기" alt="핀터레스트 공유">
<img class="img_sns_box" src="https://tistory1.daumcdn.net/tistory/1887668/skin/images/pinterest.png"></a>
문제는 핀터레스트 API구조와 티스토리 자체의 대표이미지 처리가 어떤방식으로 구현되는건지 좀더 알아보겠습니다.
귀한 댓글 감사합니다.이리저리 만지작 거리다 보니 어쩌다 성공은 했는데 스크립트 구문에 자신이 없는 일인이라 일단 댓글 조언을 참조삼아 다시한번 살펴보겠습니다 작동은 하는데 오류가 있을지 모르겠어서요
일단 제가 사용한 스크립트 코드는 이것입니다
<a href="#" onclick="javascript:window.open('https://www.pinterest.com/pin/create/button/?url='+encodeURIComponent(document.URL)+'&mediaurl='+encodeURIComponent(document.img)+'&description='+encodeURIComponent(document.title), 'pinterestsharedialog',
'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" title="핀터레스트공유하기" alt="핀터레스트 공유">
<img class="img_sns_box" src="https://tistory1.daumcdn.net/tistory/1887668/skin/images/pinterest.png"></a>
이것으로 작동은 하는데 시간되실때 한번 살펴봐 주시길 부탁 드립니다 코드에 문제가 있으면 작은곰 님의 힌트로 다시한번 고민해 보겠습니다
귀한댓글 정말 진심으로 감사 드립니다 ^^
참고로 댓글 작성자에게 답변하시기 위해서는 대댓글 기능을 이용하시는게 좋습니다. 그냥 댓글로 다시면 그 누구에게도 알림이 가지 않습니다. 위 이미지 참고하셔서 "댓글" 링크 눌러보시면 댓글창이 뜰건데 거기에 입력해보세요