공유하기 버튼

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

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

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

단계별 안내

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

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

2. 코드 구성 도구에서 코드 생성하기

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

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

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

공유하기 버튼 구성 도구

공유할 URL
레이아웃
버튼 크기

전체 코드 예시

코드 예를 복사하여 웹사이트에 붙여넣습니다. data-href 값을 웹사이트 URL로 조정합니다. 다음으로 og:*** 메타 태그를 사용하여 링크 미리 보기를 조정합니다. og:urldata-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

버튼은 largesmall의 두 가지 크기로 제공됩니다.

small