외부 플러그인으로 특정 해시태그 걸린 인스타그램 사진만 가져오기

  아임웹 캠퍼스 총창 해준  |  2018 . 01 . 23

시작에 앞서

라이트위젯(LightWidget)은 내 인스타그램 계정에 올라간 이미지들을 웹사이트에 뿌려주는 코드를 생성해주는 해외 플러그인입니다.

플러그인인 만큼 커스텀 디자인은 다소 제한이 있습니다. 그러나 깔끔한 디자인 스타일과 멋진 효과, 각 사진마다 입력된 해시태그를 기반으로 인스타그램 사진들을 뽑아주는 훌륭한 기능을 포함하고 있어, 일부 아임웹 사용자분들께 무척 유용하리라 생각되어 사용법을 소개합니다.


라이트위젯은 기본적으로 무료이며, 유료 버전은 10달러(최초 1회)입니다.
무료와 유료 버전의 가장 차이점은 아래와 같습니다.


1) 무료 버전에서는 SSL 인증서가 적용된 도메인에서 사용이 불가능합니다.
2) 무료 버전은 매 24시간마다 한 번씩 인스타그램에 새롭게 올라온 이미지를 체크하며, 유료 버전은 매 40분마다 한 번씩 체크 후 사이트에 적용합니다.

*즉, 라이트위젯 무료 버전을 쓰는 경우 새로운 이미지를 올렸다 해도, 바로 이미지가 웹사이트에 적용되지 않습니다.




1단계, LightWidget에서 인스타그램 계정 로그인하기

1) 먼저 https://lightwidget.com 으로 이동합니다.
2) 아래 그림처럼 페이지가 나타나면 내 [인스타그램 계정으로 로그인] 버튼을 클릭해주세요.





2단계, LightWidget 사용 허가하기

인스타그램 계정으로 로그인 시 아래 그림처럼 LightWidget을 허가하겠냐는 경고창이 뜹니다. 허가(Authorize)를 클릭해 다음 단계로 넘어갑니다.





3단계, 인스타그램 뷰 디자인하기

웹사이트에 삽입할 인스타그램 뷰를 디자인할 수 있습니다. 아래 항목 설명을 참조하시어, 원하시는 스타일로 변경해주세요.




항목설명

1) INSTAGRAM USERNAME : 인스타그램 계정으로 로그인하신 경우 자동으로 입력됩니다.
2) FILTER PHOTOS BY TAGS : 해시태그를 입력합니다. 이 태그들이 입력된 사진들이 표시됩니다.
3) TYPE OF WIDGET : 일반 그리드 타입, 슬라이드, 핀터레스트 타입 3가지 중 선택할 수 있습니다.
4) NUMBER OF COLUMNS : 한 줄에 몇 개를 표시할지 정할 수 있습니다.
5) NUMBER OF ROWS : 세로로 몇 줄을 보여줄지 정할 수 있습니다.
6) IMAGE HOVER EFFECT : 마우스 커서를 댔을 때 효과를 선택할 수 있습니다.
7) PADDING : 이미지와 이미지 사이 간격을 정할 수 있습니다.
8) IMAGE FORMAT : 이미지 비율을 정할 수 있습니다. 1:1과 오리지널 2가지를 지원합니다.
9) SHOW CAPTIONS : 이미지에 삽입된 캡션(태그 등)들을 표시할지 선택할 수 있습니다.
10) PREVIEW : 미리보기 버튼입니다.
11) PREVIEW EXAMPLE : 10번 버튼을 클릭하면, 지금까지 변경한 스타일을 미리볼 수 있습니다.





4단계, 코드 생성 버튼 클릭하기

아래 그림을 참조해, GET CODE 버튼을 클릭합니다.





5단계, 생성한 코드 복사하기

아래 그림처럼 코드가 생성되면 Copy to clipboard 버튼을 클릭해, 생성된 코드를 복사합니다.





6단계, 메뉴 추가하기

이제 아임웹 디자인 모드에서 복사한 코드를 삽입해보겠습니다. 먼저 디자인 모드에 접속해, 아래 그림처럼 빈 메뉴 추가하고, + 아이콘을 클릭합니다.





7단계, 코드 위젯 선택하기

⊕를 클릭하면 나타나는 위젯 목록 중 </> 코드 위젯을 선택합니다.





8단계, 코드 설정 창 열기

복사한 코드를 붙여 넣으려면, 코드 위젯 설정 창을 열어야 합니다.

1) 삽입된 코드 위젯 위에 마우스 커서를 놓고, 마우스 우클릭합니다.
2) 다음으로 나타나는 보조 메뉴에서 [코드 설정] 메뉴를 클릭합니다.





9단계, 코드 붙여 넣기

1) 라이트위젯(LightWidget)에서 복사한 인스타그램 코드를 붙여 넣기 합니다.
2) 끝으로 저장을 눌러 변경사항을 저장해주세요.





10단계, 게시하기 후 확인하기

수고하셨습니다! 코드 삽입을 마쳤다면, 디자인 모드 우측 상단에 [게시하기]를 클릭해, 지금까지 변경한 사항들을 모두 저장합니다. 그럼 아래 그림처럼 #라이언 해시태그가 적용된 인스타그램 이미지들이 나타납니다! :)


*다시 한번 말씀드리지만, 라이트위젯은 SSL 인증서가 적용된 주소(URL)에서 작동하지 않습니다. 따라서 아임웹 무료 버전에서는 사용이 불가합니다. 단, 라이트위젯 유료 사용자는 가능합니다.

*아래는 제 개인 사이트에 적용한 모습입니다. http://plipop.com/instragram-hashtag 에서 확인해보세요.



해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹캠퍼스' 총장
jin@haejoon.com

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

47K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

154

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

150

전국 파트너 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP 공식파트너입니다.