# SNS 내보내기/공유하기 (Sharing a URI link through SNS) 카카오톡, 라인, Google+, Pinterest 등등 공유하기 기능이 여러 SNS 에서 지원되는거 같지만, 트위터 (Twitter) 랑 페이스북 (Facebook) 빼고는 다들 잘 안쓰니 두개만 우선 정리. 나머지는 에서 참고하시길. DocuK 에서도 구현해서 넣어놨음. 왼쪽 위랑 문서 제일 아래쪽에 삽입되도록. Pop-up 으로 하는것보다 그냥 새 창 띄우는게 내 취향이라, 새 창 띄우는 방식으로 동작. (Iframe pop-in 이 되면 이걸로 하고 싶긴한데, iframe 을 다들 막아서 불가능함.) ## TOC ## 트위터 (Twitter) 트위터는 https://twitter.com/intent/tweet 통해서 지원하는듯. 매개변수 (Parameter: via, text, url 등) 들도 지원함 . https://twitter.com/intent/tweet?via=kipacti&text=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%ED%85%8C%EC%8A%A4%ED%8A%B8&url=http%3A%2F%2Fkipid.tistory.com%2Fentry%2FSharing-URI-through-SNS 로 접속하면, SNS 내보내기/공유하기 테스트 http://kipid.tistory.com/entry/Sharing-URI-through-SNS via @kipacti 가 채워져서 트윗이 나타남.
트위터 링크 공유. (Share a link with your followers.)
URL 에 스페이스나 한글, 특수문자 (특히 &, =) 등이 들어가면 에러가 잘 떠서, Encode URI Component 이용해서 처리해주는 것이 좋음. https://twitter.com/intent/tweet?via=kipacti&text=SNS 내보내기/공유하기 테스트&url=http://kipid.tistory.com/entry/Sharing-URI-through-SNS 로 접속해도 잘 나오긴 하는거 같은데... 만약을 대비해서 javascript 의 encodeURIComponent function 을 활용합시다. 그런데 이거 iframe 으로는 삽입이 안됨;;; Refused to display 'https://twitter.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. 라고 뜨면서 거부. 이래서 다들 out pop-up 으로 공유창 띄우는구나? 뭔가 다른식으로 in pop-up 으로 구현할수도 있을거 같긴한데... ### Button 버튼을 만들어 볼까나? ```[#pre-code-twitter.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 하나만 있는건가 그러면? =ㅇ= . https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fkipid.tistory.com%2Fentry%2FSharing-URI-through-SNS 에 접속하면, 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 버튼을 만들어 볼까나? ```[#pre-code-fb.linenums] ```/ ## RRA
  1. dev.Epiloum.net - SNS 내보내기(공유하기) 기능 구현하기, 2014-03-01
  2. kipid's blog - Encode/Unescape and Decode/Escape URI Component
  3. support.twitter.com - Adding the Tweet button to your website and https://twitter.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
저작자 표시 비영리 변경 금지
신고
Posted by 냥냥 kipid
TAG
comments powered by Disqus


티스토리 툴바