티스토리 뷰

프로그래밍/Web

자바스크립트로 카카오톡, 페이스북, 트위터 공유하기 만들기

미니~ 2015. 9. 30. 08:11

모바일 웹을 하다보면 SNS 공유 버튼 기능이 필요할 때가 있다.

간단하게 카카오톡, 페이스북, 트위터 공유 기능을 자바스크립트로 구현하는 것을 정리해 보도록 한다.

카카오톡 링크 공유하기

카카오톡 공유하기를 위해서는 먼저 카카오톡에 개발자 계정 등록을 해야 하고,

개발한 사이트의 URL도 앱 생성후 등록해야만 한다.

http://developers.kakao.com 에서 기존 카카오톡 계정으로 설정하면 된다.

내 어플리케이션으로 이동해서 신규 어플리케이션을 웹으로 만든 다음,

"설정 > 일반"에서 Javascript 키 (빨간색으로 표시)를 사용해서 카카오톡 링크를 구현할 수 있다.

그리고 카카오톡으로 공유하기를 보내기 위해서는 반드시 플랫폼이 등록되어야 한다.

위와 같이 사이트 도메인을 추가하고 저장하면 된다.

만약 플랫폼이 등록되어 있지 않으면 공유하기 시 에러가 나타난다.

카카오톡 링크 공유하기는 공식 개발자 가이드에 잘 설명되어 있다.

간략히 옮겨보면 최종적으로 사용자에게 보여지는 카카오톡은 다음과 같다.

여기에 보이는 라벨, 이미지, 버튼 아이콘 및 텍스트 등을 모두 수정할 수 있다.

참고로 버튼 아이콘은 관리자 화면(맨 처음 그림에서 Mini 왼쪽의 아이콘 수정)에서 바꿀 수 있다.

카카오톡 개발자 가이드에 나와 있는 소스는 다음과 같으니 참고하기 바란다.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
    <title>KakaoLink Demo(Web Button) - Kakao JavaScript SDK</title>
    <script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
  </head>
  <body>
    <h3>카카오톡 링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.</h3>
    <a id="kakao-link-btn" href="javascript:;">
      <img src="http://dn.api1.kage.kakao.co.kr/14/dn/btqa9B90G1b/GESkkYjKCwJdYOkLvIBKZ0/o.jpg" />
    </a>

// 카카오톡 링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createTalkLinkButton({
      container: '#kakao-link-btn',
      label: '카카오링크 샘플에 오신 것을 환영합니다.',
      image: {
        src: 'http://dn.api1.kage.kakao.co.kr/14/dn/btqaWmFftyx/tBbQPH764Maw2R6IBhXd6K/o.jpg',
        width: '300',
        height: '200'
      },
      webButton: {
        text: '카카오 디벨로퍼스',
        url: 'https://dev.kakao.com/docs/js' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
      }
    });
    </script>
  </body>
</html>

페이스북 공유하기

페이스북이나 트위터는 URL 패턴으로 되어 있어 상대적으로 간편하다.

다만, 페이스북은 메타 태그를 통해서 더 많은 정보를 제공할 수 있어 해당 메타태그를 잘 작성하는 것이 필요하다.

페이스북의 공유를 위한 메타 태그의 정보는 다음과 같다.

그리고 다음 URL로 글을 보내면 된다.

http://www.facebook.com/sharer/sharer.php?u=공유할 글의 URL

최종적으로 현재 글의 공유하기 버튼을 만든다면 다음과 같이 할 수 있다.

참고로 페이스북의 경우에는 캐싱을 하기 때문에 내용이 바뀌었을 때 바로 적용되지 않는다.

이럴 경우에는 다음 디버깅 URL로 이동해서 "Fetch new scrape information" 버튼을 클릭해 다시 불러오기를 한 후 실행하면 된다.

트위터 공유하기

트위터 공유는 메타 태그 등이 필요없이 URL 패턴으로만 전송하면 되므로 간단하다.

https://twitter.com/intent/tweet?text=글 제목&url=공유할 글의 URL

자바스크립트로 구현하면 다음과 같이 할 수 있다.

실행하면 다음과 같이 트위터에 공유할 수 있는 화면이 나타난다.

'프로그래밍 > Web' 카테고리의 다른 글

자바스크립트와 스타일시트를 활용한 브라우저 확대 축소하기~ (1)	2015.10.20
Sitemesh에서 메타 태그로 Decorator에 값 전달하기~ (0)	2015.10.16
톰캣 로그 한글 깨질때~ (0)	2015.09.06
실시간 커뮤니케이션... WebRTC 기술을 주목하라! (0)	2015.08.31
JSP에서 Gson을 활용해 RecordSet을 JSON으로 변환하기~ (0)	2015.07.06

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

글 보관함

미니의 꿈꾸는 독서, 그리고 프로그래밍 이야기