티스토리 블로그에 인스타그램 피드/위젯 붙이기 완벽정리1 - 스냅위젯 서비스를 이용해 인스타그램 위젯 연결하기
인스타그램을 하는 사용자가 많이 늘어나다보니 블로그에 인스타그램 피드나 링크를 붙이는 경우가 종종 있습니다.
블로그 서비스에서 위젯이나 모듈을 제공해주면 해당 기능을 쓰면 되지만, 그렇지 경우 사용자가 직접 해당 기능을 만들어 붙여야 합니다.
티스토리의 경우 위젯으로 별도의 인스타그램 피드를 붙이는 기능을 제공하지 않습니다.
대신 티스토리 서비스는 스킨 편집 기능과 파일 업로드 기능을 제공하기 때문에 다양한 기능을 붙일 수 있는 자유도가 높은 편이어서 인스타그램 위젯을 붙이는 다양한 방법들 중 하나를 골라서 사용할 수 있습니다.
스킨 기능을 이용해 티스토리 블로그에 인스타그램 피드를 붙이는 방법은 여러가지가 있지만 크게 나누면 아래 3가지 방법으로 구분할 수 있습니다.
앞선 순으로 적용이 쉽고 사용자 친화적이며, 적용하기도 간편한 편입니다.
1. 인스타그램 위젯 생성 서비스를 이용해 생성된 피드를 링크로 연결하기
2. 인스타그램 개발자 API 서비스의 액세스 토큰을 발급받아 내 인스타그램 피드를 연결하기
3. 프록시 서비스를 이용해 인스타그램 피드를 원격으로 연결하기
그중 가장 쉽고 간편한 방법인 1번은 인스타그램 위젯을 생성해주는 서비스를 이용해 간편하게 피드를 붙이는 방법으로, 스킨 수정이 어려운 초보자들도 따라할 수 있기 때문에 초보자들에게 추천합니다.
완전 초보자인 경우 1번 방법을 추천하고, 티스토리 스킨 커스터마이징을 조금 할 줄 아는 경우 2번, 스킨 수정을 잘하거나 다른 사용자의 인스타그램 피드를 붙일 필요가 있는 경우 3번을 추천합니다.1, 2번은 본인 인스타그램만 붙일 수 있습니다.
2번과 3번은 자바스크립트 라이브러리를 이용해 인스타그램 피드를 연결하는 것이기 때문에 html 코드, 자바스크립트 코드를 스킨 적당한 위치에 위치해주는 것 외에, 이런 저런 초기 설정을 조금 해줘야 하는 작업들이 있습니다.
2, 3번은 자바스크립트 파일을 업로드할 수 있거나 자바스크립트 코드를 스킨에 적용할 수 있는 방식이어서 티스토리의 경우 문제가 없지만,
자바스크립트를 업로드할 수 없는 블로그 서비스를 이용하는 경우 1번을 사용해야 합니다.
인스타그램 위젯 서비스를 이용해 티스토리에 연결할 때 주의점
티스토리 도메인에 https가 의무화되면서 https를 지원하지 않는 위젯 서비스들은 더 이상 적용할 수 없습니다. 티스토리에 SNS 위젯을 적용할 경우 https지원(물론 무료로) 여부를 꼭 확인해야 합니다.
티스토리 스킨들은 대부분 반응형이기 때문에 위젯이 반응형 레이아웃을 지원하는지 여부도 중요합니다. 이런 조건을 모두 만족시켜주는 인스타그램 위젯 서비스 중 스냅위젯이 대표적입니다.
서비스도 안정적이고 무엇보다 무료 버전에서 최대 15분 간격으로 위젯의 피드 업데이트를 지원해줍니다.
SnapWidget
사이트로 가서 회원가입을 합니다.
이메일 주소 외에 별다른 개인정보를 요구하지 않습니다.
1. 인스타그램 계정과 연동하기
로그인 후 메인 화면의 "Instagram Grid" 를 클릭합니다.
무료버전으로도 충분히 좋은 결과물을 만들어내므로 무료버전으로 만들어 봅니다.
처음 위젯을 생성하면 스냅위젯에게 인스타그램 접근을 허용할 건지 확인하는 팝업창이 뜹니다.
"Authorize" 버튼을 눌러 허용해줍니다.
허용한 접근 권한은 인스타그램 내 프로필 > 허가된 앱에서 "액세스 취소" 버튼을 누르면 접근을 막을 수 있습니다.
2. 위젯 만들기
대시보드에서 "CREATE A NEW WIDGET" 버튼을 누르면 만들 위젯 타입을 선택하는 목록이 표시됩니다.
스냅위젯은 총 6가지의 인스타그램 위젯 타입을 지원합니다.
인스타그램 그리드 2종, 팝업, 슬라이드쇼, 스크롤링, 보드 중 한가지를 선택해 클릭하면, 위젯 작성을 위한 양식이 표시됩니다.
가장 기본적이고 많이 사용하는 첫번째 "Instagram Grid"를 만들어봅니다.
각 항목들을 입력해 양식을 완성합니다.
각 위젯 항목들은 다음과 같은 역할을 합니다.
- Username - 인스타그램 사용자 아이디를 선택합니다. 다중 계정을 사용중인 경우 여러개의 아이디 중에서 선택할 수 있습니다.
- Descripttion - 위젯 설명을 입력
- Thumbnail Size - 썸네일 이미지 크기를 지정. 가로 세로 동일한 크기로 적용됩니다. 이미지 퀄리티를 높이기 위해 너무 크게 설정하면 페이지 로딩 속도에 영향을 주게 되므로 가능하면 작은 크기를 사용하는 것을 추천합니다. Layout(Columns X Rows) - 열 X 행 크기를 입력합니다. 전체 갯수는 자동으로 설정됩니다.
- Photo Border - 테두리선을 표시할지를 선택합니다. 테두리선은 아래에 있는 패딩(Photo Paddding) 여백 바깥쪽에 그어집니다.
- Background Color - 배경색을 지정. 지정하지 않으면 투명 배경이 됩니다.
- Photo Padding - 개별 이미지의 여백을 지정합니다.
- Hover Effect - 마우스 호버시 이미지 효과를 지정합니다. 총 5가지 효과를 지원합니다.
- None - 마우스 호버 효과 없음.
- Fade In - 호버된 이미지만 선명하게 합니다.
- Fade Out - 호버된 이미지만 흐리게 합니다.
- Zoom In - 이미지 줌인 효과를 냅니다.
- Likes & Comments - 좋아요와 댓글 갯수를 표시합니다.
- Caption - 캡션을 표시합니다.
- Sharing Buttons - 마우스 호버시 SNS 공유 링크 버튼이 표시됩니다.(페이스북, 트위터, 핀터레스트가 제공됩니다.)
- Responsive - 반응형으로 브라우저 크기에 따라 위젯 크기도 자동으로 변하도록 할지 선택합니다. 티스토리 스킨은 대부분 반응형 스킨이므로 "Yes"를 선택합니다.
"PREVIEW" 를 클릭하면 상단의 미리보기 화면에 현재 값에 따라 반영된 결과가 보여집니다.
항목을 모두 입력한 후 "GET WIDGET" 버튼을 클릭하면 위젯이 생성되고, 위젯 코드가 표시됩니다.
완성한 위젯은 대시보드에서 목록으로 표시되며, 재수정 또한 가능합니다.
3. 위젯 코드를 티스토리에 적용하기
"GET WIDGET" 버튼을 클릭하면 팝업이 표시되고 위젯 코드가 표시됩니다.
"COPY TO CLIPBOARD" 버튼을 클릭해 클립보드로 코드를 복사합니다.
티스토리 스킨에디터로 들어가 인스타그램 위젯이 표시될 위치에 코드를 붙여넣습니다.
스킨을 반영한 후 블로그로 들어가면 위젯이 붙은걸 확인할 수 있습니다.
