关于分享按钮
首先引入资源包,与复制功能相关
<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); });
一懒众衫小