Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
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
Tags
more
Archives
Today
Total
관리 메뉴

메모장

SNS 공유하기 본문

JavaScript

SNS 공유하기

doopang 2024. 7. 2. 13:18

https://developers.kakao.com/
https://devtalk.kakao.com/

// index.html
// kakao
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
        integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4" crossorigin="anonymous"></script>
<script>
    Kakao.init('JavaScript 키'); // 사용하려는 앱의 JavaScript 키 입력
</script>

// Main.vue
<Template>
  <!-- kakao -->
  <a id="kakaotalk-sharing-btn" @click="shareKakao">
    <img src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png"
         alt="카카오톡 공유 보내기 버튼" />
  </a>
  <!-- X -->
  <a @click="shareX">X</a>
  <!-- facebook -->
  <a @click="shareFacebook">facebook</a>
  <!-- naver -->
  <a @click="shareNaver">naver</a>
  <!-- web share -->
  <a @click="shareWeb">web</a>
  <!-- copy -->
  <a @click="copyUrl">copy</a>
</Template>

<script>
  methods: {
    shareKakao () {
      window.Kakao.Share.sendCustom({
        templateId: 109403,
        templateArgs: {
          title: '제목 영역입니다.',
          description: '설명 영역입니다.',
          url: 'url'
        }
      })
    },
    shareX () {
      const text = 'text'
      const url = 'url'
        window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, '_blank')
    },
    shareFacebook () {
      const url = 'url'
        window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank')
    },
    shareNaver() {
      const title = 'title'
      const url = 'url'
      window.open(`https://share.naver.com/web/shareView?url=${url}&title=${title}`, '_blank')
    },
    shareWeb () {
      if (navigator.share) {
        navigator.share({
          title: 'title',
          text: 'text',
          url: 'url'
        }).then(() => {
          console.log('share success')
        }).catch(() => {
          console.log('share fail')
        })
      } else {
        console.log('not support share')
      }
    },
    copyUrl () {
      const url = 'url'
      navigator.clipboard.writeText(url)
    }
  }
</script>

'JavaScript' 카테고리의 다른 글

Promise  (0) 2025.05.15
Vue jQuery 플러그인 설정  (0) 2024.04.17
Vue Store  (0) 2023.12.26
TOAST UI Grid Pagination(Server)  (0) 2023.12.15
Vue props, emit  (0) 2023.11.21