Elfsight를 사용하여 웹사이트에 Instagram 피드를 추가하세요.

중요한: 다음 가이드는 Webflow의 포함 기능을 사용하여 사용자 정의 코드를 통합하는 방법을 보여줍니다. 이 기능은 모든 유료 사이트 플랜은 물론 Core, Growth, Agency 및 Freelancer Workspace 플랜에서도 액세스할 수 있습니다.

이 튜토리얼에서는 다음 주제를 다룹니다. 

1. Elfsight에서 Instagram 피드 위젯을 만드는 과정
2. Webflow 웹사이트에 인스타그램 피드 위젯 삽입하기

Elfsight에서 Instagram 피드 위젯을 만드는 단계

예비 조치: 아직 하지 않으셨다면, 부탁드립니다. Elfsight 계정 등록.

Instagram 피드 위젯 생성

Instagram 피드 위젯을 만들려면 다음 단계를 따르세요. 

1. 방문하다 Elfsight의 앱 카탈로그
2. 선택 인스타그램 피드 옵션
3. 귀하의 웹사이트에 선호하는 인스타그램 피드 템플릿을 선택하세요(예: 프로필 위젯, 그리드 등).
4. 선택한 템플릿으로 계속하기
5. 인스타그램으로 결정 소스 유형, 공개 계정 및 해시태그, 비즈니스 계정, 개인 계정 등
6. 관련 내용을 입력하세요. 인스타그램 출처 정보 — 사용자 이름(예: @webflow), 해시태그(예: #webflow), 위치(예: 캘리포니아) 등
7. 딸깍 하는 소리 추가하다
8. 포함하려는 추가 Instagram 소스에 대해 6단계와 7단계를 반복합니다.

활용하실 수 있습니다 필터 그리고 정렬 피드를 효과적으로 관리할 수 있습니다. 필터는 특정 단어나 해시태그가 포함된 게시물을 표시하거나 숨기는 데 도움이 되며, 정렬을 사용하면 피드에서 Instagram 게시물의 표시 순서를 설정할 수 있습니다.

Instagram 피드 위젯 스타일링

게시물

다음으로 이동하세요. 우편 탭을 사용하여 이미지 전용 또는 전체 카드 표시 등 피드의 모양과 각 게시물에 표시되는 요소(좋아요 수, 댓글 수, 게시물 텍스트 등)를 사용자 정의할 수 있습니다. 게시물이 팝업으로 열리거나 Instagram에서 열릴지, 팝업에 어떤 요소가 표시되는지 등 클릭 시 게시물 동작을 결정할 수도 있습니다.

공들여 나열한 것

액세스 공들여 나열한 것 탭을 클릭하여 위젯의 레이아웃을 구성하세요. 여기에서 슬라이더 또는 그리드 형식을 선택하고, 열과 행 수를 지정하고, 이미지 사이의 간격을 조정하고, 피드 위젯 위에 제목을 포함할 수 있습니다.

모습

내 스타일 섹션에서 사전 설정된 색상 구성표 중에서 선택하거나 피드에 대한 사용자 정의 색상을 정의하세요. 아래의 요소 옵션을 선택하여 오버레이, 버튼, 링크, 배경 및 텍스트의 색상을 수정합니다. 요소 맞춤설정. 당신은 또한 활용할 수 있는 옵션이 있습니다 맞춤 CSS 고급 레이아웃 관리를 위해.

참고하세요: 다양한 Elfsight 위젯은 선택한 피드 템플릿에 따라 다양한 색상 옵션을 제공합니다.

맞춤화

에서 설정 섹션에서 피드의 표시 언어를 지정할 수 있습니다.

Instagram 피드 위젯 저장

Instagram 피드 위젯 사용자 정의를 완료한 후 게시. 이어서 클릭하세요. 코드 복사 위젯의 HTML 코드를 검색합니다. 

Webflow 사이트에 Instagram 피드 위젯 통합

이제 삽입 기능을 사용하여 라이브 Webflow 사이트에 Instagram 피드 위젯을 삽입할 수 있습니다.  

웹사이트에 Instagram 피드 위젯을 통합하려면: 

1. Designer에서 사이트에 액세스
2. 로 이동 패널 추가 > 고급의 그리고 추가하세요 포함시키다 캔버스에 대한 요소
3. 코드 편집기에 Elfsight 위젯의 HTML 코드를 붙여넣으세요. 
4. 변경사항 저장

준비가 되면 사이트를 게시하여 새로 추가된 Instagram 피드 위젯이 실제로 작동하는 모습을 확인하세요. 

중요한: Instagram 피드 위젯은 Designer 캔버스에 표시되지 않습니다. 즉, Designer 자체 내에서 위젯을 미리 볼 수 없습니다. 대신 자리 표시자가 표시됩니다. 사이트를 게시하거나 내보내면 위젯이 지정된 위치에 나타납니다. 사용자 정의 도메인을 활성화하기 전에 미리 보려면 webflow.io 준비 하위 도메인에 게시하는 것이 옵션입니다.