%402x.svg){kind=icon}
![[무료] 코드 없는 웹플로우에 인스타그램을 임베드하는 방법](https://assets-global.website-files.com/60a44160bf4fbbd00c1a5e0a/62ca4dace7bc3cb3aa741861_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-07-10%2012.51.16%20(2).png)
“인스타그램을 웹플로우에 임베드하고 싶은데 어떻게 해야 할지 모르겠어요.인스타그램이 업데이트될 때 자동으로 업데이트되도록 하는 방법은 없나요?”
안녕하세요.웹플로우 전문가 마사토입니다.이번에는 위에서 설명한 문제를 해결해 보겠습니다.
✅ 이 글에 담긴 내용
- 웹플로우에 인스타그램을 임베드하는 방법
- 임베드된 인스타그램 업데이트를 자동으로 만드는 방법
Instagram을 자동으로 업데이트하는 방법은 두 가지가 있습니다.다음과 같습니다.
- 사용자 지정 코드 사용 방법
- 웹플로우의 CMS 사용 방법
제가 추천하는 방법은 ① 입니다. 쉽고 무료이기 때문입니다.이 방법을 사용하면 좀 더 유연하게 만들 수 있으니 여기서 만들어 보겠습니다.
[복사 및 붙여넣기로 완료] 웹플로우에 내장된 인스타그램 자동 업데이트 방법
- [STEP1] 인스타그램을 프로 계정으로 바꾸세요
- [STEP2] 페이스북 계정에 연결
- [단계 3]개발자를 위한 페이스북로그인하여 앱 만들기
- [STEP4] 액세스 코드 가져오기 및 확장
- [STEP5] 인스타그램 프로 계정 ID 취득
- [STEP6] 웹플로우에서 JS 쓰기 | 자체
- [STEP7] 웹플로우 내에서 디자인 변경 | 자체
※웹플로우에서는 PHP를 사용할 수 없으므로 자바스크립트를 사용합니다.
마지막에 Webflow에서 설명한 프로세스는 '그냥 공개하는 것'이라고 생각했는데 큰 함정이 있었기에 실제 경험을 바탕으로 함정을 피할 수 있는 방법을 소개하겠습니다.
[STEP1] 인스타그램을 프로 계정으로 바꾸세요
[STEP2] 페이스북 계정에 연결
레퍼런스 사이트 ①만들 때 참고해 주셨으면 합니다.
[단계 3]개발자를 위한 페이스북로그인하여 각 코드 받기
다음 항목은 STEP 3에서 액세스 권한에 사용되었습니다.
- 페이지_쇼_리스트
- 비즈니스_관리
- 인스타그램_베이직
- 인스타그램_관리_댓글
- 인스타그램_관리_인사이트
- 페이지_읽기_인게이지먼트
- 페이지_관리_게시물
[STEP4] 인스타그램 액세스 토큰 확장
액세스 코드를 확장하려면 어떻게 해야 하나요?레퍼런스 사이트 ③를 사용하여 확장할 수 있습니다.참조 사이트 ③ 에서 “만료일 무제한 액세스 토큰 받기” 항목을 검색하여 만료일이 무제한인 액세스 토큰을 받으세요.
Instagram Pro 계정 ID를 얻는 방법은 바로 아래에 설명되어 있으니 함께 확인하시면 원활하게 진행하실 수 있습니다.
지금까지 다음 코드를 기록해 두었는지 확인하세요.
- 인스타그램 프로 계정 ID
- 액세스 토큰 (만료일: 무제한)
[STEP5] JS 코드를 입력하여 인스타그램을 웹플로우에 로드합니다.
참고 사이트 ①② WebFlow에 마음에 드는 사람의 JS 코드를 입력하고 이 시점까지 구한 코드를 해당 필드에 입력합니다.
작성해JS 코드의 경우 페이지의 세부 설정을 열고 before tag 필드를 입력해야</body> 합니다.
[STEP6] 웹플로우 내에 인스타그램 사진 디스플레이 위치를 생성합니다.
이번에 사용된 JS 코드는 이미지를 지정된 HTML 코드에 자동으로 로드합니다.따라서 Webflow에 Div를 넣어 지정된 클래스를 생성해야 합니다.
・웹플로우 내에서 작업
Div 블록을 추가하고 참조 사이트인 경우 클래스를 “insta_list”로, 참조 사이트인 경우 “인스타그램”으로 변경합니다 ② ①
・커스텀 코드를 넣을 수 있는 곳
페이지의 고급 설정을 열고 Before</body> tag 필드에 JS를 입력합니다.JS는 여기 말고 써도 잘 안되네요.
사용자 지정 코드를 사용하지 않고 레이아웃을 변경하는 방법
부모 “Instagram”을 사용하여 레이아웃을 완성하는 방법입니다.방법은 간단합니다. 방법은 부모를 “그리드”로 설정하고 한 프레임의 크기를 지정하는 것입니다.
뭐 누구나 생각할 수 있는 아주 간단한 방법이지만 Webflow 내에서 완성된 디자인을 상상하기 쉽기 때문에 이 방법을 가장 추천합니다.
사실 아래 사진은 제가 친구의 사이트를 만들 때 사용한 방법인데, 빈 부분에 사진이 들어가야 이해가 더 쉬워요.
요약: 코드 없는 웹플로우에 포함된 Instagram을 자동으로 업데이트하는 방법
Instagram의 도입은 앞으로 더욱 수요가 높아질 것입니다. 이제 어떻게 해야하는지 알아 보겠습니다.
참고로 이 내용은 Webflow 질문 코너에서 답변이 없고 많은 분들의 요구가 있는 것 같습니다.'어떻게든 영어 기사를 쓸 수 있겠구나' 생각하면서 최근에 일본을 돌아다니는 것을 즐기고 있습니다.
노마드 워커에 관심이 있다면 제 라이프스타일 글도 읽어보시기 바랍니다.놀랍게도 고정 비용은 지금보다 낮을 수 있습니다.
Webflow 등에 대한 제작 요청도 접수하고 있으니 제작에 어려움이 있으신 분들은 양식을 이용하여 질문, 의뢰 등을 문의해 주시면 감사하겠습니다.나중에 봐요.
다음 두 사이트는 이 방법을 구현하기 위한 참고 자료로 사용되었습니다.
추가 정보는 무료 이메일 뉴스레터를 통해 안내해 드리겠습니다.
WEBFLOW 전문가로 비즈니스를 하고 있는 쿠리타 본인이 실제로 사용해본 경험이 있으며, 편리하다고 느꼈던 웹플로 사용 방법, 사업 계획, 경험, 프로세스 등에 대한 정보를 전파하고 있습니다.필요하지 않은 경우 1초 만에 빠르게 해독할 수 있습니다.다음으로 1천만 건의 매출을 목표로 하고 있습니다.
