sns 공유하기 질문
본문
게시판 리스트 페이지에서 아래 사진처럼 공유하기 버튼을 클릭하면 팝업으로 뜨게해서 선택하게 만들고 있는 중입니다.
문제는 게시판 리스트별로 따로 작도이 되는게 아니라 버튼을 클릭하면 리스트 목록에 있는
모든 글에서 팝업창이 함께 뜨는게 문제입니다
개별로 작동이 되야 하는데.. 문제가 멀까욤? ㄷㄷㄷㄷ
아래 소스틑 list.skin.php 파일내에 적용되어 있는 공유 관련 소스 입니다.
고수님들 도와 주세요 ㅠㅠㅠ
<LINK href="<?=$board_skin_url?>/2222/bootstrap.min.css" rel="stylesheet">
<SCRIPT src="<?=$board_skin_url?>/2222/jquery-2.1.4.min.js" type="text/javascript"></SCRIPT>
<SCRIPT src="<?=$board_skin_url?>/2222/bootstrap.min.js" type="text/javascript"></SCRIPT>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<STYLE>
.sns-list{
border:1px solid #ccc;
padding:15px;
background:#fff;
position:absolute;
width:285px;
bottom:30px;
right:0;
display:none;
}
.sns-icon{
border-radius:0;
width:50px;
margin:5px;
}
.sns-icon-btn{
display:inline-block;
position:relative;
float:right;
cursor:pointer;
border:1px solid #ccc;
padding:2px 4px 5px 5px;
}
.sns-icon-btn:hover{
border:1px solid #333;
}
.sns-icon-btn .share-icon{
width:20px;
}
.sns-url-box{
width:100%;
display:table;
table-layout:fixed;
margin-top:10px;
}
.sns-url-box .sns-url{
display:table-cell;
width:auto;
}
.sns-url-box .sns-url input{
padding:3px;
border:1px solid #ccc;
background-color:#eee;
cursor:default;
width:100%;
}
.sns-url-box .sns-btn{
display:table-cell;
width:70px;
}
.sns-url-box .sns-btn button{
width:70px;
padding:3px 0;
text-align:center;
color:#333;
background-color:#fff;
border:1px solid #ccc;
}
</STYLE>
<DIV class="sns-icon-btn">
<DIV class="sns-list">
<a href="javascript:toSNS('facebook')" ><img src="<?=$board_skin_url?>/2222/facebook.png" data-original-title="페이스북" data-toggle="tooltip" class="sns-icon" ></a>
<a href="javascript:toSNS('google')" ><img src="<?=$board_skin_url?>/2222/googleplus.png" data-original-title="구글플러스" data-toggle="tooltip" class="sns-icon"></a>
<a href="javascript:toSNS('kakaostory')" ><img src="<?=$board_skin_url?>/2222/kakaostory.png" data-original-title="카카오스토리" data-toggle="tooltip" class="sns-icon"></a>
<a id="kakao-link-btn" href="javascript:;"><img src="<?=$board_skin_url?>/2222/kakaotalk.png" data-original-title="카카오톡" data-toggle="tooltip" class="sns-icon"></a>
<a href="javascript:toSNS('blog')" ><img src="<?=$board_skin_url?>/2222/naver.png" data-original-title="네이버블로그" data-toggle="tooltip" class="sns-icon"></a>
<a href="javascript:toSNS('band')" ><img src="<?=$board_skin_url?>/2222/naverband.png" data-original-title="네이버밴드" data-toggle="tooltip" class="sns-icon"></a>
<a href="javascript:toSNS('line')" ><img src="<?=$board_skin_url?>/2222/tumblr.png" data-original-title="라인" data-toggle="tooltip" class="sns-icon"></a>
<a href="javascript:toSNS('twitter')" ><img src="<?=$board_skin_url?>/2222/twitter.png" data-original-title="트위터" data-toggle="tooltip" class="sns-icon"></a>
<DIV class="sns-url-box">
<DIV class="sns-url"><INPUT name="sns_url" type="text" readonly="" value="http://sun76841.dothome.co.kr<?php echo $_SERVER['REQUEST_URI']; ?>&wr_id=<?=$list[$i]['wr_id']?>"></DIV>
<DIV class="sns-btn"><BUTTON type="button" data-toggle="popover" data-placement="top"
data-content="주소가 복사되었습니다.<br>원하는 곳에 붙여넣기(Ctrl+V)해주세요" data-container="body">URL
복사</BUTTON></DIV></DIV></DIV><IMG class="share-icon" src="<?=$board_skin_url?>/2222/share.png">
</DIV>
<SCRIPT type="text/javascript">
//<![CDATA[
// // 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('1a671a0bf21491b57c88ebae6e761c9d');
// // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
Kakao.Link.createDefaultButton({
container: '#kakao-link-btn',
objectType: 'feed',
content: {
title: '',
description: '',
imageUrl: '',
link: {
mobileWebUrl: 'http://sun76841.dothome.co.kr/bbs/board.php?bo_table=a4&wr_id=46',
webUrl: 'http://sun76841.dothome.co.kr/bbs/board.php?bo_table=a4&wr_id=46'
}
},
social: {
likeCount: 286,
commentCount: 45,
sharedCount: 845
},
buttons: [
{
title: '웹으로 보기',
link: {
mobileWebUrl: 'http://sun76841.dothome.co.kr/bbs/board.php?bo_table=a4&wr_id=46',
webUrl: 'http://sun76841.dothome.co.kr/bbs/board.php?bo_table=a4&wr_id=46'
}
},
{
title: '앱으로 보기',
link: {
mobileWebUrl: 'http://sun76841.dothome.co.kr/bbs/board.php?bo_table=a4&wr_id=46',
webUrl: 'http://sun76841.dothome.co.kr/bbs/board.php?bo_table=a4&wr_id=46'
}
}
]
});
//]]>
function toSNS(sns, strTitle, strURL) {
var snsArray = new Array();
var strMsg = strTitle + " " + strURL;
var image = "이미지경로";
var uri = ""; // 추가
var enc = encodeURIComponent(uri);
snsArray['facebook'] = "http://www.facebook.com/share.php?u="+enc;
snsArray['google'] = "https://plus.google.com/share?url="+enc;
snsArray['blog'] = "http://blog.naver.com/openapi/share?url="+enc;
snsArray['band'] = "http://band.us/plugin/share?body="+enc;
snsArray['line'] = "http://line.me/R/msg/text/?"+enc;
snsArray['twitter'] = "http://twitter.com/home?status="+enc;
snsArray['kakaostory'] = "https://story.kakao.com/s/share?url="+enc;
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);
}
}
$(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover(
{
animation:false,
trigger:"click",
html:true
}
);
$(".sns-icon-btn").find(".share-icon").on("click",function(){
$(".sns-icon-btn").find(".sns-list").show();
});
$(".sns-icon-btn").find(".sns-btn button").on("click",function(){
$(".sns-icon-btn").find("input[name='sns_url']").select();
document.execCommand('copy');
$('[data-toggle="popover"]').popover("show");
setTimeout(function(){
$('[data-toggle="popover"]').popover("hide");
},2000);
});
$(document).mouseup(function(e){
var elm=$(".sns-icon-btn");
if(elm.has(e.target).length===0){
elm.find(".sns-list").hide();
$('[data-toggle="popover"]').popover("hide");
}
});
});
</SCRIPT>
답변을 작성하시기 전에 로그인 해주세요.
