sns공유하기 pc용, 모바일용 webshareAPI

pc와 모바일에서 소셜공유하기 

여러가지 방법이 있으나 깔끔하게 만드는게 좋아서. 

웹쉐어API는 win10이상 pc에서도 동작은하나

모바일환경(스마트폰)에서만 적용하는걸 권합니다.

공유된 컨텐츠의 내용은 서버쪽 작업이필요(og태그설정)

 

web share API 명세 : https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API

실무적용사례 PC버전용

모바일용 webshare API호출화면 윈도10의 공유창

모바일용 webshare API호출화면 IOS 공유창

 

 

pc용화면 공유창ui 부분

<style type="text/css">
.sns_layer {display:none;}
.sns_layer .wrap{display:block;width:300px;margin:0 auto;margin-top:150px;}
.sns_layer .btns{
	display: block;width: 80%;
	max-width: 220px;
    height: 35px;line-height: 35px;
    border-radius: 5px;
	text-align:center;
	margin:10px auto;
}
.sns_layer .btnKakao{ color: #000;background: rgba(255, 230, 0, 1) }
.sns_layer .btnLine{color: #fff;background: rgba(29, 205, 0, 1);}
.sns_layer .btnNaver{color: #fff;background: rgba(59, 172, 55, 1);}
.sns_layer .btnFacebook{color: #fff;background: rgba(59, 89, 152, 1);}
.sns_layer .btnTwitter{color: #fff; background: rgba(29, 161, 242, 1)}
.sns_layer .btnCopy{ color: #000;background: rgba(255, 255, 255, 1) }
.sns_layer .btnCancel{ color: #fff;background: rgba(100, 100, 100, 1) }
</style>
<div class="sns_layer animated SNS-on zoomIn" style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.5); overflow-y: auto; z-index: 1999; opacity: 1; animation-duration: 0.3s;">
	<div class="wrap">
		<button class="btns btnKakao" onclick="shareKakaoTalk()"> KAKAO TALK </button>
		<button class="btns btnNaver" onclick="window.open('https://share.naver.com/web/shareView?url={=urlencode(share_data.share_url)}&title={=urlencode(share_data.share_title)}', 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');"> NAVER </button>
		<button class="btns btnTwitter" onclick="window.open('https://twitter.com/intent/tweet?url={=urlencode(share_data.share_url)}&hashtags=&text={=urlencode(share_data.share_title)}', 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');" > Twitter </button>
		<button class="btns btnFacebook" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u={=urlencode(share_data.share_url)}&t={=urlencode(share_data.share_title)}', 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');"> Facebook </button>
		<button class="btns btnLine" onclick="window.open('https://social-plugins.line.me/lineit/share?url={=urlencode(share_data.share_url)}&title={=urlencode(share_data.share_title)}', 'linesharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');"> LINE </button>
		<button class="btns btnCopy" onclick="_ClipCopy('{share_data.share_url}',2)">URL 복사</button>
		<button class="btns btnCancel">취소</button>
	</div>
</div>

js : webshare api 처리및 pc용 카톡공유js

//카톡공유
Kakao.init('{__cfg.kakao_javascript_key}');
function shareKakaoTalk() {
	Kakao.Link.sendDefault({
		objectType: 'feed',
		content: {
			title: '{share_data.share_title}',
			description:'{share_data.share_description}',
			imageUrl: '{share_data.share_image}',
			link: {mobileWebUrl: '{share_data.share_url}',webUrl: '{share_data.share_url}',},
		},
	})
}

//모바일용 webshareAPI
function sns_share(){
	if (navigator.share) { // Web Share API is supported
		alert('navigator.share');
		navigator.share({
			title: '{share_data.share_title}',
			text: '{share_data.share_description}',
			url: '{share_data.share_url}'
		}).then(() => {
			//alert('처리끝');
		}).catch(console.error);
	} else {
		// Fallback
		if ( user_agent == 'app' ){
			//하이브리드앱 네이티브콜
            //app_share2('{share_data.share_title}', '{share_data.share_url}', '{=get_text(data.pl_name)}');
		}else{
			$('.sns_layer').show();//pc용 공유버튼레이어보이게 처리
		}
	}
}

 

기타 : 

{__cfg.kakao_javascript_key} : 카톡공유용 js key > 카카오링크설정참고

{share_data.share_title} : 공유제목

{share_data.share_url} : 공유할 url

 

서버측 og태그설정 (공유된 url 에서 head meta tag)

<meta property="og:type" content="{article | website | posts | ...}" />
<meta property="og:title" content="{공유제목}" />
<meta property="og:url" content="{request_url 또는 landing url}" />
<meta property="og:description" content="{설명 | 요약내용 |  본문내용}" />
<meta name="description" content="{설명}">
<meta property="og:image" content="{image_full_url}" />
<meta property="og:image:width" content="{width}" />
<meta property="og:image:height" content="{height}" />

<meta property="og:image" content="{image_full_url}" />
<meta property="og:image" content="{image_full_url}" />
...

<meta property="og:site_name" content="{사이트명}" />
<meta property="og:locale" content="ko_KR" />

<!-- 참고 : https://ogp.me/ -->

같은내용 이미지

OG태그설정