중요한: 이 가이드에서는 Webflow의 포함 구성 요소를 활용하여 개인화된 코드를 통합합니다. 삽입 요소는 유료 사이트 구성표와 Core, Growth, Agency 및 Freelancer Workspace 구성표를 통해 액세스할 수 있습니다.
동적 임베딩을 활용하면 블로그 게시물 모음, 음악 비평, 이벤트 등의 자료와 같이 웹 사이트의 콘텐츠에 대한 맞춤형 Twitter 공유 버튼을 디자인할 수 있습니다.
이 튜토리얼에서는 다음을 알아봅니다.
- 트위터에서 임베드 코드를 얻는 절차
- Webflow 웹페이지에 대화형 Twitter 공유 버튼 삽입
트위터에서 임베드 코드를 얻는 방법
Twitter에서 임베드 코드를 얻으려면:
- Twitter Embed Generator를 방문해 보세요.
- 누르다 트위터 버튼
- 선택하다 공유 버튼
- 때리다 사용자 정의 옵션 설정
- 샘플 텍스트(예: "시험 텍스트")를 입력하세요. 트윗 텍스트를 미리 채우시겠습니까? 섹션 - 나중에 생생한 텍스트로 대체합니다.
- (선택사항) 기타 사용자 정의 옵션(예: 버튼 비율 등)을 구성합니다.
- 누르다 업데이트
- 누르다 코드 복사 삽입 코드를 복제하려면
Webflow 웹페이지에 대화형 Twitter 공유 버튼을 삽입하는 방법
중요한: CMS 편집(예: '블로그 게시물', '음악 리뷰' 등)을 구성하고 이벤트 편집 요소를 1개 이상 만들었는지 확인하세요. CMS는 편집을 구성하는 데 도움이 되는 유용한 템플릿을 제공합니다.
여기서는 웹페이지에 대화형 Twitter 공유 버튼을 삽입하여 CMS 편집의 콘텐츠를 전파하는 방법을 살펴보겠습니다.
우리는 이를 2단계로 수행할 것입니다:
- 트윗 텍스트에 대한 편집 필드 설정
- 동적 삽입 생성
트윗 텍스트에 대한 편집 필드 설정
트윗 텍스트(예: 사이트 방문자가 통합된 Twitter 공유 버튼을 클릭할 때 트윗에 포함할 텍스트)에 대한 새로운 일반 텍스트 필드를 디자인하거나 기존 편집 필드를 사용할 수 있습니다.
트윗 텍스트에 대한 새 편집 필드를 구성하려면:
- 발견하다 CMS 패널
- 편집물 위로 마우스를 가져간 다음 설정 '을 탭하세요.장부” 아이콘이 표시됩니다.
- 누르다 새 필드 추가
- 선택하다 일반 텍스트
- 필드에 지정 사항을 할당합니다(예: "트윗 텍스트")
- 누르다 필드 저장
동적 삽입 생성
동적 포함은 동적 콘텐츠에 대해서만 작동합니다. 즉, 편집 페이지 또는 고정 페이지의 편집 목록 내에만 추가할 수 있음을 의미합니다. 공유하려는 콘텐츠(예: "블로그 게시물", "음악 리뷰", "레시피" 등)와 연결된 편집 페이지에 포함된 Twitter 공유 버튼을 병합하거나 편집 목록에 가입해야 합니다. Twitter에서 콘텐츠를 공유하려는 편집물.
동적 삽입을 추가하려면:
- 로 이동 패널 추가 > 고급의
- 포함 포함시키다 캔버스에 대한 요소
- 코드 편집기에 Twitter 공유 버튼 삽입 코드를 붙여넣으세요.
- 코드에서 "data-text=" 뒤에 있는 Twitter 사용자 정의 옵션에 입력한 샘플 텍스트를 찾아보세요.
- 따옴표 안의 샘플 텍스트를 강조표시하세요.
- 누르다 필드 추가
- 콘텐츠를 공유하려는 편집 필드를 선택하세요(예: "트윗 텍스트")
- 누르다 저장하고 닫기
준비가 끝나면 사이트를 데뷔하여 참신한 Twitter 공유 버튼을 공개적으로 공개하세요. 사이트 방문자가 Twitter 공유 버튼을 클릭하면 해당 트윗이 편집의 각 항목에 대한 해당 편집 필드 값으로 자동 완성됩니다.
전문가 팁: 편집 페이지 및 편집 목록에서 조건부 표시 여부를 활용하여 트윗 텍스트 없이 편집 요소에 대한 Twitter 공유 버튼을 가릴 수 있습니다.
중요한: Twitter 공유 버튼은 디자이너 캔버스에 표시되지 않습니다. 즉, 디자이너에서 공유 버튼을 예상할 수 없으며 대신 자리 표시자가 표시됩니다. 사이트 게시 또는 내보내기를 게시하면 Twitter 공유 버튼이 해당 위치에 표시됩니다(예: 전시). 사이트를 개인화된 도메인에 게시하기 전에 공유 버튼을 미리 봐야 하는 경우 webflow.io 스테이징 하위 도메인에서 사이트를 시작할 수 있습니다.
Ewan Mak의 최신 게시물 (모두 보기)
- Workspace 스팟 및 멤버 포함 또는 제거 - 2024년 4월 15일
- 센터링 상자 요약 - 2024년 4월 15일
- 나중에 참조할 수 있도록 사이트 저장 - 2024년 4월 15일