web share api 코드

web share api코드 요약

web share api를 이용하셔서 브라우저를 통한 sns 및 기타 앱으로의 공유가 가능합니다. 서드파티 앱이나 js를 불러오지 않아도 되어 상당히 빠르고 좋습니다.

web share api는 많은 분께서 남겨주셨지만 티스토리에 적용하는데 있어서 힘든 부분이 있어 코드를 공유하고자 합니다.

web share api 적용 : 고급

비용 : 무료

소요시간 : 30분

준비물 : 티스토리 블로그

최종 검토일 : 2022년 01월 26일

그렇다면 web share api의 html 코드는 어떻게 되나요?

우선 이부분을 <head>와 </head> 사이에 넣어주세요.

	<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- sweet alert라는 보기 좋은 ui의 알림창을 불러옵니다.-->

그 다음으로는 이미지를 통해서 공유를 클릭할 수 있도록 하겠습니다.

<a class="itcidersharesns" type="button" onclick="snsShare('title','url')"  alt="itcider web share api" id ="itcidershared">
<img src="이미지 링크" width="40" alt="sns로 공유하기"></a>
<!-- web share api 불러오기 위한 클릭용 이미지-->

아래 코드를 넣어주시면 됩니다.

<script>

function snsShare(title, url){

if(navigator.share){ /*web share api*/

navigator.share({
title: '[##_article_rep_title_##]',  //글 제목
  url: '[##_article_rep_link_##]', // 글의 url
});
$().ready(function () {
            $("#itcidershared").click(function () {
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'center-center',
                    showConfirmButton: false,
                    timer: 3000, /* 3초 동안 로드*/
                    timerProgressBar: true,
                    didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                })

                Toast.fire({
                    icon: 'success',
                    title: '공유 완료되었습니다' /*공유 성공시 나오는 말*/
                })
            });
        });

}else 

$().ready(function () {
            $("#itcidershared").click(function () {
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'center-center',
                    showConfirmButton: false,
                    timer: 2500, /*2.5초 로드*/
                    timerProgressBar: true,
                    didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                })

                Toast.fire({
                    icon: 'error',
                    title: '미지원 브라우저' /*미지원 브라우저나 공유 실패*/
                })
            });
        });


}

</script>

그렇다면 web share api의 css 코드는 어떻게 되나요?

.itcidersharesns {
	display: block;
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 300;
	font-size:2.375em;
	line-height: 1;
	width:56px;
	height:56px;
	padding: 10px;
	box-sizing: border-box;	
	opacity: 0.5;
	transition: opacity 0.33s linear;
}

위 코드를 css 맨 아래에 넣어주시면 됩니다.

참고하신 글이나 코드의 일부분 출처는 어디인가요?

네이버 블로그 note님의 코드와

web share api – 모바일웹에서 공유하기 기능

web share api 는 네이티브 공유 다이얼로그를 열어주는 방법을 제공한다. 쉽게 말해서 폰에 내장되어 있는…

blog.naver.com

윤구름님의 코드를

[웹디자인] 예쁜 Alert 창을 사용하자! SweetAlert2

자바스크립트로 웹 프로그래밍을 하다 보면 자주 Alert 함수를 사용하게 됩니다. Alert는 사용자에게 알림을 주고자 할 때 사용하는데요. 자바스크립트의 alert는 아주 기본적인 브라우저 UI를 제공

wooncloud.tistory.com

참조하였습니다. 진심으로 감사합니다.

위 코드는 마음대로 수정해도 되나요?

넵 가능합니다. html를 잘 모르신다면 주석을 참조하시길 바랍니다. 일부를 수정하면 작동되지 않을 수 있습니다.

# github

GitHub – itcider/tistory_web_share_api: tistory_web_share_api

tistory_web_share_api. Contribute to itcider/tistory_web_share_api development by creating an account on GitHub.

github.com