사이트에 저장 버튼을 만드세요.

도움말 및 문제해결 방법

"2016년 6월 이전에 공식 저장 버튼을 코드에 추가하면 2017년 10월 3일에 "Pin it"이 "저장"으로 업데이트 됩니다."

Pinterest에서 회원님의 사업체를 찾을 수 있도록 하는 가장 좋은 방법은 저장 버튼입니다. 저장 버튼을 사이트의 페이지에 추가하면 고객이 좋아하는 것을 Pinterest에 저장하여 더 많은 사람들이 찾을 수 있게 됩니다. 
 
Wordpress, Blogger, Tumblr, Wix, Squarespace를 이용하는 경우:
 
WordPress.com WordPress.com
Wordpress Pin It 버튼은 사용자의 사이트에서 추가 코드를 필요로 하지 않습니다. 기본 공유 옵션에서 Pin It 버튼을 활성화하면 모든 Wordpress 게시물에 Pin It 버튼을 추가할 수 있습니다.
  1. 사용자의 WordPress 대시보드로 이동하세요.
  2. 설정으로 이동한 다음 공유로 이동하세요.
  3. 공유 버튼 섹션에서 Pinterest 서비스를 사용 가능 서비스에서 사용 서비스로 끌어다 놓으세요.
  4. 기본 Pin It 버튼 이미지가 표시되게 하려면 버튼 스타일 드롭다운 메뉴를 공식 버튼으로 변경하세요.
  5. 페이지 하단의 변경 사항 저장을 클릭하세요.
WordPress.org WordPress.org

WordPress.org 플러그인 디렉토리에서 마우스 오버 Pin It 버튼 플러그인을 다운로드하세요.

Blogger Blogger
  1. 사용자의 Blogger 대시보드에서 레이아웃 섹션으로 이동하세요.
  2. 블로그 게시물 섹션에서 수정을 클릭하세요.
  3. 공유 버튼 표시로 스크롤해서 이미 체크되어 있지 않으면 해당 항목을 체크하세요.
  4. 필요하다면 항목 정렬 섹션에서 항목을 재정렬한 후 저장을 클릭하세요.
Tumblr Tumblr
먼저 자바스크립트 줄을 추가해야 합니다.
 
자바스크립트 줄을 추가하려면 다음을 실행하세요.
  1. Tumblr 대시보드에서 수정하고 싶은 블로그를 선택한 후 Customize를 클릭하세요.
  2. 맞춤 설정 창에서 [HTML 수정]을 클릭하세요.
  3. 코드 하단으로 스크롤하세요.
  4. 코드가 pinit.js를 포함하고 있는지 확인하세요. 포함하고 있다면 이제 다 끝났습니다!
  5. 포함하고 있지 않는 경우, 닫는 </body> 태그 바로 위에 다음 코드를 추가하세요. <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
 
마우스 오버 Pin It 버튼을 추가하려면 다음을 실행하세요.
  1. 위의 단계에 따라 자바스크립트 줄을 반드시 추가하세요.
  2. Tumblr 대시보드에서 수정하고 싶은 블로그를 선택한 후 Customize를 클릭하세요.
  3. 맞춤 설정 창에서 [HTML 수정]을 클릭하세요.
  4. 코드 하단으로 스크롤하세요.
  5. 위의 4단계로부터 “src=” 앞에 data-pin-hover="true"를 추가하세요. 새 줄은 다음과 같습니다.<script type="text/javascript" async data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
  6. Update Preview를 클릭하세요. 오른쪽에 있는 예시 이미지 위로 커서를 가져가면 Pin It 버튼이 나타날 것입니다. 만약 보이지 않는다면 4번으로 돌아가서 모든 것이 정확하게 입력되었는지 확인하세요.
  7. 저장을 클릭하세요.
Wix.com Wix.com
  1. 에디터 왼쪽의 추가 (+)를 클릭하세요.
  2. 소셜을 클릭하세요.
  3. 아래로 스크롤한 후 Pinterest Pin It을 클릭하세요.
  4. 페이지의 원하는 곳으로 Pin It 버튼을 끌어놓으세요.
  5. Pin It 버튼은 사용자가 선택하는 이미지와 설명을 기반으로 핀을 생성할 것입니다. 해당 핀은 Pin It을 클릭한 페이지로 이동하는 링크가 됩니다.
Squarespace Squarespace

Squarespace 사이트에 Pin It 버튼을 적용하는 방법을 이곳에서 확인하세요.

 
직접 버튼을 만들려면 먼저 어떤 종류의 저장 버튼을 추가할지 결정하세요. 다음의 3가지 종류 중에서 선택할 수 있습니다.
 
  • 이미지 마우스 오버(여기에서 보기): 페이지에 보이는 어떠한 이미지에나 마우스를 가져다 대면 저장 버튼이 나타납니다.
    Learn how to build it Learn how to build it
    1. 위젯 빌더로 이동하세요.
    2. 버튼 종류 섹션에서 이미지 마우스 오버를 선택하세요.
    3. 버튼의 크기와 모양을 맞춤 설정하세요.
    4. 샘플 이미지에 마우스를 가져가 버튼을 미리 보세요. Pin It 버튼을 클릭하여 어떤 식으로 작동하는지 볼 수도 있습니다.
    5. 버튼에 만족하면 코드 복사 섹션 아래에서 코드를 복사하세요.
    6. 사이트에서 버튼을 표시하려는 각 페이지의 닫는 </body> 태그 바로 위에 코드를 붙여넣으세요.
  • 모든 이미지  (여기에서 보기): 이 버튼을 클릭하면 사이트에 있는 어떠한 이미지도 저장할 수 있습니다. 이 버튼은 쉽게 만들 수 있습니다.
    Learn how to build it Learn how to build it
    1. 위젯 빌더로 이동하세요.
    2. 버튼 종류 섹션에서 아무 이미지를 선택하세요.
    3. 버튼의 크기, 모양, 언어 및 이미지를 맞춤 설정합니다. 
    4. 샘플 이미지에 마우스를 올려 놓고 버튼을 미리 봅니다. 저장 버튼을 클릭하여 어떤 식으로 작동하는지 볼 수도 있습니다.
    5. 버튼이 마음에 들면 페이지 오른쪽에 표시시되는 코드를 복사합니다.
    6. 사이트에서 버튼을 표시하려는 각 페이지의 <body> 태그와 </body> 태그 사이에 코드를 붙여넣으세요.
  • 하나의 이미지(여기에서 보기): 이 버튼은 페이지에 있는 하나의 이미지를 저장하는 버튼으로 보다 기술적인 코딩이 필요합니다.
    Learn how to build it Learn how to build it
    1. 위젯 빌더로 이동하세요.
    2. 버튼의 크기, 모양, 언어 또는 이미지를 맞춤 설정합니다. 
    3. 저장 버튼을 만들려는 이미지가 있는 웹페이지의 URL을 추가합니다(홈페이지 또는 사이트의 다른 페이지일 수 있음).
    4. 브라우저에서 새 창을 열고 회원님의 웹사이트로 이동하세요.
    5. 저장 버튼을 만들려는 이미지를 마우스 오른쪽 버튼으로 클릭합니다.
    6. 이미지 URL 복사를 선택하세요.
    7. 위젯 빌더로 돌아가 이미지 필드에 이미지 URL을 붙여넣으세요.
    8. 이미지에 대한 설명을 입력하세요.
    9. 버튼을 미리 보려면 만들기!를 클릭하세요.
    10. 버튼이 마음에 들면 페이지 오른쪽에 표시시되는 코드를 복사합니다.
    11. 사이트에서 버튼을 표시하려는 각 페이지의 <body> 태그와 </body> 태그 사이에 코드를 붙여넣으세요.

흔히 발생하는 문제

저장 버튼 카운터가 보이지 않거나 올바르지 않은 경우
Pin It 버튼을 클릭할 때 보드 선택창이 새 창에서 열리지 않는 경우
마우스 오버 버튼이 작동하지 않습니다.
Pinterest가 내 사이트와 통신하는 데 문제가 있는 경우

카운터는 버튼 코드에서 지정한 URL로 링크되는 핀의 수를 보여줍니다. 해당 페이지가 현재 접속한 페이지와 다른 경우, 카운터에 예상하는 것과 다른 숫자가 나타날 수 있습니다.

만약 카운터를 모든 이미지 저장 버튼과 함께 사용하는 경우, 카운터에는 현재 있는 페이지의 URL로 링크되는 모든 핀의 수가 나타나게 됩니다.

버튼 옆에 카운터를 사용하고 있으며 해당 페이지에 핀이 없다면, 카운터가 보이지 않습니다. 해당 페이지에서 최소 한 개 이상의 핀이 생성되어야 카운터가 보입니다.

타사 플러그인에서 제공한 저장 버튼을 사용하는 경우, 해당 플러그인의 제작자에게 문의해서 문제를 해결할 수 있는지 알아보세요. 

직접 만든 저장 버튼을 사용하는 경우, 다음 팁을 참고하세요.

  • 페이지 코드에서 닫는 태그 바로 위에 자바스크립트 줄이 들어가 있는지 확인하세요.
  • 페이지에 자바스크립트 줄이 여러 개 있다면, 제일 마지막 줄을 제외한 나머지 모든 줄을 삭제해보세요.
  • 고급 비동기 자바스크립트와 일반 자바스크립트 줄을 함께 사용하고 있다면 둘 중 하나를 제거하세요.
  • 제 3자 플러그인을 사용 중이라면, 해당 플러그인이 이미 pint.js 줄을 코드에 추가하고 있지는 않은지 확인하세요. 이미 추가된 경우, 따로 다시 추가할 필요가 없습니다.
일부 호스팅 업체는 자바스크립트를 지원하지 않기 때문에 Pinterest의 위젯 빌더를 통해 코드를 추가하지 못할 수도 있습니다. 해당 업체가 위젯을 추가할 수 있는 다른 방법을 제공할 수도 있습니다.

다음의 문제 해결 팁을 시도해 보세요.
 
  • 이미지의 높이나 너비 중 하나가 100픽셀 이상이고 나머지 치수가 200픽셀 이상인지 확인하세요(마우스 오버 저장 버튼이 나타나려면 이미지가 최소 120x120픽셀이어야 합니다).
  • 이미지가 CSS 백그라운드에서 지정되지 않고, 각 이미지에 "img"로 시작하는 src 속성이 있는지 확인하세요.
  • 닫는 태그 바로 위에 마우스 오버 버튼 코드를 추가하세요.

이는 사용자의 사이트에서 핀을 만들기 전에 Pinterest 접속 시간이 초과된다는 것을 의미합니다. 안타깝지만 이런 문제는 저희 쪽에서 해결할 수 있는 문제가 아니며 보통 사이트 속도가 느릴 때 이런 문제가 발생합니다. 사용자의 사이트를 확인해 보시기 바랍니다.