게시물 sns공유에 url복사 기능을 넣고자 합니다.

Nariya Q & A

나리야 질답/버그/제안 게시판

홈 > 나리야 > 질답/버그/제안
질답/버그/제안

게시물 sns공유에 url복사 기능을 넣고자 합니다.

10 커지센 8 68


https://www.wsgvet.com/home/474 이거 보면서, 


혼자 하다하다 안되서 그누보드에 제작의뢰쪽에도 문의를 남기긴 했는데,,, ㅠㅠ


url복사 기능 간단히 넣을 수 있는 방법이 있을까요... 하...


버튼세팅까지는 문제 없는데 아무리 해봐도 클립보드에 url값이 들어가질 않고 먹통이니 어디부터 잘못됐는지 난 알수없는 예감에 조금씩 빠져들고 있을때쯤;


하...


http://xn--or3b13si2fg9a.com/hotissue/1


여기입니다...

8 Comments
11 우성짱 10.29 08:07  
아... 나리야에서는 안해봤거든요.

이게 결국에는 현재 URL을 가져오면 되는거라.

그리고 저는 prismjs에서 사용하고 있으니...

조금만 손보면 될거 같기도 하네요.
11 우성짱 10.29 11:52  
해보니 잘 안되네요 ㅠㅠ
10 커지센 10.29 16:09  
제작의뢰로 해결했습니다 ㅋ 감사합니다.
9 l2zeo 10.29 16:13  
예를 들어서 이런식으로 가능하겠네요.
먼저 input 에 주소가 보이게 할지 아닐지를 정하시고 안보이고 버튼만 보인다면
input를 hidden 처리하셔야겠죠. jQuery 플러그인을 사용해도 되지만 간단하게 javascript만으로도 구현이 가능합니다.
다른 옵션이 필요하다면 플러그인 사용하시구요.

우선 해당 페이지의 주소를 구해야 하니
$_SERVER 함수를 이용해보죠.

<?php
$copy_url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
?>


그뒤 버튼을 삽입할 위치에 아래를 참고하여 삽입해줍니다.
버튼만 보이고 input은 보이지 않게 처리하기 위해서 hidden을 추가합니다.
부트스트랩4가 어찌되는지는 찾아보셔야 할거 같습니다..

<div class="share-link share-url-wrapper share-copy-url">
<input type="text" name="" value="<?php echo $copy_url; ?>" id="share-url-input" hidden required>
<button class="btn btn-dark" id="share_url">URL 복사</button>
</div>


그뒤 javascript를 이용해서 button 을 클릭하면 input value값인 url를 복사하도록 하죠.

<script>
$(function() {
  const profileShare = document.getElementById('share_url'); //buttn의 ID값인 share_url를 지정.

  profileShare.addEventListener('click', function(e) { //buttn의 ID값인 share_url를  클릭하면
    e.preventDefault();

    //input의 id인 share-url-input value값을 복사.
    document.execCommand('copy', false, document.getElementById('share-url-input').select());
    alert('주소가 복사되었습니다.\n원하는 곳에 붙여넣기(Ctrl+V)해주세요..'); // alert창을 띄워서 확인.
  });
});
</script>
11 우성짱 10.29 21:59  
와우 대박이네요. 도전해봐야겠습니다.

---

음 해보니깐 alert은 뜨는데 복사가 안되는군요 ㅠㅠ

자바스크립트 공부를 해야겠습니다 ㅠㅠ

----

hidden을 삭제해주니 복사가 되는군요 흠...
11 우성짱 10.30 10:53  
그누보드 현재 주소는 <?=urldecode($urlencode)?> 이렇게 하니깐 나오네요.

그래서

<script>
$(function() { // 주소 복사하기 자바스크립트
  const profileShare = document.getElementById('share_url'); //buttn의 ID값인 share_url를 지정.

  profileShare.addEventListener('click', function(e) { //buttn의 ID값인 share_url를  클릭하면
    e.preventDefault();

    //input의 id인 share-url-input value값을 복사.
    document.execCommand('copy', false, document.getElementById('share-url-input').select());
    //alert('주소가 복사되었습니다.\n원하는 곳에 붙여넣기(Ctrl+V)해주세요.'); // alert창을 띄워서 확인.
document.getElementById('share-url-input').blur();
  });
});
</script>

이렇게 잡아주고

<?php { // 주소복사 ?>
<div id="bo_v_btn_group" class="clearfix text-center py-4 px-3 en">
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-dark" data-toggle="tooltip" data-placement="top" data-original-title="클릭하면 주소가 복사됩니다." id="share_url">
<i class="fa fa-clipboard" aria-hidden="true"> 주소복사</i>
<span class="sr-only">주소 복사</span>
</button>
<input type="text" name="주소 복사" value="<?=urldecode($urlencode)?>" id="share-url-input">
</div>
</div>
<?php } ?>

이렇게 잡아주었습니다.

input이 hidden이면 복사가 안되네요.

input이 hidden이어도 복사되게 할 수 없을까요?
11 우성짱 10.30 13:52  
http://amina.co.kr/bbs/board.php?bo_table=tip&wr_id=5963

이렇게 밖으로 날렸습니다 .ㅎㅎ
11 우성짱 10.30 00:20  
view.skin.php에서

<?php>
$copy_url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' ? 'https' : 'http') .'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
?>

<script>
$(function() {
  const profileShare = document.getElementById('share_url'); //buttn의 ID값인 share_url를 지정.

  profileShare.addEventListener('click', function(e) { //buttn의 ID값인 share_url를  클릭하면
    e.preventDefault();

    //input의 id인 share-url-input value값을 복사.
    document.execCommand('copy', false, document.getElementById('share-url-input').select());
    alert('주소가 복사되었습니다.\n원하는 곳에 붙여넣기(Ctrl+V)해주세요.'); // alert창을 띄워서 확인.
document.getElementById('share-url-input').blur();
  });
});
</script>

위와 같이 넣고,

신고 밑에

<?php { // 주소복사 ?>
<div id="bo_v_btn_group" class="clearfix text-center py-4 px-3 en">
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-basic" id="share_url">
<i class="fa fa-files-o" aria-hidden="true"> 주소복사</i>
<span class="sr-only">주소 복사</span>
</button>
<input type="input" name="주소 복사" value="<?php echo $copy_url; ?>" id="share-url-input" required>
</div>
</div>
<?php } ?>

이렇게 넣어줬습니다.

잘 됩니다. ㅎㅎ
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand