https://developers.facebook.com/docs/plugins/share-button?locale=ko_KR
공유하기 버튼
공유하기 버튼을 사용하면 사용자가 타임라인이나 그룹에 게시물을 공유하기 전에 링크에 직접 작성한 메시지를 추가하거나 Facebook 메시지를 통해 친구에게 추가할 수 있습니다.
iOS나 Android 네이티브 앱에는 네이티브 iOS용 공유 대화 상자와 Android용 공유 대화 상자를 사용하는 것이 좋습니다.
웹사이트에 공유 대화 상자를 열기 위한 버튼이 필요하지 않거나 Facebook 제공 버튼이 웹사이트 디자인에 맞지 않으면 웹용 공유 대화 상자를 통해 링크를 공유할 수 있습니다. 이 플러그인을 사용하려고 앱 검수를 통해 추가 권한을 요청하거나 Facebook 로그인을 구현하지 않아도 됩니다.
단계별 안내
1. URL 또는 페이지 선택하기
공유할 Facebook 페이지나 웹사이트의 URL을 선택합니다.
2. 코드 구성 도구에서 코드 생성하기
코드 구성 도구에 URL을 붙여넣고 공유하기 버튼의 layout을 조정합니다. Get Code 버튼을 클릭하여 공유하기 버튼 코드를 생성합니다.
3. HTML 픽셀 코드 복사하여 붙여넣기
랜딩 페이지 웹사이트의 HTML에 픽셀 코드를 복사하여 붙여넣습니다.
전체 코드 예시
코드 예를 복사하여 웹사이트에 붙여넣습니다. data-href 값을 웹사이트 URL로 조정합니다. 다음으로 og:*** 메타 태그를 사용하여 링크 미리 보기를 조정합니다. og:url 및 data-href에서 같은 URL을 사용해야 합니다.
<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";
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>설정
| 설정 | HTML5 속성 | 설명 | 기본값 |
|---|
href
| data-href
| 공유할 페이지의 절대 URL입니다. | XFBML 및 HTML5 버전은 기본값으로 현재 URL이 됩니다. |
layout
| data-layout
| 플러그인에 사용 가능한 여러 다른 레이아웃 중 하나를 선택합니다. box_count, button_count, button 중 하나일 수 있습니다. | icon_link
|
mobile_iframe
| data-mobile_iframe
| true로 설정되면 공유하기 버튼이 모바일용 웹사이트의 iframe(팝업 대신)에 공유 대화 상자를 엽니다. 모바일 전용 옵션입니다. 자세한 내용은 모바일 웹 공유 대화 상자를 참조하세요.
| false
|
size
| data-size
| 버튼은 large 및 small의 두 가지 크기로 제공됩니다. | small
|
