jQuery 소셜 공유하기 버튼 스크립트

jQuery 소셜 공유하기 버튼 스크립트

 

jQuery 를 이용한 소셜 공유하기 버튼 스크립트입니다.

간단하게 <a> 엘리먼트에 몇가지 속성값을 추가하여 공유하기 버튼을 만들수 있습니다.

<a href="#" data-toggle="sns_share"  data-service="naver" data-title="네이버 SNS공유" class="btn btn-default">네이버 SNS 공유하기</a>
<a href="#" data-toggle="sns_share"  data-service="twitter" data-title="트위터 SNS공유" class="btn btn-default">트위터 SNS 공유하기</a>
<a href="#" data-toggle="sns_share"  data-service="facebook" data-title="페이스북 SNS공유" class="btn btn-default">페이스북 SNS 공유하기</a>
<a href="#" data-toggle="sns_share"  data-service="google" data-title="구글 SNS공유" class="btn btn-default">구글 공유하기</a>
<a href="#" data-toggle="sns_share"  data-service="band" data-title="네이버밴드 SNS공유" class="btn btn-default">네이버 밴드 공유하기</a>
<a href="#" data-toggle="sns_share"  data-service="pinterest" data-title="핀터레스트 SNS공유" class="btn btn-default">핀터레스트 공유하기</a>
<a href="#" data-toggle="sns_share"  data-service="kakaostory" data-title="카카오스토리 SNS공유" class="btn btn-default">카카오스토리 공유하기</a>

옵션 설명

	형식	설명	값
data-toggle	고정 문자	해당 엘리먼트를 ‘공유버튼’이라 인식시키는 기능을합니다.	sns_share
data-service	string	서비스명	naver, twitter, facebook, google, band, pinterest
data-title	string	소셜공유시 글(페이지) 제목을 입력합니다.

 

$(document).ready(function(){
    
   $("a[data-toggle='sns_share']").click(function(e){
		e.preventDefault();
		
		var _this = $(this);
		var sns_type = _this.attr('data-service');
		var href = current_url;
		var title = _this.attr('data-title');
		var loc = "";
		var img = $("meta[name='og:image']").attr('content');
		
		if( ! sns_type || !href || !title) return;
		
		if( sns_type == 'facebook' ) {
			loc = '//www.facebook.com/sharer/sharer.php?u='+href+'&t='+title;
		}
		else if ( sns_type == 'twitter' ) {
			loc = '//twitter.com/home?status='+encodeURIComponent(title)+' '+href;
		}
		else if ( sns_type == 'google' ) {
			loc = '//plus.google.com/share?url='+href;
		}
		else if ( sns_type == 'pinterest' ) {
			
			loc = '//www.pinterest.com/pin/create/button/?url='+href+'&media='+img+'&description='+encodeURIComponent(title);
		}
		else if ( sns_type == 'kakaostory') {
			loc = 'https://story.kakao.com/share?url='+encodeURIComponent(href);
		}
		else if ( sns_type == 'band' ) {
			loc = 'http://www.band.us/plugin/share?body='+encodeURIComponent(title)+'%0A'+encodeURIComponent(href);
		}
		else if ( sns_type == 'naver' ) {
			loc = "http://share.naver.com/web/shareView.nhn?url="+encodeURIComponent(href)+"&title="+encodeURIComponent(title);
		}
		else {
			return false;
		}
		
		window.open(loc);
		return false;
	});
    
    
});