웹용 좋아요 버튼

웹페이지를 방문하는 사용자가 좋아요 버튼을 클릭하면 앱 이벤트가 트리거되고 Facebook에 이 좋아요가 로깅됩니다.

맞춤 설정된 좋아요 버튼 가져오기

좋아요 버튼 구성 도구를 사용하여 웹페이지에 삽입할 좋아요 버튼 코드를 가져옵니다.

  1. 좋아요 버튼을 넣을 웹페이지의 URL 설정
  2. 맞춤 설정된 좋아요 버튼
  3. 버튼 미리 보기 확인
  4. 코드 가져오기를 클릭하고 코드를 복사해 웹페이지에 붙여넣기

좋아요 버튼 구성 도구

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

참고로 이미 앱 이벤트를 로깅하고 있다면 버튼 코드에서 autoLogAppEvents=1 문을 삭제하여 중복 로깅을 방지하세요.

오픈 그래프 메타 태그를 사용하여 링크 미리 보기를 수정하세요. og:url 태그와 data-ref 속성은 동일한 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={graph-api-version}
             &appId={your-facebook-app-id}
             &autoLogAppEvents=1" 
        nonce="FOKrbAYI">
  </script>

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

</body>
</html>

좋아요 버튼 HTML5 속성

HTML5 속성 설명

data-action

버튼에 표시할 동사로, like(기본값) 또는 recommend가 될 수 있습니다.

data-colorscheme

플러그인이 버튼 외부에 있는 텍스트에 사용하는 색구성으로, light(기본값) 또는 dark가 될 수 있습니다.

data-href

좋아요를 클릭할 웹페이지의 URL입니다.

data-kid-directed-site

웹사이트나 온라인 서비스 또는 서비스의 일부가 만 14세 미만의 어린이에게 제공되는 경우 true로 설정해야 합니다. 기본값은 false입니다.

data-layout

플러그인에 사용 가능한 여러 다른 레이아웃 중 하나를 선택합니다. standard(기본값), button_count, button 또는 box_count 중 하나이면 됩니다. 자세한 내용은 FAQ를 참조하세요.

data-lazy

true로 설정하면 loading="lazy" iframe 속성을 설정하여 브라우저의 지연 로딩 메커니즘을 사용합니다. 플러그인이 뷰포트에서 가깝지 않아서 전혀 보이지 않을 수 있을 경우 브라우저가 플러그인을 렌더링하지 않는 효과가 있습니다. true 또는 false(기본값)를 선택할 수 있습니다.

data-ref

50자 미만이어야 하며 영숫자와 일부 구두점(현재 +/=-.:_)을 포함할 수 있는 추적 리퍼럴 레이블입니다. 자세한 내용은 FAQ를 참조하세요.

data-share

좋아요 버튼 옆에 공유 버튼을 포함하려면 true로, 포함하지 않으려면 false(기본값)로 지정합니다. 이 기능은 XFBML 버전에서만 사용할 수 있습니다.

data-size

버튼은 두 가지 크기(largesmall(기본값))로 제공됩니다.

data-width

최소 및 기본 너비에 따라 달라지는 플러그인의 너비입니다(표준 레이아웃에만 해당). 자세한 내용은 레이아웃 설정 테이블을 참조하세요.

레이아웃 설정

레이아웃 설정은 선택 사항입니다.

레이아웃 기본 크기

standard

최소 너비: 225픽셀.
기본 너비: 450픽셀.
높이: 35픽셀(사진 제외) 또는 80픽셀(사진 포함).

box_count

최소 너비: 55픽셀.
기본 너비: 55픽셀.
높이: 65픽셀.

button_count

최소 너비: 90픽셀.
기본 너비: 90픽셀.
높이: 20픽셀.

button

최소 너비: 47픽셀.
기본 너비: 47픽셀.
높이: 20픽셀.

언어 변경

Facebook JavaScript SDK의 현지화된 버전을 읽어들여 좋아요 버튼의 언어를 변경할 수 있습니다. en_US를 자신의 언어로 변경하세요(예: fr_FR은 프랑스어(프랑스)로 변경).

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version={graph-api-version} />"; 

소셜 플러그인의 너비는 각 언어에 맞게 조정해야 할 수도 있습니다.