Picasa web album을 자신의 티스토리 블로그에 집어넣기

출처 : http://techblog.tistory.com/trackback/4

Picasa web album을 자신의 티스토리 블로그에 집어넣기

구글에서 제공하는 picasa web album을 자신의 티스토리 블로그나 홈페이지에 집어넣는 방법을 설명한다.
피카사에서 바로 서비스하는건 아니고 Picasa Web Album Widget Creator for Blogger in Beta 라는 홈페이지를 이용하면 자신의 홈페이지에 추가할 수 있는 스크립트를 자동으로 만들어 준다.
아래 화면이 이 방법으로  웹 앨범을 tistory에 추가한 것이다. 아래쪽 사진이 슬라이드쇼로 보여지고 사진을 클릭하면 자동으로 웹 앨범의 그 사진으로 넘어간다. 실제 동작하는걸 보고 싶으면 이 링크로 가 보면 된다.

* 캡춰된 화면이 블로그 해상도로 자동으로 줄어들어서 보여지다 보니 글자들이 잘 안보이는데 각 사진을 클릭하면 제 크기의 선명한 화면이 나타납니다.

1. Picasa Web Album Widget Creator for Blogger in Beta 에 접속하면 아래의 화면이 나온다. 중간 부분의 빈 칸에 자신이 원하는 웹 앨범의 RSS link를 넣어주면 된다. 그 이외의 옵션은 이름을 보면 대강 의미를 짐작할 수 있을테니 생략하겠다.

2. 1번 화면에서 넣어줄 RSS링크는 먼저 picasa web album으로 가서 원하는 앨범을 선택하면 화면 오른쪽 맨 아래 부분에 파란색으로 RSS 라고 되어 있는 부분에서 얻을 수 있다. 저 부분에 마우스를 가져가서 오른쪽 버튼을 클릭해서 메뉴가 나오면 'Copy Link Location'을 선택하면 된다.

3. 2번 화면에서 RSS링크를 클립보드로 복사했으면 아래 화면의 빈 칸에 paste(붙여넣기)를 하고 'Generate Widget and Code'를 클릭하면 된다. 그러면 아래 칸에 선택한 웹 앨범을 슬라이드쇼로 보여주는 스크립트가 자동으로 생성된다.
아래쪽 'Add Picasa Web Album Widget'은 Blogger를 사용하는 경우에 자동으로 삽입해주는 것인데 여기서는 필요 없다.

4. 3번 화면에서 만들어 진 스크립트를 티스토리의 스킨에 추가해 주면 된다. 다만 html과 스크립트에 익숙하지 않은 사람은 '스킨에 추가'하는 방법이 막막할 수 있기 때문에 자세히 설명하겠다.

5. 만들어 진 스크립트는 크게 두 부분으로 나눠서 넣어줘야 한다.

more.. (생성된 코드 예제)

<div id="pwFeed" style="text-align:center;"></div><script type="text/javascript"> var imgNum = 0;  var pwaHeader = false;var albumDisplay = false; var pwaLogo = false; var pwaSlideShow = true; var pwaSlideSpeed = 5000; var pwaImageSize = 160; var pwaImageFeed = 20; var pwaBorder = true; var pwaBorderSize = 2; var pwaBorderColor = '#000'; function pwShow(root) { var feed = root.feed; var entries = feed.entry || []; var pwTitle = feed.title.$t; var album = feed.link[0].href; pwf= document.getElementById('pwFeed'); if(pwaHeader){ h2 = document.createElement('h2'); h2a = document.createElement('a'); h2a.href = album; h2t = document.createTextNode(pwTitle); h2a.appendChild(h2t); h2.appendChild(h2a); pwf.appendChild(h2);} ul = document.createElement('ul'); ul.id = 'pwaUL'; ul.style.listStyleType = 'none'; if(feed.entry.length > pwaImageFeed){ pwaFetch = pwaImageFeed;} else {pwaFetch = feed.entry.length;} for (var i = 0; i < pwaFetch ; ++i) { var entry = feed.entry[i]; var title = entry.title.$t; var summary = entry.summary.$t; if(albumDisplay){var link = entry.link[2].href;}else {var link = entry.link[0].href;} li = document.createElement('li'); if(pwaSlideShow){li.style.display = 'none'; li.id = 'pwa' + imgNum;} a = document.createElement('a');a.href = link; a.title = 'View ' + title + ' at PicasaWeb';img = document.createElement('img');img.src = summary.split('src="')[1].split('" alt')[0].replace(/288/,'160&crop=1'); if(pwaBorder){img.style.padding = '2px';img.style.border = pwaBorderSize + 'px ' + pwaBorderColor + ' solid';} img.style.width = pwaImageSize + 'px'; img.style.height = pwaImageSize + 'px';a.appendChild(img);li.appendChild(a);ul.appendChild(li);imgNum++;} if(pwaLogo){ logoli = document.createElement('li');logoli.style.paddingTop = '3px';logo = document.createElement('img');logo.src = 'http://photos1.blogger.com/x/blogger2/4751/2497/320/550435/picasaweblogo-en_US.gif';logoli.appendChild(logo); ul.appendChild(logoli);} pwf.appendChild(ul);if(pwaSlideShow){ pwaPlay();}} var pwaCurrent = 0; function pwaPlay(){if(pwaCurrent >0){ pwPrev = pwaCurrent - 1; document.getElementById('pwa'+pwPrev).style.display = 'none';} else {pwPrev = imgNum -1;document.getElementById('pwa'+pwPrev).style.display = 'none';} document.getElementById('pwa'+pwaCurrent).style.display = 'block'; pwaCurrent++; if (pwaCurrent == imgNum){ pwaCurrent = 0;}setTimeout('pwaPlay()', pwaSlideSpeed)} </script><script type="text/javascript" src="http://picasaweb.google.co.kr/data/feed/base/user/nautes/albumid/5039832265063072193?kind=photo&alt=json-in-script&callback=pwShow&hl=en_US"></script>

6. 예제 코드중에 맨 앞쪽 부분(빨간색)과 그 이후 부분(파란색)을 스킨에 분리해서 넣어 줘야 한다.
<div id="pwFeed" style="text-align:center;"></div><script type="text/javascript"> var imgNum = 0;  var pwaHeader = false;var albumDisplay = false; var pwaLogo = false; var pwaSlideShow = true; var pwaSlideSpeed = 5000; var pwaImageSize = 160; var pwaImageFeed = 20; var pwaBorder = true; var pwaBorderSize = 2; var pwaBorderColor = '#000'; function pwShow(root) { var feed = root.feed; var entries = feed.entry || []; var pwTitle = feed.title.$t; var album = feed.link[0].href; pwf=
......

7. 자신의 티스토리 관리화면으로 들어가서 스킨->스킨편집으로 간다.

8. 웹 앨범 위젯을 넣을 위치를 찾아준다. 여기서는 사이드바에서 블로그 이미지(일명 대문사진) 바로 아래 부분에 넣어 보겠다. skin.html파일에서 <div id="sidebar"> 부분으로 가 보면 모듈이 순서대로 나열되어 있다.
여기서는 블로그 로고 모듈과 공지사항 모듈 사이에 6번 화면의 빨간 부분을 넣어 준다.

</s_sidebar_element>
                                        <- 이 부분에 넣어 주면 된다.
<s_sidebar_element>
<!-- 공지사항 모듈 -->

9. 변경된 화면은 다음과 같다.

10. 그리고 6번 화면의 파란 부분을 skin.html의 </body> 바로 앞 부분에 추가해주면 된다.
아래 화면에서 </script>와 </body>의 사이에 넣어준다.

11. 변경된 화면은 다음과 같다.

12. 다 끝났으면 화면 맨 아래쪽으로 가서 '저장하기'를 눌러주면 된다. 다만 빨간 글씨로 경고하듯이 스킨을 변경하는건 잘못하면 블로그를 사용할 수 없는 상태로 만들 수 있기 때문에 주의해야 한다. 먼저 '결과보기'로 제대로 변경되었는가 확인하는게 안전하다.