본문 바로가기

Web/HTML

페이스북, 트위터, 카카오스토리링크 공유하기 기능 ( PC, 모바일 모두 가능 )

 

header.inc

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0,

user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"/>
<meta property="og:title" content="<%=brochureInfo.getBrochureName()%>"/>
<meta property="og:type" content="article"/>
<meta property="og:image" content="<%=imagePath%>"/>
<meta property="og:url" content="<%=webUrl%>"/>
<meta property="og:description" content="<%=brochureInfo.getDescription()%>"/>
 
 <title>페이스북</title>
 <link href="/css/reset.css" rel="stylesheet" type="text/css" />
 <link href="/css/common.css" rel="stylesheet" type="text/css" />

 <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="/js/common.js"></script>
 <script type="text/javascript" src="/js/kakao.link.js"></script>
 <!--[if IE 9]>
 <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <script src="/js/respond.min.js"></script>
 <![endif]-->
 <script type="text/javascript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
 
 <script type="text/javascript">
  (function() {
   /**
   * 상단 주소창 감추기
   */
   function hideAddressBar() {
      var doc_height = document.documentElement.scrollHeight;
      var win_ratio = (window.outerHeight / window.devicePixelRatio);
     
      if(doc_height < win_ratio) {
          doc_height = win_ratio + 'px';
      }
   
      setTimeout(window.scrollTo(1,1),0);
   };
   
   window.addEventListener('load', hideAddressBar, false);  // 페이지 로드 되었을 때 실행
   window.addEventListener('orientationchange', hideAddressBar, false); // 화면이 가로/세로 전환되었을 때 실행
   
  })();
   
   
  $(document).ready(function() {
   //ajax 기본 세팅
      jQuery.ajaxSetup({
          global: false,
          cache: true,
          dataType: 'json',
          timeout: 30000,
          type: 'POST'
      });
   

   // 카카오 개발자등록을 해야 받을수 있는 키이다.
   Kakao.init('0d43fd4c5bf8ca06c3be460dc16d6ba7');
   
   // Pc 로 접속 할 경우 카카오톡~ 복사까지 숨기기
   if(!fncIsMobile()){
    for (var i=3; i < 7; i++) {  
     $("ul.sharing_list > li").eq(i).hide(); 
    }
   }
   

   // iphone 기기로 들어올 경우 sms를 숨기기 해준다.
   if(/iphone/.test(window.navigator.userAgent.toLowerCase() ) ){
    $("ul.sharing_list > li").eq(5).hide();
   }
   
   <%if (brochureInfo != null) { %>
    fncGetGoodCnt(<%=brochureInfo.getBrochureNo()%>);
   <%} %>
  });

 

  // sns 공유기능 함수
  function fncsnsshare(flag) {
 
   var url = '<%=webUrl%>';
   var path = '<%=imagePath%>';
   var title = '[달콤브로셔] ' + '<%=brochureInfo.getBrochureName()%>';
   var description = '<%=description%>';
   
   if(flag == 'facebook'){             // 페이스북
    var openUrl = 'https://facebook.com/sharer/sharer.php?u='+encodeURIComponent(url);
          window.open(openUrl, 'facebook-share-dialog', '');
   
   }else if(flag == 'twitter'){        // 트위터
    var openUrl = "http://twitter.com/share?url="+encodeURIComponent(url)+"&text="+encodeURIComponent(title);
       var wp = window.open(openUrl, 'twitter', '');
       if(wp){
           wp.focus();
       }
      
   }else if(flag == 'kakaostory'){  // 카카오스토리
    // PC 버전
    if(!fncIsMobile()){
     var kakaostory = "https://story.kakao.com/share?url=" + encodeURIComponent(url) + "&referrer=<%=webUrl%>";
     window.open(kakaostory,"StoryShare","");
    }else {
     // 모바일 버전
     kakao.link("story").send({
      post : url,
            appid : url,
            appver : "1.0",
            apiver : "1.0",
            appname : "[달콤브로셔]",
            urlinfo : JSON.stringify({title: title, desc: description,
            imageurl:[path], type:"article"})
        });    
     
    }
   }else if(flag == 'kakao-talk'){  // 카톡
         Kakao.Link.sendTalkLink({
           label : title
           ,webLink: {
            text : url,
        url : url
     }
            });
   }else if(flag == 'mail'){   // 모바일 메일 보내기
    $("#mail").attr('href', 'mailto:?subject='+ title +'&body='+url);
   }else if(flag == 'sms'){  // 모바일 SMS 보내기
    $("#sms").attr('href', 'sms://?body='+ title + " " + url);
   }else if(flag == 'urlcopy'){
    // ie 구분하기
    var ie = (document.all) ? true : false;
    
    if(!fncIsMobile()){
           if(ie){
               if( confirm("이 글의 트랙백 주소를 클립보드에 복사하시겠습니까?") )
                   window.clipboardData.setData("Text", url);
           }else{
               temp = prompt("이 글의 트랙백 주소입니다. Ctrl+C를 눌러 클립보드로 복사하세요", url);
           }
    }else {
      temp = prompt("URL로 공유시 전체 선택하여 복사하세요.", url);  
    }
   }
  }
    
 </script>

 

 

 

top.jsp

 

 <section>
  <div class="info_section">
   <ul class="info_list">
    <li><a href="#"><span class="sharing"><img src="/images/common/btn_sharing.png" alt="" /></span><span class="sharing_t">

          <img src="/images/common/btn_t_sharing.png" alt="" /></span><span class="text">공유하기</span></a>
    <ul class="sharing_list">
      <h2>공유하기</h2>
      <li><a href="javascript:fncsnsshare('facebook');"><span class="title">페북</span></a></li>
      <li><a href="javascript:fncsnsshare('twitter');"><span class="title">트윗</span></a></li>
      <li><a href="javascript:fncsnsshare('kakaostory');"><span class="title">카스</span></a></li>
      <li><a href="javascript:fncsnsshare('kakao-talk');"><span class="title">카톡</span></a></li>
      <li><a href="javascript:fncsnsshare('mail');" id="mail"><span class="title">메일</span></a></li>
      <li><a href="javascript:fncsnsshare('sms');" id="sms"><span class="title">SMS</span></a></li>
      <li><a href="javascript:fncsnsshare('urlcopy');"><span class="title">복사</span></a></li>
      <span class="close"><a href="#"><img src="/images/common/btn_close02.png" alt="Close"/></a></span>
     </ul>
    </li>
    <li><a href="javascript:fncInsertGoodCnt(<%=brochureDomain.getBrochureNo() %>);"><span class="recommend">

    </span><span class="text">추천하기</span><span class="click_num" id="goodCnt"></span></a></li>
   </ul>
  </div>
 </section>

 

kakao.link.js ( 카카오톡 회사에서 만든 파일 GiftHub 에서 다운 )

참고 사이트 ( https://github.com/kakao/kakaolink-web ) 이거 찾는데 남한산성 갈뻔함.

 

kakao.link.js

 

 

 

 

 

 

'Web > HTML' 카테고리의 다른 글

IE문서모드 브라우저 모드 설정  (0) 2013.07.11
Jqgrid 날짜 한글로 설정  (0) 2012.07.24
ckeditor 설치 및 기본 설정  (0) 2012.07.24
jq05.html  (0) 2012.07.24
jq04.html  (0) 2012.07.24