인스타그램 내 사이트 연동하기 - 라이트위젯(lightwidget)
본문
제시해 주신 LightWidget을 사용하여 웹사이트에 인스타그램 피드를 연동하는 방법을 웹문서 최적화 형식으로 정리해 드리겠습니다.
LightWidget으로 웹사이트에 인스타그램 피드 연동하기
인스타그램 API 대신 LightWidget을 사용하면 코딩 없이 쉽고 간편하게 웹사이트에 인스타그램 콘텐츠를 표시할 수 있습니다. 슬라이드, 사이드바 등 다양한 레이아웃 설정은 물론, 호버 효과 및 링크 연결까지 사용자 정의할 수 있습니다.
1. LightWidget 회원가입 및 로그인
LightWidget 사용을 위해 먼저 계정을 생성합니다.
LightWidget 홈페이지로 이동 후, 우측 상단의 **'Sign up'**을 클릭하여 회원 가입을 진행합니다.
가입 후, 생성된 계정으로 로그인합니다.
2. 인스타그램 계정 연결
LightWidget 대시보드에서 인스타그램 계정을 연동합니다.
Dashboard에서 **'Connect account'**를 클릭합니다. (화면이 변경되었다면 Accounts 탭으로 이동)
연결 과정 중 **'Consumer connection'**과 'Business connection' 중 하나를 선택합니다.
일반 유저는 Consumer를 선택합니다.
비즈니스 계정은 더 많은 기능(팔로워 수, 좋아요 수 표시 등)을 제공합니다.
필요한 권한 항목들을 모두 예(Yes)로 선택합니다.
마지막으로 'Connect selected Instagram account' 버튼을 눌러 연동을 완료합니다.
3. 위젯 스타일 설정하기
연결된 계정으로 표시할 위젯의 디자인과 기능을 설정합니다.
Widgets 탭으로 이동 후 **'Create new widget'**을 클릭하여 설정 화면으로 이동합니다.
Layout: 이미지가 보이는 **형식(슬라이드, 그리드 등)**을 설정합니다.
Posts: 이미지에 마우스를 올렸을 때 나타나는 호버 효과 등을 설정합니다.
취향에 맞게 모든 설정을 완료한 후 'Create' 버튼을 눌러 위젯 생성을 마무리합니다.
4. 웹사이트에 코드 삽입 (연결)
생성된 위젯 코드를 웹사이트 HTML에 붙여넣어 연동을 완료합니다.
위젯 생성이 완료되면 화면에 나타나는 연결 코드를 복사합니다. (버튼: 'Copy to Clipboard')
웹사이트의 HTML 문서 중 인스타그램 피드를 표시하고 싶은 정확한 위치에 복사한 코드를 붙여넣기 합니다.
코드 확인: 코드를 잊어버렸다면 Widgets 탭에서 해당 위젯의 'Show more' 버튼을 눌러 언제든 다시 확인할 수 있습니다.
5. 참고 사항 (무료 vs. 유료)
LightWidget의 무료 계정 및 유료 업그레이드 옵션에 대한 정보입니다.
- 무료 계정 제약
새로운 콘텐츠(사진)는 하루에 한 번(무작위 시간) 로드됩니다.
HTTPS:// 로 시작하는 웹사이트에서는 사용할 수 없습니다. (보안 프로토콜 미지원)
- 유료 업그레이드
월 결제가 아닌 1회성 결제 방식입니다.
HTTPS 지원 (보안 웹사이트에서 사용 가능)
더 빠른 속도 및 30분 간격의 잦은 새로고침 주기를 제공합니다.
