메모장
SNS 공유하기 본문
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 |