[Tistory] Flickr 앨범(Sets) Embed 로 사진 공유하기

Flickr 를 통해서 앨범 사진을 공유하려는 이유는 여러가지가 있습니다.

우선 가장큰 이유로는 설치형 블로그를 운영하시는 분들은 사진이나 동영상으로 인한 트래픽 문제를 해결할 수 있구요. (티스토리나 네이버 블로그를 이용하시는 분들은 트래픽 문제를 고민하지 않아도 되기 때문에 상관 없겠네요.)

맛집이나 여행 사진, 동물 사진등 같은 주제의 사진을 계속 업데이트 하고 싶은 블로그 글의 경우 직접 블로그를 수정하는 불편 없이 Flickr 의 사진 업데이트를 통해서 업데이트된 사진을 공유 할 수 있다는 점도 있습니다.

그럼 Flickr 의 Embed 공유를 해보도록 하겠습니다.

* 네이버 블로그에서는 iframe 형식의 태그는 막아버리기 때문에 사용할 수 없어요.

> Flickr 에 있는 앨범(Sets) Embed 공유하기

Flickr 에서 앨범 사진을 Embed 방법으로 공유하는 방법은 약간의 꼼수(?)가 필요합니다.

(사실 이 방법이 정식 루트인지는 모르겠네요.)

1. 공유하고 싶은 앨범 -> 첫번째 사진 선택 -> 공유 버튼을 선택합니다.

   반드시 앨범을 통해서 사진보기로 들어가야 합니다!

2. 그러면 아래와 같이 공유 팝업이 나타납니다.

   이 때 HTML, Embed 를 선택하여 Html 태그를 얻습니다.

   (크기는 그냥 알맞은 크기를 설정하면 됩니다. 저는 640*427 로 하겠습니다.)

▼ 코드의 HTML, Embed 를 선택합니다.

3. 그러면 다음과 같은 Embed 태그를 얻을 수 있습니다.

▼ Embed 태그

4. 추출된 Embed 코드를 그대로 블로그 글의 Html 에 붙여넣어도 예쁘게 Embed 를 적용할 수도 있지만 요즘은 모바일 환경도 생각안할 수 없기 때문에 화면크기와 상관없이 최대 크기로 적용되도록 해보겠습니다.

5. 아래와 같이 iframe 태그의 width, height 속성을 지운 후 div 태그(class 는 "embed-container" 로 지정)로 감싸줍니다. 그리고 Style 태그를 추가해주면 끝~! 

(소스는 복사해서 쓰세요.)

Source

<style>.embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><!-- Iframe 태그 위치 --></div>

 

▼ 결과 태그

6. 이렇게 완성된 Html 태그를 넣고싶은 위치에 붙여넣으면 끝입니다.

   (Tisotry 는 에디터 상단의 Html 버튼을 클릭하면 에디터가 Html 모드로 변경됩니다.)

▼ Tistory 에디터 Html 변경 화면

6. 결과입니다! 어떤가요? 봐줄만 하죠? ㅎㅎㅎ

▼ 결과 태그

§ 참고 URL: http://blog.flickr.net/en/2013/12/18/flickr-web-embeds/ (Embed에 대한 Flickr 블로그)

§ 참고 URL: http://www.blogs.jbs.cam.ac.uk/digitalstrategy/2014/04/30/embedding-sets-of-flickr-pictures-on-our-website/ (코드 출처)