소셜 플러그인

저장 버튼

저장 버튼 플러그인이 사용 중단되었습니다. 이 플러그인은 2022년 9월 15일까지 작동하고 이에 액세스할 수 있습니다. 그 시점 이후로는 해당 플러그인 사용이 중단되며 더 이상 작동하지 않습니다.

저장 버튼을 사용하면 항목이나 서비스를 Facebook의 비공개 리스트에 저장하고 친구들과 공유하고 관련 알림을 받을 수 있습니다. 예를 들어 사용자는 옷, 여행 또는 현재 관심이 있는 링크를 저장하여 나중에 구매하기 위해 해당 리스트를 다시 확인하거나 해당 옷 또는 여행과 관련된 프로모션이 있을 때 알림을 받을 수 있습니다.

저장 버튼 구성 도구코드 예시설정

단계별 안내

1. 웹사이트 링크 선택

저장 버튼을 사용할 웹사이트 링크를 선택합니다.

2. 코드 구성 도구

코드 구성 도구에 링크를 붙여넣고 '코드 가져오기' 버튼을 클릭하여 저장 버튼 코드를 생성합니다.

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

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

저장 버튼 구성 도구

저장할 웹사이트 또는 제품 링크
버튼 크기
코드 받기

전체 코드 예시

코드 예시를 복사하여 웹사이트에 붙여넣습니다. 웹사이트 링크에 맞게 data-uri 값을 조정합니다. 그런 다음 <title> 태그를 사용하여 '저장된' 제목을 조정합니다.

<html>
<head>
  <title>Your Website Title</title> 
</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&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your save button code -->
  <div class="fb-save" 
    data-uri="http://www.your-domain.com/your-page.html">
  </div>

</body>
</html>
직접 사용해보세요!

설정

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

설정 HTML5 속성 설명 기본값

uri

data-uri

저장할 페이지의 절대 링크입니다.

현재 링크/주소

lazy

data-lazy

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

false

제품의 저장 버튼

제품에도 저장 버튼을 사용할 수 있습니다.

1. 제품 카탈로그 설정

제품에 저장 버튼을 사용하려면 먼저 제품 카탈로그를 설정해야 합니다.

제품 카탈로그는 때로 제품 피드라고도 불리며, Facebook에서 광고하고자 하는 제품 리스트입니다. 리스트의 각 제품에는 광고를 생성하는 데 사용될 수 있는 특정한 속성, 제품 ID, 이름, 설명, 랜딩 페이지 URL, 이미지 URL, 가용성 등이 포함되어 있습니다.

제품 카탈로그를 만드는 방법Facebook 다이내믹 제품 광고

2. Facebook API ID

앱 대시보드의 설정 탭으로 이동하여 플랫폼 '웹사이트'를 추가하고 웹사이트 도메인을 제공합니다.

3. JavaScript SDK 읽어들이기

아래 예시와 같이 앱 ID를 사용하여 JavaScript SDK를 읽어들입니다. {your-app-id}를 앱 ID로 바꿉니다.

<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&version=v2.6&appId={your-app-id}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

4. 제품 URI 가져오기

비즈니스 관리자 사용

제품에 저장 버튼을 사용하는 데 필요한 정보는 제품 카탈로그 ID와 제품 피드의 항목 ID, 이렇게 두 가지가 있습니다.

  1. 비즈니스 관리자에서 비즈니스에 로그인합니다.
  2. '비즈니스 설정' > '제품 카탈로그'로 이동합니다.
  3. 플러그인에 사용할 제품 카탈로그를 클릭합니다.
  4. 제품 카탈로그 이름의 제목에서 제품 카탈로그 ID를 메모합니다. 이 예시에서는 768856339915012입니다.
  5. 다른 필수 정보는 제품 피드에 업로드된 항목 ID입니다. 제품 피드의 예시를 확인하려면 제품 카탈로그 ID를 클릭합니다.
  6. 다음 페이지에서 상단의 제품 피드를 클릭합니다.
  7. 사용할 항목이 포함된 피드를 클릭합니다.
  8. 다음 페이지에 피드의 항목 샘플이 표시됩니다. 제품을 식별하는 플러그인의 경우 각 제품의 피드에 나와 있는 항목 ID가 필요합니다.
  9. 플러그인의 URI는 product://<catalog_id >/{retailer_id} 패턴을 따릅니다. 위의 예시에서 Product #45라는 제품의 URI를 만든다고 가정할 경우 product://768856339915012/45가 됩니다(여기서 제품 카탈로그 ID는 5단계에서 메모한 ID 사용).

그래프 API 사용

그래프 API로 제품 URI를 가져올 수 있습니다. 한 개 또는 여러 개의 제품을 읽어들일 때는 다음의 URL 형식을 작성합니다. <catalog_id>는 카탈로그 ID로, <retailer_id>는 제품의 판매점 ID로 바꿉니다.

product://<catalog_id>/<retailer_id>

자세한 내용은 제품 문서를 참조하세요.

5. 제품 URI

저장 버튼 코드에서 data-uri에 제품 URI를 사용합니다. 예를 들어 제품 URI가 product://949817451770475/143791832인 경우 코드는 다음과 같습니다.

<div class="fb-save" 
  data-uri="product://949817451770475/143791832">
</div>

저장됨 보기

모든 저장된 링크는 저장됨 보기에 추가됩니다. 저장됨 보기는 www.facebook.com/saved에서 확인하거나, 모바일 앱의 경우 더 보기 -> 저장됨으로 이동하여 확인할 수 있습니다.

예

저장된 링크

언어 변경

Facebook JavaScript SDK의 현지화된 버전을 읽어들여 저장 버튼의 언어를 변경할 수 있습니다. SDK를 읽어들일 때 개발자의 로캘을 사용하도록 js.src 값을 변경합니다. en_US를 자신의 로캘로 바꿉니다. 예를 들어 프랑스 개발자의 경우 fr_FR(프랑스어)로 변경합니다.

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.6";

지원 로캘은 Facebook 로캘 XML 파일에서 참조하세요.

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

관련 항목

소셜 플러그인 FAQ웹 마스터용으로 공유JavaScript용 Facebook SDK