웹용 좋아요 버튼

유럽 지역의 소셜 플러그인 변경 사항

유럽 지역에서 Facebook 제품 사용자에게 표시되는 업데이트된 쿠키 동의 프롬프트로 인해 소셜 플러그인에 다소 변화가 생길 수 있습니다. 유럽 지역 사용자의 경우 더 이상 '좋아요'와 '댓글' 소셜 플러그인이 지원되지 않습니다. 단, 1) Facebook 계정에 로그인되어 있고 2) '앱과 웹사이트 쿠키' 제어에 동의한 경우는 예외입니다. 두 가지 요구 사항을 모두 충족하는 사용자는 '좋아요' 또는 '댓글' 버튼 등의 플러그인을 보고 상호작용할 수 있습니다. 위의 두 가지 요구 사항 중 하나라도 충족하지 않는 경우 사용자는 더 이상 플러그인을 볼 수 없습니다.

유럽 지역은 다음과 같은 특정 국가들로 구성됩니다.

유럽연합(EU): 오스트리아, 벨기에, 불가리아, 크로아티아, 키프로스 공화국, 체코 공화국, 덴마크, 에스토니아, 핀란드, 프랑스, 독일, 그리스, 헝가리, 아일랜드, 이탈리아, 라트비아, 리투아니아, 룩셈부르크, 몰타, 네덜란드, 폴란드, 포르투갈, 루마니아, 슬로바키아, 슬로베니아, 스페인, 스웨덴
유럽연합 회원이 아니지만 EEA 단독/EFTA 또는 관세 동맹 회원국: [EEA 단독/EFTA] 아이슬란드, 리히텐슈타인, 노르웨이, 스위스. [EU 관세 동맹] 모든 채널 제도, 맨 섬, 모나코. 키프로스의 영국 주권 영토. [유럽 관세 동맹] 안도라, 산마리노, 바티칸 시국
유럽연합 회원이 아니지만 유럽 최외곽 지역(OMR): 마르티니크, 마요트, 과들루프 섬, 프랑스령 기아나, 레위니옹, 생 마르탱, 마데이라, 아조레스, 카나리아 제도
영국(모든 영국 제도)

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

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

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

좋아요 버튼 구성 도구

좋아요를 누를 URL

Width

레이아웃

standard

액션 유형

버튼 크기

small

공유하기 버튼 포함

코드 받기

오픈 그래프 메타 태그를 사용하여 링크 미리 보기를 수정하세요. 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}" 
        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`	버튼은 두 가지 크기(즉 `large`와 `small`(기본값))로 제공됩니다.
`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} />";

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