페이스북 공유 + 현재 링크 복사

간단한 심리 검사 프로그램을 만들고 싶어서 구상하다보니, 요즘은 공유 버튼으로 간단하게 결과를 공유하는 경우가 많더라. 그래서 알아보기로 했다. 먼저 페이스북에 공유하는 방법과 현재 링크를 복사하는 방법을 기록하고자 한다.

+카카오톡 공유도 알아보고 있는데 일단 개발자 가입을 하고 복잡하길래 알아놓은 것 부터 작성한다..

코드부터 보고가자

아래 코드 중 페이스북 스크립트에서 전달할 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 라고도 접근이 가능

4. textarea.value = url : html 값을 위에서 생성한 textarea 에 넣기
5. document.execCommand("copy")
   : 원래 모습 document.execCommand(commandName, showDefaultUI, value)
   : commandName - 실행할 명령어
   showDefaultUI - 기본 UI를 보여줄 것인가 결정
   value - 명령에 따라 수치가 필요한 경우 사용
   : 여기서는 주소를 복사할 거니까 copy 명령어 적기
6. document.body.removeChild 위에 생성해 줬던 textarea 요소를 삭제해준다
7. 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%;}