웹용 좋아요 버튼

좋아요 버튼을 한 번 클릭하면 웹에 게시된 콘텐츠를 '좋아요'로 표시하여 Facebook에 게시물이 공유됩니다. 좋아요 버튼 옆에는 공유하기 버튼도 함께 표시되므로 직접 메시지를 작성하여 추가하거나 공유하는 사람을 맞춤 설정할 수 있습니다.

좋아요 버튼 구성 도구 코드 예시 설정 언어 조정 FAQ

단계별 안내

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

좋아요 버튼을 사용할 Facebook 페이지 또는 웹사이트의 URL을 선택합니다.

2. 코드 구성 도구

코드 구성 도구에 URL을 붙여넣고 좋아요 버튼의 width와 같은 설정을 조정합니다. Get Code 버튼을 클릭하여 좋아요 버튼 코드를 생성합니다.

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

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

4. 필요한 경우 중복 삭제

이미 앱 이벤트 로깅을 활성화하기 위한 코드가 있다면 붙여넣은 코드에서 autoLogAppEvents=1 문을 삭제하여 중복 로깅을 방지하세요.

좋아요 버튼 구성 도구

좋아요를 누를 URL

Width

레이아웃

standard

액션 유형

버튼 크기

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 async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"></script>

  <!-- Your like button code -->
  <div class="fb-like" 
    data-href="https://www.your-domain.com/your-page.html" 
    data-layout="standard" 
    data-action="like">
  </div>

</body>
</html>

링크 미리 보기 맞춤 설정

설정

위의 설정 외에도 다음을 변경할 수 있습니다.

설정	HTML5 속성	설명	기본값
`action`	`data-action`	버튼에 표시할 동사로, `like` 또는 `recommend`일 수 있습니다.	`like`
`colorscheme`	`data-colorscheme`	플러그인이 버튼 외부에 있는 텍스트에 사용하는 색구성으로, `light` 또는 `dark`일 수 있습니다.	`light`
`href`	`data-href`	좋아요를 클릭할 페이지의 절대 URL입니다.	현재 URL
`kid_directed_site`	`data-kid-directed-site`	웹사이트나 온라인 서비스 또는 서비스의 일부가 만 14세 미만의 어린이에게 제공되는 경우 이 설정을 활성화해야 합니다.	`false`
`layout`	`data-layout`	플러그인에 사용 가능한 여러 다른 레이아웃 중 하나를 선택합니다. `standard`, `button_count`, `button`, `box_count` 중 하나일 수 있습니다. 자세한 내용은 FAQ를 참조하세요.	`standard`
`ref`	`data-ref`	50자 미만이어야 하며 영숫자와 일부 구두점(현재 +/=-.:_)을 포함할 수 있는 추적 리퍼럴 레이블입니다. 자세한 내용은 FAQ를 참조하세요.	없음
`share`	`data-share`	좋아요 버튼 옆에 공유하기 버튼을 배치할지 지정합니다. 이 기능은 XFBML 버전에서만 사용할 수 있습니다.	`false`
`size`	`data-size`	버튼은 `large`와 `small`의 두 가지 크기로 제공됩니다.	`small`
`width`	`data-width`	최소 및 기본 너비에 따라 달라지는 플러그인의 너비입니다(표준 레이아웃에만 해당). 자세한 내용은 아래 레이아웃 설정을 참조하세요.	레이아웃 설정에서 `standard`를 참조하세요.

레이아웃 설정

옵션은 다음과 같습니다.

레이아웃	기본 크기
`standard`	최소 너비: 225픽셀. 기본 너비: 450픽셀. 높이: 35픽셀(사진 제외) 또는 80픽셀(사진 포함).
`box_count`	최소 너비: 55픽셀. 기본 너비: 55픽셀. 높이: 65픽셀.
`button_count`	최소 너비: 90픽셀. 기본 너비: 90픽셀. 높이: 20픽셀.
`button`	최소 너비: 47픽셀. 기본 너비: 47픽셀. 높이: 20픽셀.

언어 변경

Facebook JavaScript SDK의 현지화된 버전을 읽어들여 좋아요 버튼의 언어를 변경할 수 있습니다. SDK를 읽어들일 때 개발자의 언어를 사용하도록 js.src 값을 변경합니다. en_US는 개발자의 언어로 대체합니다. 예를 들면 프랑스 개발자는 fr_FR(프랑스어)로 변경합니다.

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v7.0";

다른 언어에서도 사용할 수 있도록 소셜 플러그인의 너비를 조정해야 할 수도 있습니다. 자세한 정보는 현지화 및 번역 페이지에서 확인할 수 있습니다.