본문 바로가기

[IT/Programming]/HTML related

SNS 내보내기/공유하기 (Sharing a URI link through SNS)

반응형
# SNS 로 URI 링크 내보내기/공유하기 (Sharing a URI link through SNS) Copy to clipboard, 트위터 (X), 페이스북 (Facebook), 레코이브 (Recoeve.net), 카카오톡 (Kakao talk), 라인 (Line), WhatsApp 등등 SNS 로 공유하기 기능 정리. 도 참고하시길. DocuK 에서도 구현해서 넣어놨음. 왼쪽 위랑 문서 제일 아래쪽에 삽입되도록. Pop-up 으로 하는것보다 그냥 새 창 띄우는게 내 취향이라, 새 창 띄우는 방식으로 동작. (iframe pop-in 이 되면 이걸로 하고 싶긴한데, iframe 을 다들 막아서 불가능함.) ## TOC ## Recoeve.net (레코이브) 제가 만든 서비스인 recoeve.net 에서 바로 reco 할 수 있게 만들어주는 url 은 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] ```/
Recoeve 에 reco 하기.
Recoeve 에 현재 페이지 reco 해보기 (iframe).
## 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 가 채워져서 트윗이 나타남.
트위터 링크 공유. (Share a link with your followers.)
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,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }; m.unescapeHTML=function (str) { if (!str||str.constructor!==String) { return ""; } return str.replace(/&gt;/g,'>').replace(/&lt;/g,'<').replace(/&amp;/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
  1. dev.Epiloum.net - SNS 내보내기(공유하기) 기능 구현하기, 2014-03-01
  2. kipid's blog - Encode/Unescape and Decode/Escape URI Component
  3. support.X.com - Adding the Tweet button to your website and https://X.com/intent/tweet
  4. developers.facebook.com - Social Plugins - Share Button and https://www.facebook.com/sharer/sharer.php
  5. MDN - Window.open; and w3schools.com - Window open() method
  6. Developers.kakao - 카카오톡 공유: JavaScript
  7. songsong.dev - 카카오 링크 API로 카카오톡 공유하기, 2022-02-11
  8. StackOverflow - How do I copy to the clipboard in JavaScript?, asked by Santiago Corredoira, answered by Dean Taylor, 2015-06-12
  9. w3c.github.io - Clipboard APIs - #Override copy
  10. faq.whatsapp.com :: How to use click to chat
반응형