저장 버튼

저장 버튼을 사용하면 항목이나 서비스를 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

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

현재 링크/주소

제품용 저장 버튼

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

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, 2가지 정보를 사용해야 합니다.

  1. 비즈니스 관리자에서 비즈니스에 로그인합니다.
  2. "비즈니스 설정" > "제품 카탈로그"로 이동합니다.
  3. 플러그인에 사용할 제품 카탈로그를 클릭합니다.
  4. 제품 카탈로그 이름의 제목 아래 있는 제품 카탈로그 ID를 적어둡니다. 이 예에서는 768856339915012입니다.
  5. 또 다른 필요한 정보는 제품 피드에 업로드된 항목 ID입니다. 제품 피드의 예를 보려면 제품 카탈로그 ID를 클릭하세요.
  6. 다음 페이지의 상단에 있는 제품 피드를 클릭합니다.
  7. 사용할 항목이 포함된 피드를 클릭합니다.
  8. 다음 페이지에 피드의 항목 샘플이 표시됩니다. 플러그인에서 제품을 식별하기 위해서는 제품 ID에 각 제품에 대한 항목 ID가 있어야 합니다.
  9. 플러그인에 대한 URI는 product://<catalog_id >/{retailer_id}의 패턴을 따릅니다. 따라서, 위의 예에서 Product #45 제품에 대한 URI는 다음과 같은 모습입니다. product://768856339915012/45(여기서 제품의 카탈로그 ID는 5단계에서 가져온 것입니다).

그래프 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 파일에서 참조하세요.

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