요즘 제가 파노라마 투어를 제작하는데 열을 올리고 있습니다. 일반 사진도 마찬가지겠지만, 파노라마 사진도 일반적으로 한군데에서 여러개를 찍게 됩니다. 이러한 파노라마들을 잘 연계시켜서 보여주도록 만든 게 파노라마 투어입니다.
이렇게 만들어진 파노라마 투어를 페이스북에 삽입시키는 방법을 찾아봤습니다. 그러니까... 파노라마의 링크나 작은 아이콘만 보이는 게 아니라, 아래 그림과 같이 직접 플레이를 시킬 수 있는 형태로 삽입하는 방법말입니다.
원래 링크를 공유하는 것이니까 클릭하면 볼 수는 있지만, 유튜브 영상을 보는 것처럼 페이스북을 떠나지 않고 파노라마를 볼 수 있는 방법이 있으면 더 좋겠죠.
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>
이 플레이버튼을 누르면 아래처럼 직접 보이게 되었습니다.
