사진/360 파노라마

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

하늘이푸른오늘 2013. 1. 6. 15:33

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


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


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



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" /> 

<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 에 올라간 경우 등등에 따라서 약간씩 손을 봐야 하는 것 같은데, 오늘은 이만 여기까지.!!!

민, 푸른하늘