모바일 웹과 데스크탑 모드에서 다양한 소셜 네트워크 서비스로 공유하는 기능을 많이 사용하고 있습니다. 자주 사용하는 SNS 버튼만을 추가하여 기능을 개발하는 경우도 있지만 그런 경우 해당 서비스의 API를 받아야 하는 경우가 많습니다. 예를 들어 카카오 공유 기능을 사이트에 추가하고 싶다면 Kakao Developers 사이트에 들어가 어플리케이션을 추가하여 앱 아이콘과 앱 이름, 사업자 명 등을 추가하고 플렛폼 환경과 개발 소스를 받아 개발을 해줘야 합니다. 공유 버튼이 몇 개 없을 때에는 어렵지 않지만 여러 개를 넣는 경우 어려움이 있습니다.

모든 공유 기능을 구현하기 부담이 되거나 간단하게 처리하는 방법인 navigator.share 기능을 소개하고자 합니다. 해당 기능은 스마트폰에 설치되어 있는 앱에서 공유를 허용하는 모든 앱이 자동으로 표시되어 하나의 버튼으로 간편하게 구현할 수 있고 새로운 프로그램이 추가되더라도 추가 기능을 넣을 필요가 없어집니다.

사용 방법 안내

소스가 간결하고 복잡하지 않아 활용하기 좋습니다. 아래 소스처럼 제목과 설명 문구, 도메인이나 페이지 주소를 넣어서 활용하게 됩니다. 게시물의 경우나 제품의 경우는 제목에는 상품 명을 키워드나 설명은 설명 문구 부분에 추가하여 활용하게 됩니다.

<script>
var str_tit  = "제목";
var str_desc = "설명문구";
var str_url  = "";

$(document).ready(function(){
    $('.btn-web-share').click(function() { 
        if (navigator.share){
              navigator.share({
                    title   : str_tit,
                    text    : str_desc,
                    url     : str_url,
              })
            .then(() => console.log('공유성공'))
            .catch((error) => console.log('공유에러', error));
        }else{
            alert("공유하기 지원하지 않습니다.");
        }
    });
});
</script>

단점은 없나요?

데스크탑 모드에서는 지원하는 어플리케이션이 많지 않다는 부분입니다. 앞으로 점점 늘어나고 확장될 수 있는 부분이고 PC 사용자의 경우 공유는 링크 복사를 많이 하기 때문에 크게 불편하지는 않습니다. 아래는 데스크탑 모드에서 공유 버튼을 눌렀을 때 나타나는 화면 입니다.

공유시 내가 원하는 스타일의 결과를 주지 않을 수도 있습니다. 제목, 설명, 주소의 형태에서 크게 벗어나지 않는 형태이면서 공유를 받는 프로그램에서 다르게 표현 되기도 합니다.