Yesterday :
Total :
탈 프로젝트
블로그 사이드바에 인스타그램 위젯 설치하기 Adding an Instagram Widget to the Blog with Intagme / 2015. 04. 19 본문
블로그 사이드바에 인스타그램 위젯 설치하기 Adding an Instagram Widget to the Blog with Intagme / 2015. 04. 19
Adam's Tal 2015. 4. 20. 12:45블로그 사이드바에 인스타그램 위젯 설치하기
Adding an Instagram Widget to the Blog with Intagme
2015. 04. 19
<2015년 1월 어느 날, 친구들과 카페에서 수다를 떨다
탈 프로젝트 : Project '탈'이라는 아이디어가 나왔던 바로 그 날
브레인스토밍을 하면서 필기해 둔 메모이다.>
처음 '탈 프로젝트 tal_project' 블로그를 만들 때
이미 블로그 컨셉은 구상되어 있었고 그것을 전체적으로 감싸 안을 블로그 스킨을 고르기가 참 어려웠다.
데일리 룩 Daily Look 형식으로 이미지를 많이 보여주고 싶었기에 깔끔한 스킨이 필요했다.
(난 언제나 그렇듯이 글도 중요하지만 글만큼 중요한 것이 이미지라고 생각한다. ^^;)
<'탈 프로젝트'를 기획하면서 잠정 폐지시킨 예전 블로그 스킨과 당시 열심히 꾸며본 모습이다.>
예전에 운영하던 블로그는 위 사진과 같이 오렌지와 레드 그리고 흰바탕 여백이 조화를 이루어
약간 밝은 느낌을 주게끔 만들어 봤었는데...
.
.
.
.
왠지 모르게 '탈 프로젝트'는 완전히 새롭게 만들고 싶었다.
그래서 찾다찾다 고른 스킨이 지금 현재의 스킨인데
이 녀석은 티스토리에서 처음 블로그 만들 때 고를 수 있는 것들 중 하나이다.
고심끝에 제일 깔끔하다고 생각한 스킨으로 골랐지만
역시 모든게 마음에 들 수는 없는 법 !
결국 티스토리 HTML /CSS 편집을 이용하여 여러 방면 스킨을 뜯어 고쳐 지금의 모습을 만들었다.
(그 방법은 IT에 뛰어난 여러 블로거들의 글을 참고하였다. ^^)
하지만...
.
.
.
이 스킨은 블로그 프로필 사진을 넣을 공간이 없었다.
블로그 기본 정보에 이미지를 등록해도
스킨 자체에 프로필 이미지란이 없으니 나타나지 않는 것...
HTML을 이용하면 스킨상에 프로필 이미지 공간을 만들 수 있지 않을까?
사실 잘 모른다.
너무 어려울 것 같아 시도도 하지 않았지만...
아마 가능할 거라 생각한다. 하하 :P
그러다 우연히 알게 된 '인스타그램 위젯'
Intagme.com 이라는 인스타그램 위젯 전문 사이트를 이용하여 굉
장히 간단한 방법으로 이미지화된 위젯을 넣을 수 있었다.
과정은 다음과 같다.
(1)
Intagme 웹사이트에 접속한다.
<사진 = Intagme 홈페이지>
Intagme에서 제공하는 인스타그램 위젯은
웹사이트 내에 인스타그램 사진을 보여주는 기능을 제공한다.
(2)
새로 만들 위젯 설정을 지정한다. (끝)
<Intagme 홈페이지 접속하자마자 바로 위젯 설정 화면이 나온다.>
Username : 인스타그램 사용자 계정을 입력한다.
Widget Type :
[Slideshow]는 인스타그램 이미지가 최신순부터 슬라이드 이미지로 넘어가는 위젯 타입을 말한다.
[Grid]는 따로 레이아웃을 설정하여 본인의 기호에 맞게 인스타그램 사진 몇장을 동시에 올리는 위젯 타입이다.
Thumbnail Size : 위젯 사이즈를 결정한다.
(난 개인적으로 사이드바에 위치시킬 것이라서 185px 크기로 맞춰보았다.)
Photo Border : 마우스를 위젯에 갖다 대면 위젯을 감싸는 배경에 파란 선이 생긴다.
(난 그런 것이 싫어서 No.)
Sharing Buttons :
공유 버튼인데 페이스북, 트위터, 구글+ 이 세 종류의 사이트에 공유하기 버튼이 위젯 아래에 생긴다.
(난 처음엔 Yes를 하였다가 잠시 뒤 설명할 Intagme의 결점을 알고나서부터 No.)
또한 소스 코드를 받기 전에 Preview'미리보기'를 통하여
위젯이 어떠한 모습으로 나오는지 확인해 볼 수 있으니 참고하자. ^^
위와 같이 간단한 위젯 설정을 마치고 나면 아래 'Get Code'버튼을 클릭한다.
이렇게 코드를 복사해서 자신이 원하는 자리에 HTML/CSS를 이용하여 붙여 넣을 수도 있지만 !
(그것은 내게 너무나 어려운 일이기에... OTL 그리고 난 사이드바에 넣고싶기 때문에...)
.
.
.
.
.
.
.
그리하여 방금 위에서 만들어 본 인스타그램 위젯을
내 블로그 사이드바에 설치해보겠다.
(1)
티스토리 블로그 관리 페이지
플러그인 설정란에 들어가면 '관리 및 통계'파트에 '배너출력'이라고 있다.
클릭하여 '배너출력'을 설정해준다.
(2)
관리 페이지 꾸미기란에 있는 '사이드바'에 들어간다.
오른쪽에는 현재 내 블로그 사이드바에 나와있는 구성요소들이 보여지고 있고
왼쪽에는 더 추가할 사이드바 모듈이 나와있다.
1단계에서 '배너출력'을 설정하였기에 왼쪽에 신규로 'HTML 배너출력'이 등장하였다.
이 녀석을 활용하여 HTML 배너를 사이드바에 노출시킬 수 있는 것이다.
(구글 애드센스를 사이드바에 노출 및 등록시키는 방법도 이와 똑같다고 보면된다.)
HTML 배너출력 모듈을 자신이 원하는 사이드바 위치에 집어 넣는다.
미리보기를 통하여 어떤 위치가 가장 좋을지 판단하면 좋다.
나는 이 인스타그램 위젯을 내 프로필 사진 대용으로 사용할 것이기 때문에
사이드바 우측 상단에 배치시켰다. ^^
사이드바에 형성된 HTML 배너출력란 '편집'을 클릭하여 사이드바 이름을 지정하고
아래의 그림과 같이 'HTML 소스' 빈칸에
아까 전 Intagme 홈페이지에서 받아 놓은 '코드 Code'를 붙여넣기 하면 끝이다.
이렇게 저장된 인스타그램 위젯은
내 블로그 안에서 과연 어떻게 보일까?
?
?
?
?
?
?
?
?
지정된 사이드바 위치에 tal_project 인스타그램 갤러리가 슬라이드쇼 방식으로
잘~ 나오고 있음을 확인할 수 있었다.
결과는 만족 :)
<내 블로그 우측 상단에 Intagme 인스타그램 위젯이 활성화된 모습>
하지만 여기서 발견한 Intagme 위젯의 결함...
.
.
.
.
호기심에 만들어진 우측 상단 인스타그램 위젯을 클릭하여
내 인스타그램으로 접속을 시도해 보았다.
돌아온 것은 '접속오류'
'501 Error'가 뜨는 것이 아닌가.
F5 또는 Retry(재시도)를 눌러가며 시도했을 때
tal_project 인스타그램으로 들어갈 때도 있고 그렇지 않을 때도 있었다.
이렇게 당황스러울 수가.... ^^;
나뿐만 아니라 몇몇 블로거들도 Intagme 위젯 접속오류를 경험한 것 같았다.
<Intagme 인스타그램 위젯 후기>
난 개인적으로 스킨에 프로필이 없어서 약간 아쉬웠었는데...
Intagme 인스타그램 위젯을 블로그 사이드바 상단에 위치시킴으로써
내 인스타그램 갤러리를 블로그 프로필로 사용할 수 있다는 점이
굉장히 만족스러웠다.
하지만...
Intagme 인스타그램 위젯은
어떠한 인스타그램 계정 승인도 필요하지 않았는데
즉, 다른 누군가가 내 인스타그램 계정을 허락없이 가지고 올 수 있다는 뜻이다.
이를 악용하는 사람이 있을 수도...있겠다는 생각이 들었다.
그리고 위젯을 통한 인스타그램 접속오류가 빈번하여
실질적으로 블로그 위젯을 가지고 인스타그램 홍보도 어려울 것으로 보인다.
그렇지만 당분간 내 블로그 프로필 대용으로는
꽤나 만족한다.
위젯이 슬라이드 쇼 형식이기에
방문자들의 더 많은 관심을 끌 것 같기도 하고... ^^
<인스타그램 위젯 지원 사이트 : 사진 = Instansive & Websta 홈페이지>
조금 전에 다시 접속하였을 때
Intagme 인스타그램 위젯 화면이 깨져 보이면서
사용자를 찾을 수 없다는 표시가 나타났었다.
(시스템상 아직 문제가 많은 듯 하다.)
그러다 찾아 본 두 개의 다른 인스타그램 위젯 지원 사이트
'instansive' 와 'websta'
위젯을 만드는 방법은 intagme와 똑같으니
만약, 다음에 또 다시 오류가 나거나 깨짐 현상이 나타난다면
위의 다른 위젯으로 갈아타야겠다. ㅜ.ㅜ
Adam's Tal Project : 탈 프로젝트
