트위터 기업 블로그를 가면, 우측 사이드바에 Photos 라는 영역이 있습니다. 해당 영역은 플리커 계정 사진을 심플하게 블로그 사이드바에 보여지게 하고 있습니다.
트위터 블로그 소스를 보면 아래와 같은 내용을 볼 수 있습니다.
<div class='flickr'>
<script src='http://www.flickr.com/badge_code_v2.gne?
count=5&display=latest&size=s&layout=h&source=user&user=34178660@N03'
type='text/javascript'></script></div>
위 소스에서 "user=" 위에 붙은 34178660@N03 가 본인의 고유 계정입니다. 그리고 "count=" 뒤의 숫자는 보여지는 사진 개수입니다. 고유 계정을 확인 하는 방법은 플리커에 가서 로그인 후 자신의 사진을 클릭하면 주소창 위에 자신의 계정이 보입니다.
제 사진 주소인데요, 7231792@N04 이 제 고유 계정입니다. 그렇다면 티스토리 블로그에 플리커를 붙이는 방법을 간단히 알려드리겠습니다.
skin 소스 부분은 위 소스를 사용하시면 됩니다.
<div class='flickr'>
<script src='http://www.flickr.com/badge_code_v2.gne?
count=5&display=latest&size=s&layout=h&source=user&user=자신계정'
type='text/javascript'></script></div>
style 에는 아래의 소스를 사용하시면 됩니다.
/* flickr */
.flickr a img {
margin-right: 1px;
width: 55px;
height: 55px;
border: 4px solid transparent;
margin: -4px -3px -4px -4px;
-webkit-transition: -webkit-transform .1s ease-in;}
.flickr a:hover img {
border: 4px solid #fff;
-webkit-box-shadow: 0px 1px 3px #83B8D3;
-moz-box-shadow: 0px 1px 3px #83B8D3;
position: relative;
-webkit-transform:rotate(10deg) scale(1.15);
-moz-transform:rotate(10deg) scale(1.15);
.flickr {padding: 4px 0 30px 0;}
.flickr a img 소스에서 width, height는 사진 크기이며 border는 사진 테두리 소스입니다. 나머지는 개인 취향에 맞게 수정하여 사용하시면 될 듯 합니다.
위소스는 메모장으로 첨부합니다.
플리커 밷지를 블로그에 보여지게 하는 외국 블로그 설명 예는 아래 링크에서 좀더 자세히 볼 수 있습니다.