웹용 좋아요 버튼

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

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

단계별 안내

1. URL 또는 페이지 선택

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

2. 코드 구성 도구

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

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

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

좋아요 버튼 구성 도구

좋아요를 누를 URL
Width
레이아웃
액션 유형
버튼 크기

전체 코드 예제

코드 예를 복사하여 웹사이트에 붙여넣습니다. 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="http://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="http://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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your like button code -->
  <div class="fb-like" 
    data-href="http://www.your-domain.com/your-page.html" 
    data-layout="standard" 
    data-action="like" 
    data-show-faces="true">
  </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

show_faces

data-show-faces

버튼 아래 프로필 사진을 표시할지 지정합니다(표준 레이아웃만 해당). 어린이 대상 사이트에서는 이 기능을 사용해서는 안 됩니다.

false

size

data-size

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

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 = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.10"; 

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