개발 도구 (Development Tools)/Library

LightWidget - 웹사이트에 인스타그램을 넣어보자

BiCute 2022. 7. 11. 10:00
반응형

 

제작하는 웹사이트에 인스타그램의 사진들을 표기하기 위해선 인스타그램의 API를 사용하는 방법도 있지만,

LightWidget을 사용하면 매우 간편하고 쉽게 구현할 수 있습니다.

 

LightWidget을 사용하면  아래 이미지와 같이 하단에 가득차게 슬라이드 형식으로 배치한다거나, 사이드바 영역에 배치하거나, 특정 영역에 넣는 등 다양하게 구현 가능합니다. 또한 호버 효과나 눌렀을때 어떤 페이지가 연결될건지도 정할수 있죠. 

 

#1 LightWidget 회원가입

 

홈페이지로 이동한 후 오른쪽 상단의 'Sign up'을 클릭하여 회원 가입을 진행합니다.

 

LightWidget 홈페이지로 이동 >

 

 

 

#2 인스타그램 계정 연동

 

로그인을 한 후, 첫화면(Dashboard)에서 Connect account를 눌러 인스타 그램 계정을 연동합니다. 

방식이 변경됐다면 Accounts 탭으로 이동하여 연결 할 수 있습니다.

 

*연결 도중 'Consumer connection'과 ' Business connection'을 선택하는것이 있는데, 일반 유저라면 Consumer를 선택하면 됩니다. 

비지니스 계정쪽이 기능이 좀 더 많지만 기본 기능만 쓰는데는 컨슈머 계정도 충분히 쓸만합니다.

 

연결 계정에 따른 차이점입니다.

팔로워 수, 팔로잉 수, 프로필 사진, 좋아요 수 등의 기능에서 차이가 납니다. 

 

모든 항목들을 예로 한 후, 마지막으로 'Connect selected Instagram account' 버튼을 눌러 연결 과정을 마무리 합니다. 

 

 

 

#3 위젯의 스타일 설정하기

 

Widgets 탭으로 이동한 후 'Create new widget'을 눌러 위젯 설정화면으로 이동합니다.

 

Layout에서 이미지가 보이는 형식을, Posts에서는 호버 효과 등을 설정할수 있으니 마음껏 취향대로 설정하고 'Create' 버튼을 누르면 위젯 생성 과정은 완료입니다.

 

 

 

#4 웹사이트에 연결하기

 

위젯이 완료되면 위젯을 연결할수 있는 코드를 보여줍니다. 

코드를 Copy to Clipboard를 눌러 복사한 후, HTML 문서에서 표시하고싶은 위치에 붙여넣어 줍니다.

 

코드를 잊어버렸다면 Widgets 탭에서 Show more 버튼을 눌러 언제든 확인할 수 있습니다.

 

 

 

#5 기타 사항

 

Support 페이지를 확인해보면 무료 계정은...

하루에 한 번 새로운 컨텐츠를 로드 한다고 합니다. 새로운 컨텐츠를 확인하는 시간 또한 무작위인듯 합니다.

 

또한 비니지스 계정 이외에도 유료 업그레이드 옵션이 있는데, 

결제는 월 결제가 아닌 1회성 결제로, 

무료 계정에서는 HTTPS:// 로 시작되는 웹 사이트에서 사용할 수 없는데, 이 점이 해결되고, 

더욱 속도가 빨라지며, 새로고침도 30분 간격으로 더욱 자주 된다고 하네요. 

 

 

 

반응형