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


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


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를 통해서 구현해보세요~



워크식스 방문하기





  1. 2017.09.13 19:36

    비밀댓글입니다

    • 2017.09.14 01:08

      비밀댓글입니다

+ Recent posts