반응형
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="m.popUpRecoeve()">Recoeve</button>
```/
```[#pre-code-recoeve.linenums]
```/
## Copy to clipboard
1. navigator.clipboard.writeText
는 Only supported on pages served over HTTPS 라고... HTTPS 구현 했으니 해놓자.
2. Document.execCommand()
도 deprecated 라 함.
3. 참고해서... (이건 뭔지 모르겄넹;;; copy 안되는데 ㅡ,.ㅡ)
### Button
버튼을 만들어 볼까나?
```[.lang-html.linenums]
<button onclick="m.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
가 채워져서 트윗이 나타남.
URL 에 스페이스나 한글, 특수문자 (특히 &, =) 등이 들어가면 에러가 잘 떠서, Encode URI Component 이용해서 처리해주는 것이 좋음.
로 접속해도 잘 나오긴 하는거 같은데... 만약을 대비해서 javascript 의 encodeURIComponent function 을 활용합시다.
그런데 이거 iframe 으로는 삽입이 안됨;;; 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="m.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
(URL)) 도 있음. t
(title? text?) 는 지원이 중단됐다고... u
하나만 있는건가 그러면? =ㅇ= .
에 접속하면, URI/URL 이 붙은채로 내 타임라인에 글을 쓸 수 있음.
페이스북도 iframe 은 마찬가지로 막음. 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="웹 페이지 URL" />
<meta property="og:description" content="웹 페이지 내용" />
<meta property="og:image" content="웹 페이지 대표 이미지" />
```/
(테스트 해보고는 있는데, 업데이트 되는데에는 시간이 좀 걸리는듯? 페이스북이 페이지들을 crawling 하면서 데이터베이스를 따로 만들어 놓는듯한데...) 뭐 이런거까지 신경쓰면서 글 쓸 사람은 별로 없을듯. 대충 링크만 공유합시다. 내용은 페북이 알아서 긁어다가 분석하겠지.
### Button
버튼을 만들어 볼까나?
```[.lang-html.linenums]
<button onclick="m.popUpFacebook()">Facebook</button>
```/
```[#pre-code-fb.linenums]
```/
## 카카오톡 (Kakao talk)
카톡도 그냥 url 링크로 접속하면 알아서 앱 열어주고 하는식으로 동작하게 만들지. 자기들 개발하기 편한대로 만들어놔서 복잡한듯. 트위터나 페이스북 벤치마킹 좀 하지. 국내시장만 노려서 그런가? 배짱 개발이 많은듯도...
카카오톡 공유는 참고.
### Button
버튼을 만들어 볼까나?
```[.lang-html.linenums]
<button onclick="m.popUpKakao()">Kakao</button>
```/
```[#pre-code-kakao.linenums]
```/
## Instagram (인스타그램) DM (Direct Message)
인스타그램 DM 으로 공유하는/내보내는 API 혹은 링크는 존재하지 않는듯? 최근에 가능해진거 같기도 한데.. 유투브에서 바로 공유 가능했던걸로 봤는데.
아래는 OpenAI 의 ChatGPT 에게 물어본 것. (최신 내용이 업데이트 안되었어서 불가능하다고 말한듯.)
How can I implement a button sending a DM of instagram on a web?
Unfortunately, it's not possible to implement a button that sends an Instagram Direct Message (DM) on a web page. Instagram's API policies do not allow for the automation of DMs or the creation of buttons that automatically send DMs. Additionally, DMs are meant to be a private and personal communication between users, and automatically sending a DM would go against the intended use of the feature.
Instead, you can provide a link to your Instagram profile on your website, and encourage users to send you a DM through the Instagram app if they have it installed on their device. You can also encourage them to follow you on Instagram and send you a DM through the app in the future.
## WhatsApp (왓츠앱)
참고 .
그냥 링크 걸어주면 되는듯? 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="m.popUpWhatsapp()">WhatsApp</button>
```/
```[#pre-code-whatsapp.linenums]
```/
## 한꺼번에 처리하기 (All codes in one function)
```[.scrollable.lang-js]
////////////////////////////////////////////////////
// Escape and Unescape HTML string.
////////////////////////////////////////////////////
m.escapeHTML=function (str) {
if (!str||str.constructor!==String) { return ""; }
return str.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
};
m.unescapeHTML=function (str) {
if (!str||str.constructor!==String) { return ""; }
return str.replace(/>/g,'>').replace(/</g,'<').replace(/&/g,'&');
};
m.shareCurrentPage=function (service) {
let title=$("title").eq(0).text();
let open="";
let desc=title;
let args={};
let url=window.location.href;
switch (service) {
case 'recoeve':
open=`https://recoeve.net/reco?uri=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}${m.recoCats?`&cats=${encodeURIComponent(m.recoCats)}`:""}`;
break;
case 'link':
let written=`${title}\n${url}`;
navigator.clipboard.writeText(written).then(function () {
alert(`The following is copied!\n"${written}"`);
}
, function (err) {
alert(`Could not copy text: ${err}`);
});
return;
case 'X':
open="https://X.com/intent/tweet?text="+encodeURIComponent(title)+"&url="+encodeURIComponent(url);
break;
case 'facebook':
open="https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(url);
break;
case 'kakao':
Kakao.Share.sendDefault({
objectType: 'feed',
content: {
title: m.escapeHTML(title),
description: desc?m.escapeHTML(desc):'',
imageUrl: '', // No image.
link: {
mobileWebUrl: url,
webUrl: url,
},
},
});
return;
}
window.open(open);
};
```/
## RRA
- 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
반응형
'[IT/Programming] > HTML related' 카테고리의 다른 글
트위터 트윗 퍼오기 (Embedding Twitter Tweet) (0) | 2023.10.25 |
---|---|
인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog) (3) | 2023.10.25 |
인스타그램 (Instagram) 퍼오는 법 (2) | 2023.10.25 |
<link ref="canonical" href="..." /> 설정하기 (DISQUS config 활용) (0) | 2023.10.25 |
Encode/Unescape and Decode/Escape URI Component (0) | 2023.10.25 |
Mouse click 들 (left, right, wheel, wheel up, wheel down, back, forward) 구분해내기 (1) | 2023.10.25 |
틱톡 (TikTok) | weverse.io 퍼오는 법 (1) | 2023.10.25 |