공유하기 버튼

공유하기 버튼을 사용하면 사용자가 타임라인이나 그룹에 게시물을 공유하기 전에 링크에 직접 작성한 메시지를 추가하거나 Facebook 메시지를 통해 친구에게 추가할 수 있습니다.

iOS나 Android 네이티브 앱에는 네이티브 iOS용 공유 대화 상자와 Android용 공유 대화 상자를 사용하는 것이 좋습니다.

웹사이트에 공유 대화 상자를 열기 위한 버튼이 필요하지 않거나 Facebook 제공 버튼이 웹사이트 디자인에 맞지 않으면 웹용 공유 대화 상자를 통해 링크를 공유할 수 있습니다. 이 플러그인을 사용하려고 앱 검수를 통해 추가 권한을 요청하거나 Facebook 로그인을 구현하지 않아도 됩니다.

공유하기 버튼 구성 도구
코드 예시
설정
FAQ

단계별 안내

1. URL 또는 페이지 선택하기

공유할 Facebook 페이지나 웹사이트의 URL을 선택합니다.

2. 코드 구성 도구

코드 구성 도구에 URL을 붙여넣고 공유하기 버튼의 layout을 조정합니다. Get Code 버튼을 클릭하여 공유하기 버튼 코드를 생성합니다.

3. HTML 픽셀 코드 복사하여 붙여넣기

랜딩 페이지 웹사이트의 HTML에 픽셀 코드를 복사하여 붙여넣습니다.

공유하기 버튼 구성 도구

공유할 URL

레이아웃

button_count

버튼 크기

small

코드 받기

전체 코드 예시

코드 예를 복사하여 웹사이트에 붙여넣습니다. 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&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>

설정

설정	HTML5 속성	설명	기본값
`href`	`data-href`	공유할 페이지의 절대 URL입니다.	XFBML 및 HTML5 버전은 기본값으로 현재 URL이 됩니다.
`lazy`	`data-lazy`	`true`로 설정하면 `loading="lazy"` iframe 속성을 설정하여 브라우저의 지연 로딩 메커니즘을 사용합니다. 플러그인이 뷰포트에서 가깝지 않아서 전혀 보이지 않을 수 있을 경우 브라우저가 플러그인을 렌더링하지 않는 효과가 있습니다. `true` 또는 `false`(기본값)를 선택할 수 있습니다.	`false`
`layout`	`data-layout`	플러그인에 사용 가능한 여러 다른 레이아웃 중 하나를 선택합니다. `box_count`, `button_count`, `button` 중 하나이면 됩니다.	`icon_link`
~~`mobile_iframe`~~ 사용 중단	~~`data-mobile_iframe`~~	`true`로 설정된 경우, 공유하기 버튼을 클릭하면 공유 대화 상자가 팝업 대신 모바일용 웹사이트 상단의 iframe 형태로 열립니다. 이 옵션은 모바일 전용이며, 데스크톱에서는 사용할 수 없습니다. 자세한 내용은 모바일 웹 공유 대화 상자를 참조하세요.	~~`false`~~
`size`	`data-size`	버튼은 `large`와 `small`의 두 가지 크기로 제공됩니다.	`small`