블로그와 워드프레스에 인스타그램 피드/위젯 붙이기 완벽정리 - 라이트위젯 위젯 생성 서비스를 이용
라이트위젯은 현재(2019-04-05 기준) 무료버전에서는 https 프로토콜을 지원하지 않습니다.
티스토리에 https 가 의무화되면서 이 위젯의 무료버전으로는 티스토리에 인스타그램 위젯을 표시할 수 없습니다.
티스토리에 라이트위젯을 사용하려는 사용자는 유료버전을 사용해야 합니다.
( 10$ 1회, 최대 5분이내에 시 포스트 위젯에 업데이트 기능 포함)
https가 필수가 아닌 블로그나 워드프레스 같은 CMS에서만 사용할 것을 추천합니다.
인스타그램을 하는 사용자가 많이 늘어나다보니 블로그에 인스타그램 피드나 링크를 붙이는 경우가 종종 있습니다.
블로그 서비스에서 위젯이나 모듈을 제공해주면 해당 기능을 쓰면 되지만, 그렇지 경우 사용자가 직접 해당 기능을 만들어 붙여야 합니다.
티스토리의 경우 위젯으로 별도의 인스타그램 피드를 붙이는 기능을 제공하지 않습니다.
대신 티스토리 서비스는 스킨 편집 기능과 파일 업로드 기능을 제공하기 때문에 다양한 기능을 붙일 수 있는 자유도가 높은 편이어서 인스타그램 위젯을 붙이는 다양한 방법들 중 하나를 골라서 사용할 수 있습니다.
스킨 기능을 이용해 티스토리 블로그에 인스타그램 피드를 붙이는 방법은 여러가지가 있지만 크게 나누면 아래 3가지 방법으로 구분할 수 있습니다.
앞선 순으로 적용이 쉽고 사용자 친화적이며, 적용하기도 간편한 편입니다.1. 인스타그램 위젯 생성 서비스를 이용해 생성된 피드를 링크로 연결하기
2. 인스타그램 개발자 액세스 토큰을 발급받아 내 인스타그램 피드를 연결하기
3. 프록시 서비스를 이용해 인스타그램 피드를 원격으로 연결하기
그중 가장 쉽고 간편한 방법인 1번은 인스타그램 위젯을 생성해주는 서비스를 이용해 간편하게 피드를 붙이는 방법으로, 스킨 수정이 어려운 초보자들도 따라할 수 있기 때문에 초보자들에게 추천합니다.
완전 초보자인 경우 1번 방법을 추천하고, 티스토리 스킨 커스터마이징을 조금 할 줄 아는 경우 2번, 스킨 수정을 잘하거나 다른 사용자의 인스타그램 피드를 붙일 필요가 있는 경우 3번을 추천합니다.1, 2번은 본인 인스타그램만 붙일 수 있습니다.
2번과 3번은 자바스크립트 라이브러리를 이용해 인스타그램 피드를 연결하는 것이기 때문에 html 코드, 자바스크립트 코드를 스킨 적당한 위치에 위치해주는 것 외에, 이런 저런 초기 설정을 조금 해줘야 하는 작업들이 있습니다.
2, 3번은 자바스크립트 파일을 업로드할 수 있거나 자바스크립트 코드를 스킨에 적용할 수 있는 방식이어서 티스토리의 경우 문제가 없지만,
자바스크립트를 업로드할 수 없는 블로그 서비스를 이용하는 경우 1번을 사용해야 합니다.
인스타그램 위젯 서비스를 이용해 인스타그램 피드를 연결하기
인스타그램 피드 위젯을 생성해서 링크를 걸 수 있게 해주는 서비스는 여러개가 있습니다.
그중 가장 인기 있고 대표적인 서비스 2개를 뽑으면
A. 라이트위젯
B. 스냅위젯
둘다 무료이며, 사용 방법은 대동소이 합니다.
1. 인스타그램 계정으로 위젯 서비스 로그인
둘중에서 사용자가 가장 많고 편리한 라이트위젯을 이용해 인스타그램 위젯을 생성해 티스토리 블로그에 붙여보도록 하겠습니다.
https://lightwidget.com/
라이트위젯 사이트로 가서 인스타그램 로그인을 합니다.
왼쪽 보라색 버튼 "Log in with Instagram" 을 클릭해 인스타그램 로그인을 하면, 자동으로 라이트위젯 계정이 생기면서 액세스 토큰까지 생성해서 기본 위젯을 생성합니다.
라이트위젯에서 처음 로그인을 하는 경우 인스타그램 계정 정보에 접근하는 것을 허용할 건지 확인합니다.
"Authorize"를 눌러 허용하면 바로 위젯 설정화면 양식으로 넘어갑니다.
이전에 라이트위젯을 사용했다가 액세스 토큰이 만료된 경우 하단에 아래와 같은 안내 메시지가 표시되고 위젯 생성, 수정을 할 수 없게 됩니다.
하단에 "Get Code!" 버튼이 보이지 않을 경우 액세스 코드가 만료된 것이므로
Given user did not authorize our app on Instagram or authorization expired. Please authorize it first by using this link.
문장 끝의 "this link" 를 클릭하면 만료된 액세스 토큰을 다시 활성화하는 방법을 안내하는 페이지로 이동해서 액세스 토큰을 다시 생성하거나 해야 합니다.
원인 불명으로 액세스 토큰이 다시 생성되지 않는 경우가 있으므로 액세스 토큰이 만료된 경우, 그냥 라이트위젯 계정 삭제를 한후 다시만드는 것을 추천합니다. 간편하게 라이트위젯 홈페이지 오른족위의 사람모양 아이콘을 클릭한 후 메뉴에서 "My Account" 를 선택하고 "Delete my account" 버튼을 클릭해 계정 삭제를 하면 초기 상태로 돌아가고, 보라색 "Log in with Instagram" 버튼이 다시 나타납니다.
2. 라이트위젯 옵션 항목들 설정하기
TYPE OF WIDGET
라이트위젯이 기본 제공하는 타입은 그리드(Grid), 슽라이드쇼(Slideshow), 핀터레스트 타입(Columns) 3가지입니다.
대부분은 그리드 형태로 만듭니다.
최대한 많은 인스타 사진이 노출되기 때문에 가장 선호됩니다.
위젯 타입(TYPE OF WIDGET)으로 그리드(Grid) 를 선택합니다.
NUMBER OF COLUMNS / NUMBER OF ROWS
위젯에 표시할 이미지들의 행과 열 수를 지정합니다.
이미지 갯수는 행X열 갯수만큼 자동으로 가져옵니다.
예를 들어 3행(NUMBER OF ROWS) 3열(NUMBER OF COLUMNS)이면 9개의 인스타그램 사진이 표시됩니다.
블로그 상/하단에 붙일 경우 1행으로 만들어 붙이는 경우가 많고, 사이드바에 붙일 경우 3행 3열이나, 4행 3열로 많이 만들어 붙입니다.
여기서는 블로그 하단 푸터 영역에 1행 8열짜리 인스타그램 피드 위젯을 만들어 붙여보는 것으로 하고
NUMBER OF ROWS 에 1, NUMBER OF COLUMNS에 8을 입력합니다.
IMAGE HOVER EFFECT
IMAGE HOVER EFFECT는 위젯 이미지 위에 마우스 커서를 가져갔을 경우 나타나는 애니메이션 효과입니다.
총 9개의 효과를 제공합니다.
위젯을 최종 생성후에 설정을 변경할 수 있으므로 잘 모르면 일단 애니메이션 없음(None) 으로 진행합니다.
마우스 오버시 적용되는 애니메이션 효과는 다음과 같습니다.
- Fade In/Out - 이미지가 밝아지거나(Fade In) 어두워집니다(Fade Out).
- Zoom In/Out - 이미지가 확대되거나(Zoom in) 줄어듭니다(Zoom Out).
- Zoom and Rotate - 확대되면서 오른족으로 약간 회전합니다.
- Loupe icon overlay - 돋보기 모양 아이콘이 표시되어 자세히보기 클릭을 유도합니다.
- Instagram icon overlay - 인스타그램 아이콘이 표시되어 자세히보기 클릭을 유도합니다.
- Show number of likes and comments - 좋아요와 댓글 갯수를 표시합니다.
- Show caption - 캡션을 보여줍니다. 캡션을 이미지 하단에 고정으로 보여주는 SHOW CAPTIONS 체크 옵션과는 동시에 사용 불가능하며 Show caption 선택이 우선 순위가 있습니다.
PADDING
이미지 사이의 간격(PADDING)을 픽셀 단위로 지정합니다. 보통은 0이나 1, 2픽셀을 추천합니다.
IMAGE FORMAT
이미지 크기 포맷을 선택합니다. 원본 비율(Original)과 정사각형(Square) 중 한가지를 선택합니다. 정사각형 추천.
SHOW CAPTIONS
캡션을 고정으로 이미지 하단에 표시하려면 SHOW CAPTIONS 를 체크합니다. 이미지 호버 효과(IMAGE HOVER EFFECT)에서 Show caption을 선택한 경우 이 체크 옵션은 적용되지 않습니다.
이미지 호버 이펙트(IMAGE HOVER EFFECT)에서 "Show caption" 을 선택하거나 "SHOW CAPTIONS" 체크박스 체크를 하면 추가적으로 캡션 글자 크기를 설정하는 슬라이드바가 추가로 표시됩니다.
FONT SIZE
글꼴 크기는 REM(Root EM) 단위를 사용합니다.
rem은 html 문서의 베이스(base) 글꼴 크기를 기준으로 정하는 상대 크기입니다.
일반적으로 웹브라우저의 베이스 글꼴 크기는 16px 이며 1rem은 16px 크기 글꼴이 됩니다.
만약 12px 크기로 캡션 내용을 출력하고 싶다면 0.75rem으로 설정하면 됩니다.
CLICK ACTION
마지막으로 이미지를 클릭했을 때 어떤 동작을 할지(CLICK ACTION)를 선택합니다.
인스타그램 포스트로 이동(Go to post), 인스타그램 프로필로 이동(Go to profile), 동작 없음(Block click) 중 한가지를 선택할 수 있습니다.
포스트로 이동(Go to post)을 주로 선택합니다.
LAZY LOADING
그외에
인스타그램 위젯이 웹브라우저 창 안에 보이는 시점에 이미지가 로딩되도록 하려면 LAZY-LOAD IMAGES(이미지 지연 로딩) 를 체크합니다.
이 기능은 장단점이 있으므로 가능하면 사용하지 않는 것을 추천합니다.
위젯으로 붙이 이미지 갯수가 많거나 무거운 이미지일 경우 전체 웹페이지 로딩 완료가 그만큼 지연되게 되는데, 이 옵션을 체크하면 화면에 위젯이 보이지 않을 경우 이미지를 로딩하지 않기 때문에 빠르게 웹페이지 로딩을 완료할 수 있습니다.
반대로 웹브라우저에서 페이지 스크롤을 해서 위젯이 표시되는 경우 그때가서야 인스타그램 위젯 이미지가 로딩되기 때문에 순간적으로 이미지가 군데군데 구멍난것처럼 보일 수 있기 대문에 그렇게 보기 좋지 않은 장면이 연출될 수도 있습니다.
위젯에 큰 이미지, 도는 많은 이미지 갯수를 사용하는 경우가 아니면 사용하지 않는 것이 좋습니다.
3. 위젯 코드 생성
이제 "Preview" 버튼을 누르면 오른쪽 미리보기 화면에 설정값대로 위젯이 생성되어 미리보기 됩니다.
미리보기 위젯 오른쪽 아래 모서리를 보면 노랑색 꺽쇠가 있습니다.
이걸 드래그하면 위젯 전체 크기가 바뀌면서 위젯 크기를 직관적으로 설정할 수 있습니다.
오른쪽 상단에 위젯 크기가 픽셀값으로 표시되므로 원하는 적당한 크기로 설정합니다.
전체 위젯 크기가 바뀌면 포함된 이미지들의 크기도 자동으로 배분되어 변경됩니다.
위젯이 완성되었으므로 위젯 코드를 얻어 내 블로그에 붙이면 됩니다.
"Get Code!" 버튼을 누르면 생성된 코드를 볼 수 있는 페이지로 이동합니다.
"Copy to clipboard" 를 클릭해 생성된 코드를 복사한 후 내 블로그의 적당한 위치에 붙여넣으면 완성!
* 알아둘 라이트웨젯의 제약사항
무료 버전인만큼 제약 사항도 있습니다. 생성된 웨젯의 이미지 업데이트가 하루에 한번만 되기 때문에 최신 인스타그램 포스트를 바로 바로 반영해서 내블로그에 표시되도록 하고 싶으면 유료 버전을 사용해야 합니다.
금액은 10달러 1번 결제이고, 최대 5분안에 최근글을 위젯에 업데이트를 해줍니다.
즉시 업데이트되는 위젯을 원하지만 돈은 절대 쓰기 싫으면 인스타그램 피드를 붙이는 2번째 방법을 사용하기를 추천합니다.