반응형
페이스북 공유하기 버튼 만들기
페이스북에 공유하는 방법은 여러가지가 있죠.
현재 페이지를 공유하느냐?
아니면 현재 링크를 공유하느냐?
이번에 소개드릴 방법은 페이스북 링크를 공유하는 방법입니다.
생각보다 방법은 간단합니다. (아래 메일 참조)
https://developers.facebook.com/docs/plugins/share-button?locale=ko_KR
공유하기 버튼 - 소셜 플러그인 - 문서 - Facebook for Developers
전체 코드 예시 코드 예를 복사하여 웹사이트에 붙여넣습니다. data-href 값을 웹사이트 URL로 조정합니다. 다음으로 og:*** 메타 태그를 사용하여 링크 미리 보기를 조정합니다. og:url과 data-href가 같
developers.facebook.com
1. 홈페이지에 Meta tag를 입력
-> meta property 값들을 입력해줍니다.
-> meta테그는 링크를 공유할 때 미리보기 화면 같은 것이라 보면 됩니다.
-> 이곳에 반드시 맞춰야 되는 부분은 og:url 부분입니다.
-> 여기에 들어가는 주소와 하단에 공유 주소가 매칭되어야합니다.
2. <div> 태그 안에 data-href = 주소값을 현재 주소로 맞춰 주셔야 됩니다.
그렇게 하지 않으면 페이스북에서 거절한 도메인이라는 거절 메세지가 나올 것입니다.
<html>
<head>
<title>Your Website Title</title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="https://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your share button code -->
<div class="fb-share-button"
data-href="https://www.your-domain.com/your-page.html"
data-layout="button_count">
</div>
</body>
</html>
그럼 즐코딩하세요^^
반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
| code: 'ERR_OSSL_EVP_UNSUPPORTED' 에러 해결방법 Node버전 변경 (2) | 2023.04.20 |
|---|---|
| React Google analytics 등록하는 법 React-ga (0) | 2023.04.05 |
| React-Native 앱 아이콘 초간단 만들기 방법 (0) | 2021.07.21 |
| react-native 앱 아이콘 변경하기 (0) | 2021.06.01 |
| Javascript 페이지간 데이터 전달하기 (2) | 2021.04.09 |
