티스토리에 소셜 공유 버튼과 URL 복사 버튼 추가하기

이 티스토리 블로그에서는 한동안 스피드스타라는 스킨을 사용하다 어제 오디세이(Odyssey)라는 기본 스킨 중 하나로 변경했습니다. 오디세이 스킨이 깔끔하고 좋은 것 같지만 소셜 공유 버튼 기능이 없네요. 소셜 공유 버튼과 URL 복사 버튼을 워드프레스 사이트에 사용하는 코드를 응용하여 추가했습니다.

티스토리에 소셜 공유 버튼과 URL 복사 버튼 추가하기

네이버, 페이스북, 트위터 SNS 공유 버튼과 현재 페이지 URL을 복사하는 URL 복사 버튼을 추가했습니다. 기본적으로 다음 글에서 제시된 코드를 사용했습니다.

이 워드프레스 블로그에 사용된 SNS 공유 버튼 & URL 복사 버튼 - 워드프레스 정보꾸러미

세 가지 코드가 필요합니다.

HTML 코드와 CSS 코드는 위의 글에 제시된 코드를 그대로 사용하시면 됩니다. 네이버, 페이스북, 트위터, URL 복사 아이콘은 svg 포맷을 사용했기 때문에 추가적으로 아이콘을 업로드하지 않아도 됩니다.

URL을 복사하는 기능은 자바스크립트(JavaScript)를 사용했습니다. 자바스크립트 코드는 워드프레스 사이트에 사용된 것과는 조금 다릅니다.

티스토리에서는 다음 JS 코드를 사용할 수 있습니다. (아래 코드는 워드프레스에서도 사용할 수 있지만, 한글 인코딩 때문에 URL에서 한글 부분은 깨져 보여 지저분할 수 있으므로 워드프레스 사이트의 경우 상기 글에 제시된 코드를 사용하면 URL이 깔끔하게 표시됩니다.)

<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // Social Share Links
    document.querySelector('.sns-go').addEventListener('click', function(e) {
        e.preventDefault();

        var shareLink = e.target.closest('.js-social-share');
        
        if (shareLink) {
            var shareUrl = shareLink.getAttribute('data-url') + encodeURIComponent(window.location.href),
                shareTitle = shareLink.getAttribute('data-title') + encodeURIComponent(document.title);

            window.open(shareUrl + '&title=' + shareTitle, 'shareWindow', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
        }
    });

    // Copy to Clipboard Button
    document.querySelector('.js-copy-btn').addEventListener('click', function() {
        copyURL(this);
    });

    function copyURL(element) {
        let url = window.location.href;
        navigator.clipboard.writeText(url).then(() => {
            element.insertAdjacentHTML('afterend', '<div class="linktooltips-container">URL이 복사되었습니다!</div>');
            setTimeout(() => { 
                document.querySelectorAll('.linktooltips-container').forEach(el => el.remove()); 
            }, 3000);
        }).catch(error => {
            console.error('Copy failed', error);
            alert('URL 복사에 실패했습니다.');
        });
    }
});
</script>

HTML 코드와 자스 코드는 꾸미기 » 스킨 편집으로 이동하여 html 편집 버튼을 클릭하고 HTML 탭에 추가하도록 합니다. [**</body>**] 태그 바로 위에 HTML 코드와 자바스크립트 코드를 입력하면 됩니다.

CSS 코드는 CSS 탭에 추가하도록 합니다.

코드를 추가한 후에 잘 작동하는지 테스트해 보시기 바랍니다. 스킨 편집 작업에 익숙하지 않은 경우 스킨을 백업한 후에 진행하는 것이 좋습니다.

소셜 공유 버튼과 URL 복사 버튼이 티스토리 블로그(오디세이 스킨)에서 잘 작동하네요. 다른 스킨에서도 문제없이 작동할 것입니다. 만약 URL 복사 기능이 자바스크립트 충돌로 작동하지 않는다면 URL 복사 기능만 제거하고 사용하는 것도 가능합니다.

참고

https://avada.tistory.com/3199

티스토리 스킨을 오디세이(Odyssey)로 변경했습니다

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/2335

워드프레스 GeneratePress 테마 라이선스 (+요금제)