그냥 개발자 블로그

sns공유하기 추가 제이쿼리 플러그인 본문

소식/플러그인소식

sns공유하기 추가 제이쿼리 플러그인

마음이파파 2015. 9. 21. 17:20

한동안 블로그 제재로 인해 추이를 살펴보느라


새글을 안써서 오랜만에 포스팅을 쓰게 되네요.


brown_and_cony-8 






요즘 웹사이트에 필수요건으로 빠질수 없는게


SNS공유하기 기능인데요.


sns 서비스 업체별로 api를 제공함에 따라 쉽게 구현할수 있죠.


하지만 이를 구현하기 위해서 sns 서비스 업체 개발사이트들을 돌아다니며


api를 확인하기가 여간 귀찮은게 아닐수가 없는데요.


그래서 오늘 준비한 제이쿼리 플러그인은 sns 공유하기에요.


먼저 예제 영상부터 보고 가실게요.











해당 기능에 대해서는 여러분들이 아마도 기능을 더 잘아실꺼에요. ㅋㅋㅋ


moon_and_james-4 






snsshare.js 는 홈페이지에서


다운로드 가능하세요.(예제에 사용된 이미지도 있어요.)


해당 플러그인에서 지원 하는 sns는 다음과 같아요.


페이스북, 트위터, 구글플러스, 카카오스토리, 카카오톡, 라인, 밴드


단, 카카오 서비스는 카카오개발자 페이지 가져서 등록한 키가 있어야


사용이 가능해요.


그럼 예제를 보면서 사용법도 익혀봐야겠죠?







 


<style>

#snsshare{margin:20px 0px 0px 20px;}

#snsshare span{cursor:pointer;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="snsshare.js"></script>


<script>

$(function(){

$('#snsshare').snsshare({

date:{

domain:'http://work6.kr',

url:'http://work6.kr',

desc : '내용'

},

key:{

kakao:'카카오톡에서 발급해준 키'

}

});

});

</script>


<body>

<div id="snsshare">

<span class='facebook'><img src='sns_facebook.png'></span>

<span class='twitter'><img src='sns_twitter.png'></span>

<span class='googleplus'><img src='sns_googleplus.png'></span>

<span class='kakaostory'><img src='sns_kakaostory.png'></span>

<span class='kakao'><img src='sns_kakao.png'></span>

<span class='line'><img src='sns_line.png'></span>

<span class='band'><img src='sns_band.png'></span>

</div>

</body>

 


 


다음과 같이 html을 작성 해주시고


최상의 아이디는 원하시는대로 작성해주시고


사용하고자 하는 sns의 이름을 클래스로 넣어 주세요.





 

<style>

#snsshare{margin:20px 0px 0px 20px;}

#snsshare span{cursor:pointer;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="snsshare.js"></script>


<script>

$(function(){

$('#snsshare').snsshare({

date:{

domain:'http://work6.kr',

url:'http://work6.kr',

desc : '내용'

},

key:{

kakao:'카카오톡에서 발급해준 키'

}

});

});

</script>


<body>

<div id="snsshare">

<span class='facebook'><img src='sns_facebook.png'></span>

<span class='twitter'><img src='sns_twitter.png'></span>

<span class='googleplus'><img src='sns_googleplus.png'></span>

<span class='kakaostory'><img src='sns_kakaostory.png'></span>

<span class='kakao'><img src='sns_kakao.png'></span>

<span class='line'><img src='sns_line.png'></span>

<span class='band'><img src='sns_band.png'></span>

</div>

</body>

 




예제의 경우 위와 같이 스타일을 작성해주었어요.






 

<style>

#snsshare{margin:20px 0px 0px 20px;}

#snsshare span{cursor:pointer;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="snsshare.js"></script>


<script>

$(function(){

$('#snsshare').snsshare({

date:{

domain:'http://work6.kr',

url:'http://work6.kr',

desc : '내용'

},

key:{

kakao:'카카오톡에서 발급해준 키'

}

});

});

</script>


<body>

<div id="snsshare">

<span class='facebook'><img src='sns_facebook.png'></span>

<span class='twitter'><img src='sns_twitter.png'></span>

<span class='googleplus'><img src='sns_googleplus.png'></span>

<span class='kakaostory'><img src='sns_kakaostory.png'></span>

<span class='kakao'><img src='sns_kakao.png'></span>

<span class='line'><img src='sns_line.png'></span>

<span class='band'><img src='sns_band.png'></span>

</div>

</body>

 



워크식스에서 다운 받은 snsshare.js를 서버에


올력주시고 이를 연결해주세요.








<style>

#snsshare{margin:20px 0px 0px 20px;}

#snsshare span{cursor:pointer;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="snsshare.js"></script>


<script>

$(function(){

$('#snsshare').snsshare({

date:{

domain:'http://work6.kr',

url:'http://work6.kr',

desc : '내용'

},

key:{

kakao:'카카오톡에서 발급해준 키'

}

});

});

</script>


<body>

<div id="snsshare">

<span class='facebook'><img src='sns_facebook.png'></span>

<span class='twitter'><img src='sns_twitter.png'></span>

<span class='googleplus'><img src='sns_googleplus.png'></span>

<span class='kakaostory'><img src='sns_kakaostory.png'></span>

<span class='kakao'><img src='sns_kakao.png'></span>

<span class='line'><img src='sns_line.png'></span>

<span class='band'><img src='sns_band.png'></span>

</div>

</body>

 



document가 로딩이 완료되는 시점에


위와 같이 작성해주면 되는데요.


옵션에 대한 설명은 아래와 같아요.


domaiin : 공유할 곳의 대표 도메인 (필수)

url : 공유할 곳의 전체 주소 (필수)

desc : url외에 다른 내용을 추가하고 싶다면 이곳을 작성해주세요. (필수)

kakao : 카카오를 사용하고자 하실 경우 카카오개발자 센터에서 발급 받은 키를 넣어주세요. (없으면 동작 안해요.)


위 옵션들중 domain, url, desc은 필수 항목이에요.







요즘 왠만한 솔루션에는 있는기능 인데 만약 없으시다면


snsshare.js를 통해서 구현해보세요~



워크식스 방문하기





저작자표시 비영리 변경금지

'소식 > 플러그인소식' 카테고리의 다른 글

공지용 레이어팝업 간단 구현 제이쿼리(jquery) 플러그인  (0) 2015.09.21
모바일웹에서 숨김메뉴 구현 제이쿼리(jquery) 플러그인  (0) 2015.09.21
남은 시간 표시하는 제이쿼리 플러그인 (jquery plugin)  (0) 2015.09.21
모바일웹 접속시 자동으로 바탕화면에 바로가기 생성  (1) 2015.09.21
소스 코드 보호 제이쿼리(jquery) 플러그인  (0) 2015.09.21
'소식/플러그인소식' Related Articles more