Facebook에 360*180 파노라마 투어 삽입하기

사진/360 파노라마 2013.01.06 15:33 Posted by 푸른하늘 푸른하늘이

요즘 제가 파노라마 투어를 제작하는데 열을 올리고 있습니다. 일반 사진도 마찬가지겠지만, 파노라마 사진도 일반적으로 한군데에서 여러개를 찍게 됩니다. 이러한 파노라마들을 잘 연계시켜서 보여주도록 만든 게 파노라마 투어입니다. 


이렇게 만들어진 파노라마 투어를 페이스북에 삽입시키는 방법을 찾아봤습니다. 그러니까... 파노라마의 링크나 작은 아이콘만 보이는 게 아니라, 아래 그림과 같이 직접 플레이를 시킬 수 있는 형태로 삽입하는 방법말입니다. 


원래 링크를 공유하는 것이니까 클릭하면 볼 수는 있지만, 유튜브 영상을 보는 것처럼 페이스북을 떠나지 않고 파노라마를 볼 수 있는 방법이 있으면 더 좋겠죠. 



krpano 포럼을 뒤적거려보니 마침 별도로 만들어진 Facebook Panorama Embed Tutorial라는 문서가 있었습니다. 저도 아직까지 해본 건 아니지만, 그다지 까다로운 것 같지는 않아서, 그냥 직접 해보면서 문서를 작성하기로 했습니다. 물론, 파노라마 투어를 페이스북에 embed 시키기 위해서는 해당 파노라마가 별도의 서버에 올려진 상태여야 합니다. 


먼저 자신의 파노라마페이지 (html 파일)을 수정하여 <head> </head> 사이에 다음과 같은 metatag 를 삽입시켜주어야 합니다. 물론 각 항목의 내용은 자신의 파노라마의 실제 내용과 맞도록 수정해야 하고요.


<meta property="og:site_name" content="SITE TITLE" />

<meta property="og:url" content="PAGE URL" />

<meta property="og:title" content="PAGE TITLE" />

<meta property="og:type" content="article" />

<meta property="og:image" content="PREVIEW IMAGE URL" /> 

<meta property="og:video" content="PANO SWF URL" /> 

<meta property="og:video:height" content="300" /> 

<meta property="og:video:width" content="400" /> 

<meta property="og:video:type" content="application/x-shockwave-flash" />


이게 끝입니다. 각 항목에 대한 자세한 내용은 여기여기를 읽어보시기 바랍니다.이렇게 다 편집이 끝나면 해당 html 파일을 원하는 사이트에 올린 후, 그 주소를 사용해 페북에 공유하면 됩니다. 하지만 에러가 발생할 수 있으므로 먼저 아래와 같이 "나만 보기"로 올린 뒤에 나중에 전체공개로 바꿔주면 됩니다.



무언가 에러가 발생했을 경우, html 파일을 수정하고 다시 시행하면 될 것 같지만, 그렇지 않습니다. 아무리 내용을 수정해도 처음 그 상태대로 남아있는데, 이는 페이스북에서 자체적으로 약 1주일정도 cache 데이터를 가지고 있기 때문입니다. 


이때 페이스북 디버거 페이지 (http://developers.facebook.com/tools/debug) 에 들어가서 해당 페이지 주소를 입력하고 디버그 버튼을 눌러주시면 됩니다.



==================================

이상은 일반적인 내용이고... 페이스북에 파노라마를 embed 시킨다는 것이 표준적인 것이 아니기 때문에 환경에 따라 여러가지 편집이 필요할 수 있습니다. 일단 저는 제가 사용하는 tistory에 올린 파노라마를 삽입시키는 방법부터 찾기로 했습니다. 그런데.... 처음에는 아주 쉬울 것 같았는데, 쉽지가 않았습니다. 한 열댓번을 바꾸면서 테스트 한 것 같네요.


일단 제가 성공한 방법은 티스토리에 플래시(swf)로 만들어진 파노라마 파일을 올리고, 다른 서버(저의 경우 http://360vr.kr)에 html 파일과 thumbnail image만 올리는 방식입니다.


참고로 제가 이번에 올린 벚꽃나무 날리는 파노라마 파일(fb_flower.html)에는 다음과 같이 넣었습니다. 그 다음 이 파일과 아이콘으로 이용할 작은 사진(fb_flower.jpg)를 제가 운영중인 서버(http://360.vr/)에 적당히 올렸습니다.


<!DOCTYPE html>

<html>

<head>

<title>krpano.com - kyeongju_esplanade_modify</title>

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />


<meta property="fb:page_id" content="********" />

<meta property="og:site_name" content="Bluesky's 360vr panoramas" />

<meta property="og:url" content="http://360vr.kr/panoramas/flowers/fb_flower.html" />

<meta property="og:title" content="Flowers in Kyeongju" />

<meta property="og:type" content="article" />

<meta property="og:image" content="http://360vr.kr/panoramas/flowers/fb_flower.jpg" /> 

<meta property="og:video" content="https://t1.daumcdn.net/cfile/tistory/1945EA4550E5718D2B?original" /> 

<meta property="og:video:type" content="application/x-shockwave-flash" />

<meta property="og:video:height" content="398" /> 

<meta property="og:video:width" content="460" /> 


<style>

@media only screen and (min-device-width: 800px) { html { overflow:hidden; } }

html { height:100%; }

body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }

a{ color:#AAAAAA; text-decoration:underline; }

a:hover{ color:#FFFFFF; text-decoration:underline; }

</style>

<script language = javascript>

<!--


window.location.replace('http://www.internetmap.kr/entry/Waiting-for-the-blossom-VR-panorama');

window.location.href = "http://www.internetmap.kr/entry/Waiting-for-the-blossom-VR-panorama";


//--> 

</script>


</head>


<body>

<script src="tour.js"></script>


<div id="pano" style="width:100%; height:100%;">

<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>

<script>

embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", passQueryParameters:true});

</script>

</div>


</body>

====
여기에서 까만색은 krpano tools를 이용해 파노라마 투어를 만들었을 때 원래 생긴 코드입니다. 두번째 초록색으로 되어 있는 부분은 위에서 설명한 내용입니다. 

마지막으로 파란색 부분이 제가 해결이 안되어서 고민하다가 임의로 삽입한 부분입니다. 즉, 원래 이 부분이 없이 그냥 페이스북에 링크를 올리면, 파노라마가 embed 되기는 하는데, 링크를 클릭하면 이 파일이 시행되게 됩니다. 그런데, 사실 이 파일의 아랫부분에 있는 내용은 krpano로 만든 다른 파노라마를 실행시키기 위한 코드로서 이것만으로는 에러가 발생하게 됩니다. 그래서 이 파일을 실행시키면 제가 적어둔 블로그로 연결되도록 redirect하는 코드입니다.

어쨌든 그 결과... 제 페이스북에 이 파일(fb_flower.html)의 링크릴 올리는 순간, 아래처럼 작은 사진과 함께 삼각형 표시가 나타나고요~




이 플레이버튼을 누르면 아래처럼 직접 보이게 되었습니다.



===
기타 별도의 웹페이지에 따로 올렸을 경우, swf 만 독립적으로 있는 게 아니라, swf+xml 파일이 있는 경우, wordpress 에 올라간 경우 등등에 따라서 약간씩 손을 봐야 하는 것 같은데, 오늘은 이만 여기까지.!!!

민, 푸른하늘

댓글을 달아 주세요

  1. Favicon of http://smartmil.com BlogIcon 일본안티  수정/삭제  댓글쓰기

    우와, 정말 아름답습니다.

    2013.02.10 04:05 신고
  2. 올댓  수정/삭제  댓글쓰기

    하..어렵네요...저도 올리고 싶어요,.,ㅜ

    2015.02.27 09:56 신고
  3. 파노투어  수정/삭제  댓글쓰기

    허허.. Panotour로 제작한 html 을 수정 해봤는데도 되지가 않네요 아쉽아쉽ㅠㅠㅠ.

    2015.10.30 17:46 신고
  4. 롱키  수정/삭제  댓글쓰기

    swf 파일1개로 만들면 모바일에서 안보이지 않나요?

    2016.04.15 18:33 신고
    • Favicon of http://www.internetmap.kr BlogIcon 푸른하늘 푸른하늘이  수정/삭제

      옙. 이글을 쓸때쯤부터... 스마트폰에서 플래시 지원을 줄여갔습니다. 플래시 뷰어가 포함된 브라우저를 찾아 따로 설치해야만 보실 수 있습니다.

      2016.04.15 20:41 신고

BLOG main image
공간정보와 인터넷지도
제 관심사는 계속 바뀝니다. 이 블로그를 유지하는 동안에도 벌써 여러번 주제가 빠뀐 것 같습니다. 돌고 돌아 이제 고향으로 돌아왔습니다. 공간정보입니다. 세계를 측정하고, 그 기준을 세우고, 데이터를 효율적으로 공유하는 것이 공간정보에서 다루는 내용입니다. 4차산업혁명이 데이터 기반이라고들 합니다. 데이터는 그냥 모아둔다고 정보가 되지 않습니다. 표준에 따른 공통 스키마를 기반으로 만들어져야 합니다. 누구나 언제든지, 쉽고 투명하게 데이터를 가져다 쓸
by 푸른하늘이
Profile for bluesky61

달력

«   2018/12   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

카테고리

전체보기 (1588)
공간정보 (238)
구글어스 (829)
사진 (103)
드론/쿼드콥터 (239)
지오캐싱 (47)
기타 (131)
  • 4,549,078
  • 121474
TNM Media textcube get rss

공간정보와 인터넷지도

푸른하늘이's Blog is powered by Tistory. / Supported by TNM Media.
Copyright by 푸른하늘이 [ http://www.ringblog.com ]. All rights reserved.

Textcube TNM Media
푸른하늘이's Blog is powered by Tistory. Designed by Qwer999. Supported by TNM Media.