SNS 공유 기능 추가하기

이온디 2018.08.24 05:59 조회 1015


----------------------------------------------------------------------------------------


<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

<script type="text/javascript">

// 사용할 앱의 JavaScript 키를 설정해 주세요.

    Kakao.init('앱키');

 

    // 카카오톡 공유하기

    function sendKakaoTalk()

    {

    Kakao.Link.sendTalkLink({

      label: '공유 제목',

      image: {

        src: 'http://이미지경로',

        width: '300',

        height: '200'

      },

      webButton: {

        text: '공유제목',

        url: 'https://도메인' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.

      }

    });

    }

 

    // 카카오스토리 공유하기

      function shareStory() {

        Kakao.Story.share({

          url: '도메인',

          text: '공유제목'

        });

      }

 

  

 

    // send to SNS

    function toSNS(sns, strTitle, strURL) {

        var snsArray = new Array();

        var strMsg = strTitle + " " + strURL;

var image = "이미지경로";

 

        snsArray['twitter'] = "http://twitter.com/home?status=" + encodeURIComponent(strTitle) + ' ' + encodeURIComponent(strURL);

        snsArray['facebook'] = "http://www.facebook.com/share.php?u=" + encodeURIComponent(strURL);

snsArray['pinterest'] = "http://www.pinterest.com/pin/create/button/?url=" + encodeURIComponent(strURL) + "&media=" + image + "&description=" + encodeURIComponent(strTitle);

snsArray['band'] = "http://band.us/plugin/share?body=" + encodeURIComponent(strTitle) + "  " + encodeURIComponent(strURL) + "&route=" + encodeURIComponent(strURL);

        snsArray['blog'] = "http://blog.naver.com/openapi/share?url=" + encodeURIComponent(strURL) + "&title=" + encodeURIComponent(strTitle);

        snsArray['line'] = "http://line.me/R/msg/text/?" + encodeURIComponent(strTitle) + " " + encodeURIComponent(strURL);

snsArray['pholar'] = "http://www.pholar.co/spi/rephol?url=" + encodeURIComponent(strURL) + "&title=" + encodeURIComponent(strTitle);

snsArray['google'] = "https://plus.google.com/share?url=" + encodeURIComponent(strURL) + "&t=" + encodeURIComponent(strTitle);

        window.open(snsArray[sns]);

    }

 

    function copy_clip(url) {

        var IE = (document.all) ? true : false;

        if (IE) {

            window.clipboardData.setData("Text", url);

            alert("이 글의 단축url이 클립보드에 복사되었습니다.");

        } else {

            temp = prompt("이 글의 단축url입니다. Ctrl+C를 눌러 클립보드로 복사하세요", url);

        }

    }

</script>

</head>

<body style="overflow:hidden;background-color:#f0f0f0;">

<div class="sns_wrap">

<p>SNS 공유하기</p>

<ul>

<li><a href="javascript:toSNS('facebook','공유제목!','http://http://단축URL')" title="페이스북으로 가져가기"><img src="/img/facebook.jpg"></a></li>

<li><a href="javascript:toSNS('twitter','공유제목!','http://http://단축URL')" title="트위터로 가져가기"><img src="/img/twitter.jpg"></a></li>

<li><a href="javascript:toSNS('line','공유제목!','http://http://단축URL')" title="라인으로 가져가기"><img src="/img/line.jpg"></a></li>

<li><a href="javascript:sendKakaoTalk();" title="카카오톡으로 가져가기"><img src="/img/kakao.jpg"></a></li>

<li><a href="javascript:shareStory();" title="카카오스토리로 가져가기"><img src="/img/story.jpg"></a></li>

</ul>

<ul>

<li><a href="javascript:toSNS('pholar','공유제목!','http://단축URL')" title="폴라로 가져가기"><img src="/img/pholar.jpg"></a></li>

<li><a href="javascript:toSNS('pinterest','공유제목!','http://단축URL')" title="핀터레스트로 가져가기"><img src="/img/pinterest.jpg"></a></li>

<li><a href="javascript:toSNS('band','공유제목!','http://단축URL')" title="밴드로 가져가기"><img src="/img/band.jpg"></a></li>

<li><a href="javascript:toSNS('google','공유제목!','http://http://단축URL')" title="구글플러스로 가져가기"><img src="/img/google.jpg"></a></li>

<li><a href="javascript:toSNS('blog','공유제목!','http://http://단축URL')" title="네이버블로그로 가져가기"><img src="/img/blog.jpg"></a></li>

</ul>

<ul>

<li><input type="text" value="http://도메인"><a href="javascript:copy_clip('http://도메인')"><img src="/img/sns_btn.jpg" class="sns_btn"></a></li>

</ul>

출처 : http://www.hoons.net/Board/asptip/Content/77332

http://www.hoons.net/Board/asptip/Content/77332

1. 카카오톡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- <script src="//developers.kakao.com/sdk/js/kakao.min.js"></script> -->
<script src="/m/js/kakao.min.js"></script>
 
<a id="kakao-link-btn" href="javascript:;">카카오톡</a>
<script type="text/javascript">
// 사용할 앱의 JavaScript 키를 설정해 주세요. 처음 한번만 호출하면 됩니다.
Kakao.init('XXXXXXXXXXXXXXXXXXXXXXXXXXXX');
 
// 카카오톡 링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
Kakao.Link.createTalkLinkButton({
  container: '#kakao-link-btn',
  label: '페이지명',
  image: {
    src: '페이지를 상징하는 이미지URL',
    width: '300',
    height: '200'
  },
  webButton: {
    text: '버튼명',
    url: '페이지URL' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
  }
});
</script>


2. 카카오스토리

1
2
3
4
5
6
7
8
9
10
11
<a href="javascript:shareStory()">카카오스토리 공유하기</a>
<script type="text/javascript">
// 사용할 앱의 JavaScript 키를 설정해 주세요. 처음 한번만 호출하면 됩니다.
//Kakao.init('XXXXXXXXXXXXXXXXXXXXXXXXXXXX');
function shareStory() {
  Kakao.Story.open({
    url: '페이지URL',
    text: '페이지명 #태그명'
  });
}
</script>


3. 라인

1
2
3
4
5
6
7
8
9
10
11
12
<a href="javascript:sendNaverLine();">라인</a>
<script type="text/javascript">
function sendNaverLine() {
  var sns_title = "페이지명";
  var sns_summary = "페이지설명";
  var sns_br = "\n";
  var sns_link = "페이지URL";
  var sns_img = "";
  var url = "http://line.me/R/msg/text/?" + encodeURIComponent(sns_title + sns_br + sns_summary + sns_br + sns_link);
  window.open(url,"_blank");
}
</script>


4. 네이버밴드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<a onclick="share_band('사이트명 - 페이지명', '페이지URL');return false;" class="btn_sns01" href="javascript:void(0)">네이버밴드</a>
<script type="text/javascript">
function share_band(content, url){
  content = content + " " + url;
  var param = 'create/post?text=' + encodeURIComponent(content);
  if (navigator.userAgent.match(/android/i)) {
    setTimeout(function(){
      location.href = 'intent://' + param + '#Intent;package=com.nhn.android.band;end';
    }, 100);
  } else if (navigator.userAgent.match(/(iphone)|(ipod)|(ipad)/i)) {
    location.href = 'bandapp://' + param;
  }
 
  /* 웹공유방식
  content = content + " " + url;
  var shareUrl = "http://www.band.us/plugin/share?body="+encodeURIComponent(content);
  window.open(shareUrl, "share_band", "width=410, height=540, resizable=no");
  */
}
</script>


5. 페이스북

1
2
3
4
5
6
7
<a onclick="sharerFaceBook(location.href, '페이지명');return false;" href="javascript:void(0)">페이스북</a>
<script type="text/javascript">
function sharerTwitter(sharerLnk, sharerNm) {
  var url = "http://twitter.com/share?url=" + encodeURIComponent(sharerLnk) + "&text=" + encodeURIComponent(sharerNm);
  window.open(url, 'Share to twitter');
}
</script>


6. 트위터

1
2
3
4
5
6
<a onclick="sharerTwitter(location.href, '페이지명');return false;" href="javascript:void(0)">트위터</a>
<script type="text/javascript">
function sharerFaceBook(sharerLnk, sharerNm) {
  window.open("http://www.facebook.com/sharer.php?u="+encodeURIComponent(sharerLnk)+"&t="+encodeURIComponent(sharerNm), "_blank");
}
</script>


출처: http://hhjeong.tistory.com/98 [후니의 개발일지] 

다음 중고쇼핑몰 솔루션 판매 이전 마켓플레이스 모듈 스크랩수 출력하기

댓글 0

첫 댓글을 남겨보세요.

댓글을 작성하려면 로그인이 필요합니다.

목록으로