Vue

SNS 링크 연결하기

---

페이스북 연결

1. index.html에 스크립트 추가
   메타태그에 이미지, 타이틀 이름, 사이트 이름 등을 적어야 공유할 때 이미지랑 타이틀도 링크와 함께 공유된다.

<meta property="og:image" content="/image/meta/metaimg_메인공유.png">
<meta property="og:description" content="설명란~~~~">
<meta property="og:site_name" content="사이트 이름">
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v12.0" nonce="e16MXXou"></script>

2. method에 함수 선언
   제일 밑줄은 팝업형태로 나타내기 위해 작성

<img src="/image/facebook.svg" @click="facebookLink"/>

methods: {
    facebookLink() {
      window.open(
        "https://www.facebook.com/sharer/sharer.php?u=https://사이트이름.com&src=sdkpreparse",
        "pop01",
        "top=10, left=10, width=460, height=600, status=no, menubar=no, toolbar=no, resizable=no"
      );
    },
}

카카오톡 연결

key 받는 방법 참조

1. index.html에 스크립트 추가 + 카카오는 key를 부여 받아야 함

    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script> <script>window.Kakao.init('카카오에서 받은 key 입력');</script>

2. method에 함수 선언

<img src="/image/kakao.svg" @click="kakaoLink" />

    kakaoLink() {
      window.Kakao.Link.sendDefault({
        objectType: "feed",
        content: {
          title: "타이틀 이름 ",
          description: "설명란~~블라블라블라브라",
          imageUrl:
            "https://www.abc.com/img/이미지~~",
          imageWidth: 800,
          imageHeight: 400,
          link: {
            mobileWebUrl: "https://www.abcddd.com",
            webUrl: "https://www.abcddd.com",
          },
        },
        buttons: [
          {
            title: "테스트 하기",
            link: {
              mobileWebUrl: "https://www.abcddd.com",
              webUrl: "https://www.abcddd.com",
            },
          },
        ],
      });
    },

트위터 연결

1. method에 함수 선언

<a class="twitter-share-button" @click="twitterLink">
  <img src="/image/twitter.svg" />
</a>

  methods: {
    twitterLink() {
      let sendUrl = "https://naver.com";
      window.open(`https://twitter.com/intent/tweet?&url=${sendUrl}`);
    },
 }

회고

FE 팀 미니 프로젝트를 끝냈다. 마음의 여유가 없었고, 내 욕심이 지나쳤다. 동시에 두가지 프로젝트를 하려고 하니 하나도 제대로 못 해냈다. 차근차근 하나씩 하는 연습도 해야할 것 같다. 조급하게 생각하지 말고 천천히..꾸준하게 나아가는 연습을 해야겠다.