이번 글에서는 지난번에 적었던 SNS버튼 추가하기 글에서 하나 더 아이콘을 추가하는 글입니다. 바로 URL 복사하기 버튼인데요. 현재 읽고 있는 글을 쉽게 공유하게 하기 위해서 글 주소를 복사하게 하는 버튼입니다. 대부분의 모바일에서는 자동으로 글 주소를 복사하는 기능이 있는데 웹에서 쉽게 공유할 용도라고 보시면 됩니다. SNS버튼 노출은 A, B 형태 두가지 방법으로 알려드릴 예정입니다. 아래글을 참조해 주세요
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' +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', '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는 지난 글에서 이미 크기지정을 했기 때문에 기존글을 참조해 주세요.
노출 확인
티스토리 게시글로 오시면 반영이 잘 되었는지 확인해 봅니다.
잘 반영은 됐고 한 번 버튼을 눌러봅니다.
페이지 URL복사 화면
네 잘 작동을 하네요.
URL 복사하기 버튼 추가(B형태)
두번째 방법은 외부의 이미지가 아닌 기본적인 브라우저의 기능을 활용한 방법입니다.
샘플로 이 글을 들어가서 확인해주세요.
URL 버튼을 누르면 아래와 같은 알림창이 뜹니다.
확인 버튼을 누르면 팝업창이 사라집니다.
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 링크 주소 공유버튼을 티스토리에 추가하는 방법에 대해 알려드렸습니다. 도움이 되셨다면 이 사이트를 여기저기 홍보해 주신다면 감사드리겠습니다~