방문자가 콘텐츠를 자신의 Facebook 피드에 공유할 수 있도록 도와주세요.

방문자가 콘텐츠를 Facebook 친구들의 뉴스피드에 공유할 수 있도록 사이트에 Facebook 좋아요 버튼을 추가하세요. 이 가이드는 코드 블록을 사용해 페이지와 블로그 게시물에 사용자 지정 좋아요 버튼을 추가하는 방법을 설명합니다.

이 가이드의 단계에는 코드 주입을 사용하고 코드 블록에 고급 코드를 추가하는 것이 포함됩니다. 이러한 기능은 코어 요금제, 플러스 요금제, 어드밴스드 요금제, 비즈니스 요금제, 커머스 베이직 요금제 및 커머스 어드밴스드 요금제에서 제공됩니다. 자세한 내용은 Squarespace 요금제 선택하기를 참조하세요.

시작하기 전에

Facebook 좋아요 버튼을 추가하는 가장 좋은 방법은 사이트가 어느 Squarespace 버전인지에 따라 달라집니다.

• 버전 7.1 - 버전 7.1에는 좋아요 버튼을 추가하는 기본 옵션이 없습니다. 버튼을 추가하려면 이 가이드의 단계를 따르세요.
• 7.0 버전 - 좋아요 버튼 대신 공유 버튼을 사용하여 표시하는 것이 좋습니다. 하지만 코딩 지식이 있고 버튼이 표시되는 위치를 세밀하게 제어하고 싶다면 이 가이드의 단계를 따를 수 있습니다. 사용자 지정 코드를 사용하는 경우 먼저 아래 단계를 따라 Facebook 공유 버튼을 비활성화하세요.

Facebook 좋아요 버튼 추가

사이트에 Facebook 좋아요 버튼을 추가하려면 다음 단계를 따르세요.

1. 사이트가 버전 7.0이라면, 먼저 Facebook 공유 버튼을 비활성화하세요. 공유 버튼 패널을 열고 Facebook의 선택을 해제하세요.
2. Facebook 개발자 문서의 지침을 따라 Facebook 좋아요 버튼 구성기를 사용해 사용자 지정 코드를 생성하세요. 코드가 두 개의 필드에 나뉘어 표시된 창이 열립니다.
3. 첫 번째 필드에서 Javascript SDK 코드를 복사하세요.
4. 새 탭에서 Squarespace 사이트를 여세요. 코드 주입 패널을 여세요.
5. 머리말 필드에 Javascript SDK 코드를 붙여넣고 저장을 클릭하세요.
6. Facebook 좋아요 버튼 구성 도구로 돌아가서 두 번째 필드에서 코드를 복사합니다. 이것이 Facebook 좋아요 버튼 코드입니다.
7. 좋아요 버튼을 추가하려는 페이지 또는 게시물의 편집기를 열고, 주입 지점을 클릭한 다음 블록 메뉴에서 코드를 선택하세요.
8. 코드 블록 편집기에 좋아요 버튼 코드를 붙여넣으세요.

   참고: 보안상의 이유로 로그인 상태에서는 임베드 코드가 비활성화될 수 있습니다. 코드가 보이지 않는 경우, 로그아웃하거나 브라우저의 비공개 모드 또는 시크릿 모드를 사용해 페이지를 확인해 보세요. 더 많은 도움이 필요하신 경우, 사이트에 로그인한 상태에서 사용자 지정 코드가 보이지 않는 이유를 참조하세요.

블로그 게시물에 게시물별 좋아요 버튼 추가하기

사용자 지정 코드를 수정하여 각 블로그 게시물 아래에 고유한 Facebook 좋아요 버튼을 표시할 수 있습니다. 방문자가 이 좋아요 버튼을 클릭하면, 사이트 전체가 아닌 해당 블로그 게시물에만 좋아요를 누르게 됩니다.

블로그 게시물별 좋아요 버튼을 추가하는 방법:

1. 페이지 패널에서 블로그 페이지 위에 커서를 올리고, 를 클릭해 페이지 설정을 여세요.
2. 고급 탭에서 블로그 게시물 항목 코드 주입 필드에(위의 6단계 참조) Facebook 좋아요 버튼 코드를 붙여 넣으세요.
3. 코드에 있는 사이트 URL을 {permalink}으로 바꾸세요.
4. 저장을 클릭합니다.

각 블로그 게시물 콘텐츠 바로 뒤에 Facebook 좋아요 버튼이 표시됩니다.

참고: 이 코드 기반 사용자 지정은 Squarespace 지원 범위를 벗어납니다. 이는 설정이나 문제 해결에 대해 더 이상 도움을 드릴 수 없음을 의미합니다. 또한, 이 솔루션은 코드 기반이기 때문에 기능이나 Squarespace와의 완전한 호환성을 보장할 수 없습니다. 여기에는 반응형 디자인이 모바일 기기에서 어떻게 표시되는지, 특히 모든 템플릿에서 작동하는지 여부가 포함됩니다. 코드 기반 사용자 지정은 플랫폼의 향후 업데이트에서 디스플레이 문제를 일으킬 수 있습니다. 더 이상 도움을 드릴 수는 없지만, 올바른 방향을 제시할 수 있는 자료는 많습니다.

• 사용자 정의 코드를 추가하는 모범 사례를 배워 보세요.
• 코드 기반 사용자 지정에 대한 일반 가이드를 읽어보세요.
• Facebook의 개발자 도구에 대한 도움말은 관련 문서를 참고하세요.
• 고객 및 개발자 포럼인 Squarespace Forum을 방문하세요.
• Squarespace Expert를 고용하여 내 사이트에 사용자 지정 코드를 구축하는 데 도움을 받으세요.