블로그용 인스타그램 위젯 만들기

아마 요즘 뜨는 sns라면 인스타그램을 빼놓을 수 없을 겁니다. 단순히 사진 하나로 생각을 이야기하고 공감하는 공간으로 페이스북에 인수되며 현재 전세계 4억명이 사용하고 있다죠.

요즘 많이들 사용하고 있는 인스타그램을 알리기 위해 웹사이트나 블로그에 인스타그램 배너등을 많이 사용하고 있는데 인스타그램 자체에서 배포하고 있는 위젯이 있습니다. 아마 제 블로그를 유심히 보신 분은 이미 아실지도 모르겠지만 블로그 사이드바 아래쪽에 있던 위젯을 이제 위로 끌어 올렸습니다.

인스타그램 위젯을 블로그나 웹사이트에 달기.

인스타그램 위젯을 사용하기 위해서 우선 인스타그램 웹에 접속합니다. http://instagram.com으로 접속후 로그인을 합니다.

본인 홈화면에서 프로필 편집을 꾹 누릅니다. 프로필 편집을 누르면 아래와 같은 화면이 보입니다.

좌측에 여러개의 메뉴가 보이는데 위젯을 클릭하면 친절하게 위젯에 대한 설명이 나옵니다. 인스타그램은 기본 위젯을 5가지 종류로 제공해 주고 있습니다. 모두 상당히 심플하고 단순한 위젯입니다.

블로그나 웹사이트에 사용할 위젯을 선택 아래쪽에 생성되는 코드를 마우스로 모두 선택해서 복사 후 이제 블로그나 웹사이트에 보여주고 싶은 위치에 붙여넣기를 하면 됩니다. 티스토리에 붙여 넣기는 HTML/CSS 편집메뉴에서 위젯이 나올 위치에 붙여넣기를 합니다. 아니면 제 블로그 오른쪽 메뉴의 사이드바에 나오게 하고 싶다면 사이드바 메뉴로 들어갑니다.

기본 모듈에 있는 HTML 배너출력을 추가해 줍니다. 사이드바에서 HTML 배너출력을 선택후 인스타그램 위젯이 보여질 위치를 선정후 편집 버튼을 누릅니다.

모듈 편집에서 방금 복사한 인스타그램 위젯 코드를 HTML 소스에 붙여넣기를 하면 됩니다. 사이드바 메뉴에 너무 딱 붙어서 보기 싫을땐 맨 마지막 줄에 한줄 띄우기 태그인 </br>을 추가해 주면 됩니다.

간단하고 아주 쉬운 작업인데 직접 위젯을 만들고 싶다면 인스타그램 위젯 메뉴에서 아래쪽에 보면 인스타그램 카메라 아이콘을 제공하고 있습니다.

인스타그램 카메라 아이콘을 PDF파일로 제공 합니다. 이것을 다운받아  포토샵에서 열어서 직접 편집해 사용할 수 있습니다. 직접 만들기 귀찮고 기본 위젯이 깔끔해 전 그냥 기본 위젯을 사이드바에 적용 했습니다.

요즘 인스타그램을 많이들 사용하고 있어 한번 정리해 봤습니다. 아래는 인스타그램에서 제공하는 카메라 아이콘을 다운받아 직접 한번 만들어 본 위젯 스타일인데 좀 산만해 보여서 기본 위젯을 사이드바에 사용하고 있습니다.

[Tech/mobile app] - 인스타그램 다중계정 서비스 등록해보자

[Tech/mobile app] - 스마트폰 사진 인스타그램으로 좀 더 분위기있게 만들기