关于分享按钮

首先引入资源包,与复制功能相关

<script src="<?= Yii::app()->request->baseUrl?>/assets/clipboard.min.js"></script>

然后页面HTML分享按钮

<div class=" fl">

        <div class="cont_btn"><a href="javascript:vo(0)" class="sns_on"><img src="<?= Yii::app()->request->baseUrl?>/assets/www/img/pc/btn_m.png" alt=""  /></a></div>
        <div class="sns_bg sns_pc">
               
                <div class="sns_in">
                    <ul class="ufl sns_ul l10">
                        <li class="ac">
                            <a href="javascript:toSNS('facebook','할인판매점꾹','<?=$thisUrl?>');">
                                <img src="<?= Yii::app()->request->baseUrl?>/assets/www/img/pc/3.png" alt="" />
                            </a>
                            <div class="sns_tit">페이스북</div>
                        </li>
                        <li class="ac">
                            <a href="javascript:toSNS('twitter','할인판매점꾹','<?=$thisUrl?>');">
                                <img src="<?= Yii::app()->request->baseUrl?>/assets/www/img/pc/2.png" alt="" />
                            </a>
                            <div class="sns_tit">트위터</div>
                        </li>
                        <li class="ac">
                            <a href="javascript:sendSns('band','<?=$thisUrl?>','할인판매점꾹');">
                                <img src="<?= Yii::app()->request->baseUrl?>/assets/www/img/pc/1.png" alt="" />
                            </a>
                            <div class="sns_tit">밴드</div>
                        </li>
                    </ul>
                    <div class="cb t15"></div>
                    
                    <ul class="ufl l20">
                        <li><input type="text" name="" class="sns_input" value="<?=$thisUrl?>"  /></li>
                        <li><button class="sns_btn link_button" type="button" >복사</button></li>
                    </ul>
                </div>
        </div>
        
</div>

然后引用JS

//button start
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 kakaoSns(sns, strTitle, strURL, imgsURL) {

    var mWebUrl = '<?=$thisUrl?>';
    var webUrl = '<?=$thisUrl?>';

    //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('02718f26a02c4ac2f8f418751843e244');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createDefaultButton({
      container: '#kakao-link-btn',
      objectType: 'feed',
      content: {
        title: '할인판매점꾹',
        description: '#㈜지앤지커머스 #도매꾹',
        imageUrl:imgsURL,
        imageWidth    : 200,
        imageHeight    : 100,
        link: {
          mobileWebUrl: mWebUrl,
          webUrl: webUrl
        }
      },
      social: {
        likeCount: 286,
        commentCount: 45,
        sharedCount: 845
      },
      buttons: [
        {
          title: '자세히 보기',
          link: {
            mobileWebUrl: mWebUrl,
            webUrl: webUrl
          }
        }
      ]
    });
  //]]>

}
function sendSns(sns, url, txt)
{
    var o;
    var _url = encodeURIComponent(url);
    var _txt = encodeURIComponent(txt);
    var _br  = encodeURIComponent('\r\n');
 
    switch(sns)
    {
        case 'facebook':
            o = {
                method:'popup',
                url:'http://www.facebook.com/sharer/sharer.php?u=' + _url
            };
            break;
 
        case 'twitter':
            o = {
                method:'popup',
                url:'http://twitter.com/intent/tweet?text=' + _txt + '&url=' + _url
            };
            break;
 
        case 'me2day':
            o = {
                method:'popup',
                url:'http://me2day.net/posts/new?new_post[body]=' + _txt + _br + _url + '&new_post[tags]=epiloum'
            };
            break;
 
        case 'kakaotalk':
            o = {
                method:'kakaoapp',
                param:'main?callfrom=com.naggama&callurl=' + _url,
                a_store:'itms-apps://itunes.apple.com/app/id362057947?mt=8',
                g_store:'market://details?id=com.kakao.talk',
                a_proto:'kakaolink://',
                g_proto:'scheme=kakaolink;package=com.kakao.talk'
            };
            break;
 
        case 'band':
            o = {
                method:'web2app',
                param:'create/post?text=' + _txt + _br + _url,
                a_store:'itms-apps://itunes.apple.com/app/id542613198?mt=8',
                g_store:'market://details?id=com.nhn.android.band',
                a_proto:'bandapp://',
                g_proto:'scheme=bandapp;package=com.nhn.android.band'
            };
            break;
 
        default:
            alert('지원하지 않는 SNS입니다.');
            return false;
    }
 
    switch(o.method)
    {
        case 'popup':
            window.open(o.url);
            break;
 
        case 'web2app':
            if(navigator.userAgent.match(/android/i))
            {
                // Android
                setTimeout(function(){ location.href = 'intent://' + o.param + '#Intent;' + o.g_proto + ';end'}, 100);
            }
            else if(navigator.userAgent.match(/(iphone)|(ipod)|(ipad)/i))
            {
                // Apple
                setTimeout(function(){ location.href = o.a_store; }, 200);          
                setTimeout(function(){ location.href = o.a_proto + o.param }, 100);
            }
            else
            {
                alert('이 기능은 모바일에서만 사용할 수 있습니다.');
            }
            break;

 
    }
}
//button url
var PC_URL= "<?=$thisUrl?>";
var clipboard = new Clipboard('.link_button', {
    text: function() {
        return PC_URL;
    }
});

clipboard.on('success', function(e) {
    alert("복사성공");
});

clipboard.on('error', function(e) {
    console.log(e);
});

 

posted @ 2018-04-06 08:50  一懒众衫小丶  阅读(289)  评论(0编辑  收藏  举报