간단한 심리 검사 프로그램을 만들고 싶어서 구상하다보니, 요즘은 공유 버튼으로 간단하게 결과를 공유하는 경우가 많더라. 그래서 알아보기로 했다. 먼저 페이스북에 공유하는 방법과 현재 링크를 복사하는 방법을 기록하고자 한다.
+카카오톡 공유도 알아보고 있는데 일단 개발자 가입을 하고 복잡하길래 알아놓은 것 부터 작성한다..
코드부터 보고가자
아래 코드 중 페이스북 스크립트에서 전달할 URL만 변경해주고 그대로 사용하면 된다.
<!-- facebook -->
<script>
function shareFacebook() {
// 전달할 URL
var sendUrl = "https://";
// 페이스북 열어서 전달 URL 넣기
window.open("http://www.facebook.com/sharer/sharer.php?u=" + sendUrl);
}
</script>
<!-- 링크 공유 Script -->
<script>
function clip() {
var url = '';
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
url = window.document.location.href;
textarea.value = url;
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
alert("URL이 복사되었습니다.")
}
</script>코드를 이해하고 싶다
사실 코드 자체는 검색하면 많이 나온다. 어떤식으로 작동하는 지 이해한 대로 기록해야징
페이스북 공유
<!-- facebook -->
<script>
function shareFacebook() {
// 전달할 URL
var sendUrl = "https://";
// 페이스북 열어서 전달 URL 넣기
window.open("http://www.facebook.com/sharer/sharer.php?u="
+ sendUrl);
}
</script>사실 페이스북 공유는 매우 간단하다고 생각
http://www.facebook.com/sharer/sharer.php?u=
저 파라미터 u 뒤에 공유할 url이 들어가는 방식이다. 공유할 url은 바로 위에 var sendUrl = "https://-" 의 형태로 지정해줬고, 이 링크가 공유된다고 생각하면 된다!
예를 들어 내 벨로그를 공유한다면 var sendUrl="https://velog.io/@cyhse7" 으로 해놓으면 되는 것. 활용한다면 정해진 링크 말고 그냥 현재 링크를 보내는 것도 가능할 거 같다.
현재 링크 복사
<!-- 링크 공유 Script -->
<script>
function clip() {
var url = '';
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
url = window.document.location.href;
textarea.value = url;
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
alert("URL이 복사되었습니다.")
}
</script>사실 현재 링크를 공유하는 스크립트가 아니라 단순히 복사하는 스크립트다.
1. var url='';으로 빈 변수를 하나 만들어 놓는다.
2. var textarea라는 변수에 텍스크에어리어 요소 생성해주기
3. window.document.location.href : url 변수에 현재 링크 담아주기
window.location.href
: location 객체의 href 속성값(현재 페이지의 전체 URL)을 담고 있다 한다. 보통 window 객체명은 생략할 수 있기 때문에 그냥location.href라고만 쓰기도 한다고.document
: 윈도우 객체의 속성중 하나라 한다. 따라서 정확히 사용하려면 window.document 라고 접근해야하지만 위에서 말한것 처럼 window는 생략이 가능하기에 그냥 document 라고도 접근이 가능
textarea.value = url: html 값을 위에서 생성한 textarea 에 넣기document.execCommand("copy")
: 원래 모습document.execCommand(commandName, showDefaultUI, value)
: commandName - 실행할 명령어
showDefaultUI - 기본 UI를 보여줄 것인가 결정
value - 명령에 따라 수치가 필요한 경우 사용
: 여기서는 주소를 복사할 거니까 copy 명령어 적기document.body.removeChild위에 생성해 줬던 textarea 요소를 삭제해준다alert()알림창 띄우기. 사용자에게 클릭이 제대로 되었다는 걸 알려주는 요소이다. 안해도 상관 없는데 없으면 사용자 입장에서는 복사가 된건지 안된건지 헷갈리니까 적어주기.
스크립트 사용하기
코드 보기
// 메인
// 적용 css 연결
<link rel="stylesheet" href="./css/main.css">
........
// 본문
<div class="sns-go">
<!-- 페이스북 공유 -->
<li>
<a href="#" onclick="javascript:shareFacebook();" target="_blank" alt="Share on Facebook"><img
src="./img/sns_face.png" width="70" alt="페이스북 공유하기"></a>
</li>
<!-- 링크 복사-->
<li>
<a href="#" onclick="clip(); return false;" alt="Share"><img src="./img/링크 복사.png" width="70"
alt="링크 복사하기"></a>
</li>
</div>
// 연결한 main.css 에서 sns-go 부분
.sns-go {text-align:center; padding: 20px 0;}
.sns-go li {display:inline-block; margin: 0 5px; }
.sns-go li img {border-radius:50%;}