[Javascript] SNS 공유 방법!! (카카오톡,페북,트윗,밴드)

 

안녕하세요. 

오늘은 스크립트를 이용하여 SNS (페이스북, 트위터, 밴드, 카카오톡) 연동하는 방법에 대해 이야기해보겠습니다.

흔히 페이지에 많이 사용이 되고, 저 또한 클라이언트에서 직접적으로 문의를 받아 기능을 제작하였습니다.

카카오톡은 별도로 API 키를 발급해야 이용이 가능하기 때문에 두개의 파트로 정리하겠습니다.

 

 

 

페이스북, 트위터, 밴드 SNS 공유 방법

 

위 3개의 SNS 공유 방법은 의뢰로 간단합니다.

우선 HTML 태그를 만들어야겠죠! ul에 li 형식의 태그를 만들어줍니다.

그리고 각각의 함수를 탈 수 있도록 onclick에 함수명에 이름(facebook, twitter 등)을 넣어줍니다.

 

<ul class="sns">
    <li class="facebook">
    <a href="#n" onclick="fn_sendFB('facebook');return false;" class="facebook" target="_self" title="페이스북 새창열림"><span class="skip">페이스북</span></a>
    </li>
    <li class="twitter">
    <a href="#n" onclick="fn_sendFB('twitter');return false;" class="twitter" target="_self" title="트위터 새창열림"><span class="skip">트위터</span></a>
    </li>
    <li class="band">
    <a href="#n" onclick="fn_sendFB('band');return false;" class="band" target="_self" title="네이버밴드 새창열림"><span class="skip">네이버밴드</span></a>
    </li>
</ul>

 

 

이번엔 스크립트 입니다.

스크립트에서는 thisUrl이란 변수에 내장함수인 document.URL을 사용하여 현재 URL을 가지고 옵니다.

그리고 타이틀을 넣어준 다음, sns에 담긴 각각의 이름에 따라 url값을 window.open으로 팝업을 뛰어주면 됩니다.

여기서 encodeURIComponent는 스크립트 내장함수로 인코딩하여 넘기는 방법입니다.

<script >
function fn_sendFB(sns) {
    var thisUrl = document.URL;
    var snsTitle = "2021 웹진 [봄]";
    if( sns == 'facebook' ) {
        var url = "http://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(thisUrl);
        window.open(url, "", "width=486, height=286");
    }
    else if( sns == 'twitter' ) {
        var url = "http://twitter.com/share?url="+encodeURIComponent(thisUrl)+"&text="+encodeURIComponent(snsTitle);
        window.open(url, "tweetPop", "width=486, height=286,scrollbars=yes");
    }
    else if( sns == 'band' ) {
        var url = "http://www.band.us/plugin/share?body="+encodeURIComponent(snsTitle)+"&route="+encodeURIComponent(thisUrl);
        window.open(url, "shareBand", "width=400, height=500, resizable=yes");
    } 
</script>

 

 

그럼 아래 화면같이 팝업창이 뜨게 됩니다!

 

 

 

 

카카오톡 SNS 공유 방법

 

카카오톡 링크 기능을 사용하기 위해서는 카카오에서 제공하는 API를 사용해야합니다.

API는...복잡할 것 없이 쉽게 말해서 남들이 만들어 놓은걸 가져다 쓰는 겁니다.

한마디로 카카오API는 카카오에서 만든 기능을 가져다 쓸 수 있는 인터페이스입니다.

 

 

Setting

우선 카카오 개발사이트에 접속합니다.

 

https://developers.kakao.com/

Kakao Developers

 

그리고 내 애플리케이션에 들어가 로그인을 합니다.

 

 

저는 이미 이용중이기에 애플리케이션이 있지만 없으신 분들은 추가하시면 됩니다.

앱 이름과 사업자명은 임의대로 작성하셔도 생성이 가능합니다.

 

 

 

반응형

 

 

 

그리고 클릭해주세요.

 

 

그러면 아래와 같이 요약정보 화면이 나타납니다. 

여기서 보여지는 앱키중에서 JavaScript키를 사용하는거죠!

 

 

그리고 플랫폼에서 Web 플랫폼을 선택하여 등록을 해주시면 됩니다.

(상황에 맞는 폼을 선택하시면 됩니다.)

 

 

그러면 셋팅이 끝났습니다. 이젠 소스를 작성해보도록 하죠!

 

---

 

HTML & JavaScript

 

다른 SNS 공유 방법과 마찬가지로 ul에 li 형식의 태그를 만들어줍니다. 

그리고 함수를 탈 수 있도록 onclick에 함수명에 kakaotalk을 넣어줍니다.

가장 중요한 부분은 id값을 함수에서 사용할 ID와 동일하게 해줘야한다는 겁니다!

저는 id값을 btnKakao라 하겠습니다.

 

<ul class="sns">
  <li class="kakaotalk">
  <a href="#n" id="btnKakao" onclick="fn_sendFB('kakaotalk');return false;" class="kakaotalk" target="_self" title="카카오톡 새창열림"><span class="skip">카카오톡</span></a>
  </li>
</ul>

 

이번엔 스크립트 입니다.

가장 중요한 것은 카카오의 API를 사용하는 것이기 때문에 위에 스크립트 주소를 선언해줘야 기능 사용이 가능합니다.

 

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

 

그리고 fn_sendFB함수를 타기 시작하는 거죠!

스크립트에서는 thisUrl이란 변수에 내장함수인 document.URL을 사용하여 현재 URL을 가지고 옵니다.

그리고 타이틀을 넣어준 다음, sns가 kakaotalk라면 카카오 문서에 나온 코드를 타도록 작성해줍니다.

 

kakao.init에서는 내 애플리케이션에서 앱키중, 자바스크립트 키를 넣어줍니다.

container는 태그에서 조금 전, HTML에서 작성한 ID값을 넣어줍니다.

그리고 TITLE과 Description을 작성해주고

imageUrl과 mobileWebUrl, webUrl을 현재 주소값을 넣어주시면 됩니다.

(imageUrl 등 상황에 맞게 사용하시면 됩니다.)

 

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
 
<script >
function fn_sendFB(sns) {
var thisUrl = document.URL;
var snsTitle = "2021 웹진 [봄]";
 
if( sns == 'kakaotalk' ) {
    // 사용할 앱의 JavaScript 키 설정
    Kakao.init('본인 자바스크립트 API KEY 입력');
    
    // 카카오링크 버튼 생성
    Kakao.Link.createDefaultButton({
        container: '#btnKakao', // HTML에서 작성한 ID값
        objectType: 'feed',
        content: {
        title: "2021 웹진 [봄]", // 보여질 제목
        description: "2021 웹진 [봄]", // 보여질 설명
        imageUrl: thisUrl, // 콘텐츠 URL
        link: {
            mobileWebUrl: thisUrl,
            webUrl: thisUrl
        }
        }
    });
}
 
</script>