안녕하세요, Webflow 전문가 마사토입니다. 이번에는 위와 같은 고민을 해결합니다.
✅이 글의 내용
- Webflow에 Instagram을 임베드하는 방법
- 임베드한 Instagram을 자동 갱신시키는 방법
Instagram을 자동 갱신시키는 방법은 2가지입니다.
- 커스텀 코드를 사용하는 방법
- Webflow의 CMS를 사용하는 방법
제가 추천하는 방법은 ①입니다. 이유는 간단하고 무료이기 때문. 이 방법이 유연성도 있으므로 이쪽으로 만들어 갑시다.
【붙여넣기로 완료】Webflow에 임베드한 Instagram을 자동 갱신시키는 방법
- 【STEP1】Instagram을 프로 계정으로 만들기
- 【STEP2】Facebook 계정과 연동
- 【STEP3】Facebook for Developers에 로그인해 각 코드 취득
- 【STEP4】Instagram의 액세스 토큰 연장
- 【STEP5】Instagram을 읽어들이는 JS 코드를 Webflow에 기입
- 【STEP6】Webflow 안에서 Instagram 사진 표시 영역 작성
※Webflow에서는 PHP를 쓸 수 없으므로 JavaScript를 사용합니다.
마지막 Webflow 기입 공정은 “공개만 하면 끝”인 줄 알았는데 큰 함정이 있었으므로, 실제 경험을 바탕으로 함정 회피법을 소개합니다.
【STEP1〜2】Instagram 프로 계정화와 Facebook 연동
Instagram 설정에서 프로 계정으로 전환하고 Facebook 페이지와 연동합니다(Meta 공식 순서대로 진행하면 됩니다).
【STEP3】Facebook for Developers에서 각 코드 취득
STEP3의 액세스 허가는 다음 항목을 사용했습니다.
- pages_show_list
- business_management
- instagram_basic
- instagram_manage_comments
- instagram_manage_insights
- pages_read_engagement
- pages_manage_posts
【STEP4】Instagram의 액세스 토큰 연장
유효 기한 무제한의 액세스 토큰을 취득해 연장합니다(Graph API의 장기 토큰 취득 순서). 함께 Instagram 프로 계정 ID도 취득해 둡시다.
여기까지 다음 코드를 메모했는지 확인합시다.
- Instagram 프로 계정 ID
- 액세스 토큰(기한: 무제한)
【STEP5】Instagram을 읽어들이는 JS 코드를 Webflow에 기입
Instagram Graph API를 호출하는 JS 코드를 Webflow에 기입하고 해당 항목에 취득한 코드를 넣습니다. 원문은 두 일본어 참고 글(toriton.link, navymobile.co.jp)의 스크립트를 그대로 사용합니다.
기입하는 JS 코드는 반드시 페이지 상세 설정을 열어 Before </body> tag 항목에 기입합시다.
【STEP6】Webflow 안에서 Instagram 사진 표시 영역 작성
이번에 쓰는 JS 코드는 지정한 HTML에 이미지를 자동으로 읽어들이는 것입니다. 그래서 Webflow에서 Div를 넣어 지정 클래스를 만들어야 합니다. 참고 글 ①(toriton)의 스크립트라면 클래스명은 insta_list, ②(navymobile)라면 Instagram입니다.
・Webflow 안의 작업
Div 블록을 넣고 JS 코드가 지정하는 클래스명을 붙인다
・커스텀 코드를 넣는 곳
페이지 상세 설정을 열어 Before </body> tag 항목에 JS를 기입. JS는 여기 이외에 쓰면 제대로 동작하지 않습니다.
커스텀 코드 없이 레이아웃을 바꾸는 방법
부모 요소로 레이아웃을 완결시키는 방법입니다. 방법은 간단, 부모를 “Grid”로 하고 한 칸의 크기를 지정하는 것.
매우 단순하지만 이 방법이 가장 추천입니다. 이유는 Webflow 내부에서 완성 디자인을 상상하기 쉽기 때문.
정리: 노코드 Webflow에 임베드한 Instagram을 자동 갱신시키는 방법
Instagram 도입은 앞으로 더 수요가 늘 것입니다. 지금부터 방법을 파악해 둡시다.
Webflow 제작 의뢰도 받고 있으니 제작에 곤란한 분은 폼으로 질문·의뢰해 주시면 감사하겠습니다. 그럼 또.
자주 묻는 질문
Webflow에 Instagram을 무료로 임베드할 수 있나요?
네, 커스텀 코드를 쓰는 방법이라면 완전 무료로 가능합니다. 자동 갱신 방법은 커스텀 코드 방식과 CMS 방식 2가지가 있지만, 간단하고 무료이며 유연성 있는 커스텀 코드 방법을 추천합니다.
Instagram 액세스 토큰의 유효 기한은 어떻게 하나요?
유효 기한 무제한의 액세스 토큰을 취득해 연장합니다. Graph API의 장기 토큰 취득 순서로 진행하며, 함께 Instagram 프로 계정 ID도 취득합니다.
임베드한 사진을 표시하려면 Webflow 쪽에서 무엇을 만들면 되나요?
JS 코드는 지정한 HTML에 이미지를 자동으로 읽어들이므로, Webflow에서 Div 블록을 넣고 JS가 지정하는 클래스를 만듭니다.
