티스토리 URL 복사하기 버튼 스킨에 추가하기

이번 글에서는 지난번에 적었던 SNS버튼 추가하기 글에서 하나 더 아이콘을 추가하는 글입니다. 바로 URL 복사하기 버튼인데요. 현재 읽고 있는 글을 쉽게 공유하게 하기 위해서 글 주소를 복사하게 하는 버튼입니다. 대부분의 모바일에서는 자동으로 글 주소를 복사하는 기능이 있는데 웹에서 쉽게 공유할 용도라고 보시면 됩니다. SNS버튼 노출은 A, B 형태 두가지 방법으로 알려드릴 예정입니다. 아래글을 참조해 주세요


  • 핀터레스트  공유하기
  • 카카오톡 공유하기
  • 네이버블로그 공유하기
  • 네이버밴드 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • URL 복사하기

SNS 버튼 추가하기 참조

티스토리에서 SNS버튼을 추가하는 기능은 먼저 아래글을 참조해주세요

모든 프로세스는 위 글과 동일합니다.

  • 아이콘 이미지 다운로드
  • 이미지 파일 업로드 : 파일 업로드 경로 : 스킨편집 – html편집 – 파일업로드 – 추가버튼
  • 스킨편집 – HTML에 코드 추가 (하단 코드)

URL 복사하기 버튼 추가(A형태)

이미지 파일 다운로드

먼저 아래 경로에서 이미지 아이콘을 다운로드 해주세요. 기존글과 동일한 파일입니다.

이미지 파일 업로드

파일을 다운받은 후 아래 경로에 URL 이미지 파일을 업로드해주세요. 이미지 사이즈는 140×140이며 이후에 CSS에서 노출되는 크기는 설정할 수 있습니다.

  • 파일 업로드 경로 : 스킨편집 – html편집 – 파일업로드 – 추가버튼

파일 업로드 화면
파일 업로드 화면

링크 주소 복사
링크 주소 복사

그리고 각 이미지를 클릭하면 고유 URL을 확인할 수 있습니다. 따로 메모장 같은 곳에 적어놔주세요.

URL 복사하기 HTML 코드

<!-- URL 복사 버튼 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10">
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
        <li style="display: inline-block;">
            <script>
                function copyUrl() {
                    // 현재 페이지의 URL을 가져오기
                    let nowUrl = window.location.href;

                    // URL을 클립보드에 복사
                    navigator.clipboard.writeText(nowUrl).then(function() {
                        // URL 복사 성공 시 SweetAlert2로 알림 메시지 표시
                        Swal.fire({
                            icon: 'success',
                            title: '페이지 URL이 복사되었습니다.',
                            showConfirmButton: false,
                            timer: 1200
                        });
                    }).catch(function(err) {
                        // 클립보드 복사 실패 시 에러 메시지 출력
                        console.error('클립보드 복사 실패: ', err);
                    });
                }
            </script>
            <img src="이미지 주소 넣어주세요" alt="URL 복사하기" rel="nofollow" style="cursor: pointer;" onclick="copyUrl();" onmouseover="this.style.cursor='pointer';">
        </li>

위에서 복사했던 개인 이미지 주소를 붉은 색 부분에 넣어주세요

<!-- 트위터 공유 버튼 -->  
<li>
<A onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20'&#13;&#10;+encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog',&#13;&#10; 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" href="#" target=_blank alt="Share on Twitter"><IMG src="이미지 주소 넣어주세요" alt="트위터 공유하기" rel="nofollow"></A>
</li>
이 위치에 상단의 URL 버튼 코드를 추가해주세요
</ul>

이 코드가 들어가는 위치는 기존 글 의 전체 SNS 공유 코드 기준으로 가장 하단의 트위터 코드의 </li>가 끝나는 지점 아래에 추가해주시면 됩니다. 원하시는 자리가 있으면 그곳에 추가하셔도 됩니다.

다 하셨으면 저장하시면 마무리 됩니다. CSS는 지난 글에서 이미 크기지정을 했기 때문에 기존글을 참조해 주세요.

노출 확인

티스토리 게시글로 오시면 반영이 잘 되었는지 확인해 봅니다.

Monosnap 글을 쓰기 시작했습니다 2024 02 07 12 22 53

잘 반영은 됐고 한 번 버튼을 눌러봅니다.

페이지 URL이 복사되었습니다.

페이지 URL복사 화면

네 잘 작동을 하네요.

URL 복사하기 버튼 추가(B형태)

두번째 방법은 외부의 이미지가 아닌 기본적인 브라우저의 기능을 활용한 방법입니다.

샘플로 이 글을 들어가서 확인해주세요.

URL 버튼을 누르면 아래와 같은 알림창이 뜹니다.

노출확인 2

확인 버튼을 누르면 팝업창이 사라집니다.

HTML 코드

적용 방식은 위와 모든 동일한 방식으로 진행되고 해당 코드만 변경하시면 됩니다.

<!-- URL 복사 버튼 -->
<li>
    <script>
        function copyPageURL() {
            // 현재 페이지의 URL을 가져옵니다.
            let currentPageUrl = window.location.href;

            // 클립보드에 현재 페이지의 URL을 복사합니다.
            navigator.clipboard.writeText(currentPageUrl).then(function() {
                alert("페이지 URL이 복사되었습니다.");
            }).catch(function(err) {
                console.error('클립보드 복사 실패: ', err);
            });
        }
    </script>
    <img src="이미지 주소 넣어주세요" alt="URL 복사하기" rel="nofollow" style="cursor: pointer;" onclick="copyPageURL();" onmouseover="this.style.cursor='pointer';">
</li>

마무리

이번 글에서는 아주 간단하지만 유용하게 쓰이는 페이지 URL 링크 주소 공유버튼을 티스토리에 추가하는 방법에 대해 알려드렸습니다. 도움이 되셨다면 이 사이트를 여기저기 홍보해 주신다면 감사드리겠습니다~

다른글 보기