인스타그램(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
0 개의 댓글:
댓글 쓰기