728x90
반응형
https://recoeve.net/reco?uri=https://kipid.tistory.com/entry/Sharing-URI-through-SNS&title=SNS 내보내기/공유하기 (Sharing a URI link through SNS)&cats=[IT/Programming]--HTML 와 같은 형태임.
실제 url 은 encodeURIComponent 함수를 써서 https://recoeve.net/reco?uri=https%3A%2F%2Fkipid.tistory.com%2Fentry%2FSharing-URI-through-SNS&title=SNS%20%EB%82%B4%EB%B3%B4%EB%82%B4%EA%B8%B0%2F%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0%20(Sharing%20a%20URI%20link%20through%20SNS) 와 같이 표시되어야 함.
매개변수 (Parameter) uri, title, cats 등을 지원함.
### Button
버튼을 만들어 볼까나?
```[.lang-html.linenums]
<button onclick="k.popUpRecoeve()">Recoeve</button>
```/
```[#pre-code-recoeve.linenums]
```/
Recoeve 에 reco 하기.
Recoeve 에 현재 페이지 reco 해보기 (iframe).
navigator.clipboard.writeText 는 Only supported on pages served over HTTPS 라고... HTTPS 구현 했으니 해놓자.
2. Document.execCommand() 도 deprecated 라 함.
3. 참고해서... (이건 뭔지 모르겄넹;;; copy 안되는데 ㅡ,.ㅡ)
### Button
버튼을 만들어 볼까나?
```[.lang-html.linenums]
<button onclick="k.copyToClipboard()">Copy</button>
```/
```[#pre-code-copy-to-clipboard.linenums]
```/
## X (트위터)
트위터는 https://X.com/intent/tweet 통해서 지원하는듯. 매개변수 (Parameter: via (이건 꼭 자신에게 맞는 id 로 바꾸시길. kipacti 로 그대로 쓰시지 말고...), text, url 등) 들도 지원함 .
로 접속하면, SNS 내보내기/공유하기 테스트 https://kipid.tistory.com/entry/Sharing-URI-through-SNS via @kipacti 가 채워져서 트윗이 나타남.
트위터 링크 공유. (Share a link with your followers.)
Refused to display 'https://X.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. 라고 뜨면서 거부. 이래서 다들 out pop-up 으로 공유창 띄우는구나? 뭔가 다른식으로 in pop-up 으로 구현할수도 있을거 같긴한데...
### Button
버튼을 만들어 볼까나?
```[.lang-html.linenums]
<button onclick="k.popUpX()">X</button>
```/
```[#pre-code-X.linenums]
```/
### Logo
트위터 로고 어찌 구현한거지? 신기하네;;; CSS 로 content:"\f179"; font-family:"rosettaicons"; -webkit-font-smoothing:antialiased; 요렇게 해놓으면 로고가 뜨도록 해놨던데.. 긁어다가 테스트 해보니 안되고. 뭔가 웹폰트를 이용한거 같은데... 신기하당.
뭐 귀찮으니 난 스크린 캡쳐해서 이미지로 구현해야겠음. Logo 는 SVG 이용해서 scalable 하게 만드는게 이쁘긴 한듯. 그런데 이렇게 하면 딴 사람들이 퍼가기는 쉽지 않다는거...
## Facebook (페이스북)
페이스북은 https://www.facebook.com/sharer/sharer.php 를 통해서 지원함. 매개변수 (Parameter: u (URI)) 도 있음. t (title? text?) 는 지원이 중단됐다고... u 하나만 있는건가 그러면? =ㅇ= .
에 접속하면, URI 이 붙은채로 내 타임라인에 글을 쓸 수 있음.
페이스북 링크 공유.
Refused to display 'https://www.facebook.com/sharer/sharer.php' in a frame because it set 'X-Frame-Options' to 'DENY'. 라고 뜨면서 거부.
### Meta informations
Meta tag 를 이용해서 요약정보를 어느정도 수정할수도 있는듯?
```
<meta property="fb:app_id" content="APP_ID" />
<meta property="og:type" content="website" />
<meta property="og:title" content="웹 페이지 제목" />
<meta property="og:url" content="웹 페이지 URI" />
<meta property="og:description" content="웹 페이지 내용" />
<meta property="og:image" content="웹 페이지 대표 이미지" />
```/
(테스트 해보고는 있는데, 업데이트 되는데에는 시간이 좀 걸리는듯? 페이스북이 페이지들을 crawling 하면서 데이터베이스를 따로 만들어 놓는듯한데...) 뭐 이런거까지 신경쓰면서 글 쓸 사람은 별로 없을듯. 대충 링크만 공유합시다. 내용은 페북이 알아서 긁어다가 분석하겠지.
### Button
버튼을 만들어 볼까나?
```[.lang-html.linenums]
<button onclick="k.popUpFacebook()">Facebook</button>
```/
```[#pre-code-fb.linenums]
```/
## 카카오톡 (Kakao talk)
카톡도 그냥 url 링크로 접속하면 알아서 앱 열어주고 하는식으로 동작하게 만들지. 자기들 개발하기 편한대로 만들어놔서 복잡한듯. 트위터나 페이스북 벤치마킹 좀 하지. 국내시장만 노려서 그런가? 배짱 개발이 많은듯도...
카카오톡 공유는 참고.
### Button
버튼을 만들어 볼까나?
```[.lang-html.linenums]
<button onclick="k.popUpKakao()">Kakao</button>
```/
```[#pre-code-kakao.linenums]
```/
카카오톡 공유하기.
https://wa.me/?text=I'm inquiring about the apartment listing 와 같은 링크.
실제 url 은 encodeURIComponent 함수를 써서 https://wa.me/?text=I'm%20inquiring%20about%20the%20apartment%20listing 와 같음.
### Button
버튼을 만들어 볼까나?
```[.lang-html.linenums]
<button onclick="k.popUpWhatsapp()">WhatsApp</button>
```/
```[#pre-code-whatsapp.linenums]
```/
## 한꺼번에 처리하기 (All codes in one function)
```[.scrollable.lang-js]
<style>
.block-touch {
display:flex;
position:fixed;
z-index:30000;
inset:0;
background-color:rgba(0, 0, 0, .5);
}
.block-touch>div {
display:inline-block;
margin:auto;
border:5px solid wheat;
width:30em;
maxWidth:100%
}
.block-touch>div>div {
padding:.5em 1em;
width:100%;
background-color:black;
color:white
}
.block-touch>div>textarea {
padding:.5em 1em;
width:100%;
height:20em;
background-color:white;
color:black
}
.exit {
z-index:31000;
position:absolute;
display:inline-block;
top:0;
right:0;
width:3em;
height:3em;
line-height:1.0;
text-align:center;
cursor:pointer;
border:2px rgb(80, 80, 80) solid;
background-color:rgb(30, 30, 30);
color:white
}
.exit>svg {
width:100%;
height:100%;
font-size:3em;
line-height:1.0
}
.block-touch-exit {
zIndex:31000;
position:fixed
}
.block-touch-exit g {
stroke:white;
stroke-width:23%
}
</style>
<script>
(function (k, $) {
////////////////////////////////////////////////////
// Escape and Unescape HTML string.
////////////////////////////////////////////////////
k.escapeOnlyTag = function (str) {
if (!str || typeof str !== "string") { str = String(str); }
return str.replace(/</g, '<').replace(/>/g, '>');
};
k.unescapeHTML=function (str) {
if (!str || typeof str !== "string") { str = String(str); }
return str.replace(/>/g,'>').replace(/</g,'<').replace(/&/g,'&');
};
// Share a link through SNS
k.shareSNS = async function (service) {
const title = k.$title.html();
const uri = window.location.href;
const decodedURI = k.escapeOnlyTag(decodeURIComponent(uri));
let open = "";
switch (service) {
case 'link':
let written = `${title}\n${uri}${uri !== decodedURI ? `\n${decodedURI}` : ``}`;
navigator.clipboard.writeText(written).then(function () {
k.$textarea_copied[0].value = written;
$('#notify-copied, #notify-copied-exit').show();
}
, function (err) {
k.$textarea_copied[0].value = `Could not copy text: ${err}`;
$('#notify-copied, #notify-copied-exit').show();
});
return false;
case 'tag':
let written1 = `${title}:<br/>\n<a target="_blank" href="${uri}">${decodedURI}</a>`;
navigator.clipboard.writeText(written1).then(function () {
k.$textarea_copied[0].value = written1;
$('#notify-copied, #notify-copied-exit').show();
}
, function (err) {
k.$textarea_copied[0].value = `Could not copy text: ${err}`;
$('#notify-copied, #notify-copied-exit').show();
});
return false;
case 'X':
open = "https://X.com/intent/tweet?via=kipacti&text=" + encodeURIComponent(title) + "&url=" + encodeURIComponent(uri);
break;
case 'facebook':
open = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(uri);
break;
case 'recoeve':
open = `https://recoeve.net/reco?uri=${encodeURIComponent(uri)}&title=${encodeURIComponent(title)}${k.recoCats ? `&cats=${encodeURIComponent(k.recoCats)}` : ""}`;
break;
case 'kakao':
k.popUpKakao();
return;
case 'Whatsapp':
open = `https://wa.me/?text=${encodeURIComponent(title)}%0A${encodeURIComponent(uri)}`;
break;
default:
return;
}
window.open(open);
};
})(window.k || {}, jQuery);
</script>
```/
### Icon 사용한 onclick 구현.
중간에 space 가 들어가지 않도록 img tag 들을 다닥다닥 붙여야만 함.
```[.lang-html]
<div class="SNS-top"><img class="SNS-img" src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/link.png" onclick="return k.shareSNS('link')"><img class="SNS-img" src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Tag.png" onclick="return k.shareSNS('tag')"><img class="SNS-img" src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Recoeve.png" onclick="k.shareSNS('recoeve')"><img class="SNS-img" src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-X.png" onclick="k.shareSNS('X')"><img class="SNS-img" src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Facebook.png" onclick="k.shareSNS('facebook')"><img class="SNS-img" src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Kakao.png" onclick="k.shareSNS('kakao')"><img class="SNS-img" src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Whatsapp.png" onclick="k.shareSNS('Whatsapp')"></div>
<style>
.SNS-img {
display:inline-block;
vertical-align:middle;
position:relative;
box-sizing:border-box;
margin:0;
width:36px;
height:36px;
background-color:white;
border:2px gray solid;
border-left:0;
cursor:pointer
}
.SNS-img:first-child {
border-left:2px gray solid
}
</style>
```/
- dev.Epiloum.net - SNS 내보내기(공유하기) 기능 구현하기, 2014-03-01
- kipid's blog - Encode/Unescape and Decode/Escape URI Component
- support.X.com - Adding the Tweet button to your website and https://X.com/intent/tweet
- developers.facebook.com - Social Plugins - Share Button and https://www.facebook.com/sharer/sharer.php
- MDN - Window.open; and w3schools.com - Window open() method
- Developers.kakao - 카카오톡 공유: JavaScript
- songsong.dev - 카카오 링크 API로 카카오톡 공유하기, 2022-02-11
- StackOverflow - How do I copy to the clipboard in JavaScript?, asked by Santiago Corredoira, answered by Dean Taylor, 2015-06-12
- w3c.github.io - Clipboard APIs - #Override copy
- faq.whatsapp.com :: How to use click to chat
728x90
반응형
