블로그 이미지
Flying Mr.Cheon youGom

Recent Comment»

Recent Post»

Recent Trackback»

« 2024/5 »
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 31

 
 
4441

카페현재상황 : ㅎㅎㅎ 모든 패킷 다 뚫었다. 카카오톡 별것 아니네. 악용도 할수 있겠다 와 짱이다~

15897651841991589765018098Screenshot_20200514-210246_Naver Cafe22223333

모든 톡방은 오픈채팅방 입니다.

플러스 친구 X
빌더 X

 

:
웹페이지에 카카오톡으로 현재 페이지를 공유하는 버튼을 생성하는 방법이다. 


먼저 kakao developers 페이지로 접속한다. 

 

 

기존의 카카오톡 계정으로 로그인이 가능하다. 

로그인한 후에 앱을 생성한다. 

f4d8dfc7b09e1b9a03448e6c76fe903f_1550103699_8537.png




앱이름을 정하고, 사진도 업로드 가능하다. 


f4d8dfc7b09e1b9a03448e6c76fe903f_1550103699_9439.png




link 라는 이름으로 앱을 생성했다. 


f4d8dfc7b09e1b9a03448e6c76fe903f_1550103699_9006.png



링크 전송을 위해서는 Javascript 키만 있으면 된다. 

Javascript 키를 잘 확인한다. 

그리고 개발가이드 페이지로 이동한다. 


f4d8dfc7b09e1b9a03448e6c76fe903f_1550103699_6932.png





Javascript 개발가이드에서 카카오링크를 선택한다. 

우측에 내용을 확인하면, 페이지에 붙여 넣을 코드를 보여준다. 

먼저 header 부분에 카카오 스크립트를 넣어준다. 
 

 

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

 


그리고 body 안에 (버튼을 넣어둘 위치에) 버튼을 생성한다. 

1
2
3
<a id="kakao-link-btn" href="javascript:sendLink()">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>

 

 

그리고 하단부에 링크를 클릭했을 때 동작하는 스크립트를 넣어준다. 

이때 아까 확인한 javascript 키를 넣어준다. 
 

 

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
31
32
33
34
35
36
37
38
39
40
41
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createDefaultButton({
      container: '#kakao-link-btn',
      objectType: 'feed',
      content: {
        title: '딸기 치즈 케익',
        description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com'
        }
      },
      social: {
        likeCount: 286,
        commentCount: 45,
        sharedCount: 845
      },
      buttons: [
        {
          title: '웹으로 보기',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com'
          }
        },
        {
          title: '앱으로 보기',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com'
          }
        }
      ]
    });
  //]]>
</script>

 


여기에서 페이지의 제목, 설명, 이동할 링크, 대표이미지 등등을 설정할 수 있다. 

데모페이지로 이동해서, 실제 어떻게 동작하는지 확인한다. 

PC용 카카오톡에서도 사용가능하다. 

https://developers.kakao.com/docs/js/demos/link-v2-send-default-feed


f4d8dfc7b09e1b9a03448e6c76fe903f_1550103699_7358.png


카카오톡 버튼을 클릭하면, 공유하기 팝업이 생성된다. (모바일의 경우는 카카오톡 앱을 실행한다.)


f4d8dfc7b09e1b9a03448e6c76fe903f_1550103699_7667.png



공유할 대상을 선택하고 공유하기를 클릭하면, 채팅창으로 링크가 전달된다. 

f4d8dfc7b09e1b9a03448e6c76fe903f_1550103699_807.png


메세지 템플릿도 설정가능하기 때문에 유용하게 사용가능하다. 

 

: