[Javascript] SNS 공유하기

SNS 공유하기

공유하기 기능은 프론트 웹 개발자라면 한 번쯤은 경험하게 되는 필수적인 기능입니다.

최근 공유하기 기능 개발을 접하게 되어 관련 내용을 정리해 보도록 하겠습니다.

SNS 목록

• NAVER
• BAND
• X(TWITTER)
• FACEBOOK
• KAKAO TALK

HTML

먼저 버튼 목록을 만들어줍니다.

<ul>
    <li><button class="ico_facebook" aria-label="facebook"></button></li>
    <li><button class="ico_twitter" aria-label="twitter"></button></li>
    <li><button class="ico_kakao" aria-label="KakaoTalk"></button></li>
    <li><button class="ico_naver" aria-label="naver"></button></li>
    <li><button class="ico_band" aria-label="band"></button></li>
</ul>

Javascript

공유하고자 하는 페이지의 URL과 타이틀을 설정해 주도록 하겠습니다.

const url = window.location.href.replace('#', '');   	//현재 URL 획득
const encodedUrl = encodeURIComponent(url);		//URL 인코딩
const message = encodeURIComponent('공유하기 샘플이예요~');  //공유 타이틀 인코딩
const features = 'width=600, height=700, resizable=no'  //윈도우 사이즈

페이스북, X(트위터), 네이버, 밴드

이 소셜 미디어들의 경우 정말 간단합니다. 공유하기 전용 URL만 알면 됩니다.

선택자에 따라 URL을 바꾸고 창을 여는 부분을 공통화할 수 있지만 쉬운 이해를 위해 아래와 같이 버튼 별로 이벤트를 달았습니다.

// NAVER
$('.ico_naver').click(function() {
    window.open(`https://share.naver.com/web/shareView?url=${encodedUrl}&title=${message}`
    	, 'naver', features);
});

// BAND
$('.ico_band').click(function() {
    window.open(`https://band.us/plugin/share?body=${message}&route=${encodedUrl}`
    	, 'band', features);
});

// X(TWITTER)
$('.ico_twitter').click(function() {
    window.open(`https://twitter.com/intent/tweet?url=${encodedUrl}&text=${message}`
    	, 'x', features);
});

// FACEBOOK
$('.ico_facebook').click(function() {
    window.open(`http://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`
    	, 'facebook', features);
});

로그인 해야 합니다...ㅎㅎ

카카오톡

카카오톡의 경우 공유 API가 조금 더 복잡합니다.

먼저 카카오 개발자 홈페이지에서 애플리케이션 등록을 해주어야 합니다.

[ KAKAO Developers > 내 애플리케이션 > 애플리케이션 추가 > 플랫폼 등록 ]

 

아래 코드를 통해 카카오톡 SDK 모듈을 프로젝트에 추가해 줍니다.

여기에서 직접 최신 버전을 찾아볼 수도 있습니다.

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js" integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4" crossorigin="anonymous"></script>

 

아래는 기본적인 자바스크립트 코드입니다. 카카오톡의 경우 URL과 타이틀을 인코딩하지 않은 상태로 공유해야 합니다.

// KAKAO
const personalKey = '발급받은 Javascript 앱 키'
Kakao.init(personalKey); //KAKAO SDK 모듈 초기화
$('.ico_kakao').click(function() {
    Kakao.Share.sendDefault({
        objectType: 'feed',
        content: {
            title: '공유하기 샘플이예요~',
            imageUrl: url + 'resources/images/kakao_share.png', //공유 시 표시될 이미지 리소스
            link: {
                mobileWebUrl: url, //모바일의 경우 연결할 URL
                webUrl: url	//웹의 경우 연결할 URL
            }
        },
        buttons: [
            {
                title: '버튼 하나',
                link: {
                    mobileWebUrl: url,
                    webUrl: url
                }
            },
            {
                title: '버튼 둘',
                link: {
                    mobileWebUrl: url,
                    webUrl: url
                }
            }
        ]
    });
});

더 자세한 레퍼런스와 케이스는 여기에서 확인하시기 바랍니다. (종류와 양이 조금 많아요!)

마치며

기본적이고 간단한 공유 방법을 정리했지만 각 소셜미디어 개발자 홈페이지에서 더 다양하고 흥미로운 공유 API를 찾아볼 수 있었습니다.

언젠가 기회가 된다면 소셜미디어 별 공유 API를 더 심층적으로 구현해 봐야겠습니다. 

 

감사합니다!

참고 사이트

https://velog.io/@eeejihyeon/SNS-%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0-API

https://developers.kakao.com/docs/latest/ko/message/js-link

https://developers.naver.com/docs/share/navershare/

https://developers.band.us/develop/guide/share