주요 SNS 공유 버튼 정리

주요 SNS 공유 버튼 가이드 모음이다.
개발 페이지에 대한 링크와 간략한 특징을 서술한다.

카카오 스토리 

접근을 위한 앱을 만들고, 앱 키를 발급 받아 사용한다.
url, text 정보를 지정 할 수 있다.

image 정보는 url 페이지의 open graph protocol을 기반으로 가져온다.

주의: url 페이지에 구성된 og 정의를 사용한다.

트위터 

페이지 정보를 기본으로 가지고 온다.

주의: image 정보는 노출 할 수 없다.

페이스북 

접근을 위한 앱을 만들고, 앱 키를 발급 받아 사용한다.
기본 공유 버튼을 제공하고 있으나,
원하는 아이콘을 사용하기 위해서는 공유 대화 상자를 활용한다.
공유 대화 상자 사용을 위해서는 앱의 설정에 도메인을 추가한다.

주의: url 페이지에 og 프로토콜을 사용한다.

다른 유효한 방법:
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://your_domain”>
ShareButton</a>

핀터레스트 

이미지 선별, url, description을 지정 할 수 있다.


주의: 바로 저장하는 Pin과 선별해서 저장하는 Bookmark 기능이 있다.

Read More

SNS 공유 버튼에 대한 성능 고민

정보의 범람에 노아의 방주라 불릴만한 다양한 네트워크(SNS)가 믿음을 요구하는 세상이다.

인스타그램(instagram)은 태그(tag)를 통해 정보를 구분짓는 방법을 제공하고, 출처의 제약을 통해서 쓰레기 데이터들을 막아내고 있다. 핀터레스트(pinterest)는 보드이라는 사탕을 주면서 정보를 구분짓을 일을 유저에게 일임한다. 각각 자신만의 스타일로 방주를 자처하고 있지만 혼란한 시기에는 지켜보는 것이 현명해 보인다.

오늘은 컨텐츠를 여러 방주로 흘려 보내는 방법을 간략히 정리해 봅니다.

대표적인 SNS의 공유버튼(SHARE BUTTON) API 가이드 페이지입니다.

* 페이스북 - https://developers.facebook.com/docs/plugins?locale=ko_KR

* 트윗터 - https://about.twitter.com/ko/resources/buttons

* 구글플러스 - https://developers.google.com/+/web/share/

* 핀터레스트 - https://business.pinterest.com/ko/widget-builder#do_pin_it_button

* 링크드인- https://www.linkedin.com/publishers

제공되는 코드는 자바스크립트(Javascript)를 100% 활용한 코드들로, 개선 할 수 있는 방법을 찾아서 비교해 봅니다.

포인트는 "상품을 보는 사용자 대비 공유 버튼을 누르는 사용자는 매우 제한적일 것이다"라는 것에서, 불필요하게 로딩되는 자바스크립트는 브라우저에 부담 줄 것이라는 생각입니다.

왼편 이미지는 custom 한 방식으로 사용자가 원하는 스타일로 제작할 수 있습니다. 추가적으로 스타일시트(CSS)와 가볍고 멋진 이미지만 붙이면 됩니다.

오른편 이미지는 official하게 제공되는 코드를 사용해서, 편하게 쓸 수 있지만 성능 개선과 스타일을  꾸미는데 제약이 있습니다.

웹 성능 측정 페이지(http://tools.pingdom.com/fpt/)를 통해서 로딩 테스트를 해 보았습니다.

로딩 시간은 여러번의 샘플링 중에서 중간 정도를 선택했습니다. 오피셜(offical)한 방식은 로딩시간이 상황에 따라 1~3초 사이로 편차가 꽤 있었습니다. 각 SNS의 서비스 제공 지역이 흩어져 있고, 상대적으로 복잡한 자바스크립트 코드의 영향으로 판단됩니다. 중요한 부분은 요청횟수(Requests) 부분으로 보입니다. custom 방식으로 실제 코드를 완성 후에 비교해보면 흥미로울 듯 합니다.

본문에서 사용한 코드는 비트버켓(bitbucket)을 통해서 공유합니다.

https://bitbucket.org/snippets/juhoon26/RoxbG/sns-share-buttons

Read More