PLUGIN

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="/js/snsshare.js"></script>

<script>
    $(function(){
        $('#snsshare').snsshare({
            date:{
                domain:'http://test.kr',
                url:'http://test.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>

 

1. 제이쿼리 설치가 필요 합니다.

 

 

 

 

<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="/js/snsshare.js"></script>

<script>
    $(function(){
        $('#snsshare').snsshare({
            date:{
                domain:'http://test.kr',
                url:'http://test.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>

 

2. 다운로드 받은 플러그인을 설치 합니다.

 

 

 

 

<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="/js/snsshare.js"></script>

<script>
    $(function(){
        $('#snsshare').snsshare({
            date:{
                domain:'http://test.kr',
                url:'http://test.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>

 

3. 기본 레이아웃을 작성 합니다.

 

 

 

 

<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="/js/snsshare.js"></script>

<script>
    $(function(){
        $('#snsshare').snsshare({
            date:{
                domain:'http://test.kr',
                url:'http://test.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>

 

4. 플러그인이 자동 실행 될수 있도록 함수를 작성 합니다.

 

 

 

 

$('#snsshare').snsshare({
            date:{
                domain:'http://test.kr', // 공유할 곳의 대표 도메인 (필수)
                url:'http://test.kr', // 공유할 곳의 전체 주소 (필수)
                desc : '내용' // url외에 다른 내용을 추가하고 싶다면 이곳을 작성해주세요. (필수)
            },
            key:{
                kakao:'카카오톡에서 발급해준 키' //카카오를 사용하고자 하실 경우 카카오개발자 센터에서 발급 받은 키를 넣어주세요. (없으면 동작 안됨).
            }
});

 

5. 적절한 옵션을 설정합니다.

 

 

 

 

※ 플러그인 설치 및 수정은 CONTAC US로 문의 해주세요.