Webflow 웹페이지에 대화형 Twitter 공유 버튼 삽입

중요한: 이 가이드에서는 Webflow의 포함 구성 요소를 활용하여 개인화된 코드를 통합합니다. 삽입 요소는 유료 사이트 구성표와 Core, Growth, Agency 및 Freelancer Workspace 구성표를 통해 액세스할 수 있습니다. 

동적 임베딩을 활용하면 블로그 게시물 모음, 음악 비평, 이벤트 등의 자료와 같이 웹 사이트의 콘텐츠에 대한 맞춤형 Twitter 공유 버튼을 디자인할 수 있습니다. 

이 튜토리얼에서는 다음을 알아봅니다. 

1. 트위터에서 임베드 코드를 얻는 절차
2. Webflow 웹페이지에 대화형 Twitter 공유 버튼 삽입

트위터에서 임베드 코드를 얻는 방법 

Twitter에서 임베드 코드를 얻으려면: 

1. Twitter Embed Generator를 방문해 보세요.
2. 누르다 트위터 버튼
3. 선택하다 공유 버튼
4. 때리다 사용자 정의 옵션 설정
5. 샘플 텍스트(예: "시험 텍스트")를 입력하세요. 트윗 텍스트를 미리 채우시겠습니까? 섹션 - 나중에 생생한 텍스트로 대체합니다.
6. (선택사항) 기타 사용자 정의 옵션(예: 버튼 비율 등)을 구성합니다. 
7. 누르다 업데이트 
8. 누르다 코드 복사 삽입 코드를 복제하려면

Webflow 웹페이지에 대화형 Twitter 공유 버튼을 삽입하는 방법

중요한: CMS 편집(예: '블로그 게시물', '음악 리뷰' 등)을 구성하고 이벤트 편집 요소를 1개 이상 만들었는지 확인하세요. CMS는 편집을 구성하는 데 도움이 되는 유용한 템플릿을 제공합니다.

여기서는 웹페이지에 대화형 Twitter 공유 버튼을 삽입하여 CMS 편집의 콘텐츠를 전파하는 방법을 살펴보겠습니다. 

우리는 이를 2단계로 수행할 것입니다: 

1. 트윗 텍스트에 대한 편집 필드 설정
2. 동적 삽입 생성 

트윗 텍스트에 대한 편집 필드 설정

트윗 텍스트(예: 사이트 방문자가 통합된 Twitter 공유 버튼을 클릭할 때 트윗에 포함할 텍스트)에 대한 새로운 일반 텍스트 필드를 디자인하거나 기존 편집 필드를 사용할 수 있습니다. 

트윗 텍스트에 대한 새 편집 필드를 구성하려면: 

1. 발견하다 CMS 패널
2. 편집물 위로 마우스를 가져간 다음 설정 '을 탭하세요.장부” 아이콘이 표시됩니다. 
3. 누르다 새 필드 추가
4. 선택하다 일반 텍스트
5. 필드에 지정 사항을 할당합니다(예: "트윗 텍스트") 
6. 누르다 필드 저장

동적 삽입 생성

동적 포함은 동적 콘텐츠에 대해서만 작동합니다. 즉, 편집 페이지 또는 고정 페이지의 편집 목록 내에만 추가할 수 있음을 의미합니다. 공유하려는 콘텐츠(예: "블로그 게시물", "음악 리뷰", "레시피" 등)와 연결된 편집 페이지에 포함된 Twitter 공유 버튼을 병합하거나 편집 목록에 가입해야 합니다. Twitter에서 콘텐츠를 공유하려는 편집물.

동적 삽입을 추가하려면:

1. 로 이동 패널 추가 > 고급의
2. 포함 포함시키다 캔버스에 대한 요소
3. 코드 편집기에 Twitter 공유 버튼 삽입 코드를 붙여넣으세요. 
4. 코드에서 "data-text=" 뒤에 있는 Twitter 사용자 정의 옵션에 입력한 샘플 텍스트를 찾아보세요.
5. 따옴표 안의 샘플 텍스트를 강조표시하세요.
6. 누르다 필드 추가
7. 콘텐츠를 공유하려는 편집 필드를 선택하세요(예: "트윗 텍스트")
8. 누르다 저장하고 닫기 

준비가 끝나면 사이트를 데뷔하여 참신한 Twitter 공유 버튼을 공개적으로 공개하세요. 사이트 방문자가 Twitter 공유 버튼을 클릭하면 해당 트윗이 편집의 각 항목에 대한 해당 편집 필드 값으로 자동 완성됩니다. 

전문가 팁: 편집 페이지 및 편집 목록에서 조건부 표시 여부를 활용하여 트윗 텍스트 없이 편집 요소에 대한 Twitter 공유 버튼을 가릴 수 있습니다.

‍중요한: Twitter 공유 버튼은 디자이너 캔버스에 표시되지 않습니다. 즉, 디자이너에서 공유 버튼을 예상할 수 없으며 대신 자리 표시자가 표시됩니다. 사이트 게시 또는 내보내기를 게시하면 Twitter 공유 버튼이 해당 위치에 표시됩니다(예: 전시). 사이트를 개인화된 도메인에 게시하기 전에 공유 버튼을 미리 봐야 하는 경우 webflow.io 스테이징 하위 도메인에서 사이트를 시작할 수 있습니다.