ShareThis에 인라인 소셜 버튼 포함

ShareThis를 사용하면 인라인 소셜 버튼을 Webflow 프로젝트에 통합할 수 있습니다. 사이트 방문자는 콘텐츠를 쉽게 공유할 수 있고 공유를 모니터링할 수 있습니다. 이는 관련된 모든 사람에게 유익한 결과를 가져옵니다!

이 튜토리얼에서 다루는 주제:

1. ShareThis에 프로젝트를 추가하세요
2. Webflow에 코드 조각을 삽입하세요.
3. 인라인 버튼 통합 및 디자인

프로젝트를 ShareThis에 통합하세요

아직 등록하지 않으셨다면, 계속해서 등록해주세요. ShareThis 계정을 만드세요 지금. 

등록을 완료한 후 다음을 선택하세요. 새 속성 설정 ShareThis 계정의 오른쪽 상단에 있는 드롭다운 메뉴에서 프로젝트 도메인을 입력한 다음 추가하다.

Webflow에 코드 조각을 삽입하세요.

이 단계에서는 인라인 소셜 공유를 통합하기 위한 코드 조각을 얻습니다. 아래에 도구 공유 > 인라인 소셜 버튼, 클릭 코드 받기을 클릭한 다음 복사 스니펫을 클립보드에 저장합니다.

대시보드나 디자이너를 통해 Webflow로 돌아가면 프로젝트 설정 여기에 이전 단계에서 복사한 코드 조각을 붙여넣습니다. 

내 맞춤 코드 섹션에 코드를 삽입하세요. 헤드 코드 필드에서 Command + V(Mac) 또는 Ctrl + V(Windows)를 사용하여 변경 사항을 저장하려면 변경 사항을 저장하다을 누른 다음 오른쪽 상단으로 이동하여 게시 이어서 선택한 도메인에 게시.

ShareThis 내에서 진행 상황을 확인할 수 있습니다. 아래에 도구 공유 > 인라인 소셜 버튼, 선택하다 수동으로 확인, 프로젝트의 URL을 입력하고 확인하다, 그런 다음 진행하십시오. 업데이트. 

인라인 버튼 통합 및 사용자 정의

여전히 ShareThis 플랫폼에 있는 동안 도구 공유 > 인라인 소셜 버튼, 간단히 클릭하세요. 코드 복사.

‍

이제 동일한 인터페이스 내에서 버튼을 사용자 정의하거나 나중에 이 사용자 정의를 다시 방문할 수 있습니다. 이에 대해서는 곧 다시 설명하겠습니다.

Webflow 프로젝트로 돌아갑니다. 왼쪽 사이드바에서 더하기 아이콘을 사용하고 구성요소, 드래그 포함시키다 ShareThis 버튼을 표시하려는 영역에 요소를 추가하세요. 

때 HTML 삽입 코드 편집기 메시지가 나타나면 ShareThis의 코드 조각을 붙여넣은 다음 저장하고 닫기.

방금 삽입한 코드 조각은 이전 단계에서 통합된 코드 조각을 참조하므로 버튼은 아직 표시되지 않습니다. 표시하려면 다음을 선택하세요. 게시 오른쪽 상단에서 다음을 진행하세요. 선택한 도메인에 게시을 누른 다음 라이브 사이트를 엽니다. 이제 버튼이 지정된 위치에 표시됩니다. 

‍

ShareThis로 돌아가서 버튼의 정렬, 색상, 언어 및 기타 측면을 수정할 수 있습니다. 변경사항에 만족하면 다음을 클릭하세요. 업데이트. Command + R(Mac) 또는 Control + R(Windows)을 눌러 Webflow 프로젝트를 새로 고치면 최근 조정 내용을 볼 수 있습니다.

이제 ShareThis 계정 내의 소셜 분석 대시보드에 액세스하여 시간 경과에 따른 공유 성과를 모니터링할 수 있습니다. 놀라운 직업!