back

  • person_pin
  • calendar_today
  • remove_red_eye

[js/javascript] 간단하게 SNS 공유하기

페이지 정보

작성자 webpaper 댓글 0건 조회 1,345회 작성일 19-02-14 13:48

본문

예전에 페이스북 공유하기 버튼 만들면서 엄청 고생했던 기억이 난다. 


이제는 sns 들도 아주 간편하게 공유할 수 있도록 만드는거 같다. 


좀만 더 있으면 웹디자이너나 퍼블리셔 개발자까지도 


어쩌면 다 편하게 하는 세상이 올지도 모르겠다. 


이미 왔나? 

HTML 

<ul class="snsList">
 
    <li>SNS 공유하기</li>
 
    <li><a href="#" id="vIconTw" onclick="return false;"><i class="vIconTw"></i></a></li>
 
    <li><a href="#" id="vIconTg" onclick="return false;"><i class="vIconTg"></i></a></li>
 
    <li><a href="#" id="vIconFb" onclick="return false;"><i class="vIconFb"></i></a></li>
 
    <li><a href="#" id="vIconKs" onclick="return false;"><i class="vIconKs"></i></a></li>
 
</ul>


script
 
$(window).ready(function(){ 
 
        $(".snsList li a").click(function(){
 
            shareAct(this);
 
        });
 
});
 
function shareAct(a){
 
        var snsCode = $(a).attr('id');
         
        var cUrl = "현재페이지 주소";
 
        switch(snsCode){
 
            case"vIconTw":
                //트위터
                cUrl = 'https://twitter.com/intent/tweet?text=페이지제목:&url='+cUrl;
            break;
 
            case"vIconTg":
                //텔레그램
                cUrl = 'https://telegram.me/share/url?url='+cUrl;
            break;
                 
            case"vIconFb":
                //페이스북
                cUrl = 'http://www.facebook.com/sharer/sharer.php?u='+cUrl;
            break;
 
            case"vIconKs":
                //카카오스토리
                cUrl = 'https://story.kakao.com/share?url='+cUrl;
            break;
 
        }
 
        window.open(cUrl,'','width=600,height=300,top=100,left=100,scrollbars=yes');
 
    }