How to make your panoramas auto-postable on facebook!

Beginner

Wednesday, October 5th 2011, 5:47pm

Hi,
Just started using krpano a couple of days ago and I found the great guide by Patrick Cheatham on how to post your panoramas on facebook: http://patrickcheatham.com/posting-360-d…mas-to-facebook

I wanted to automate this process and did the following for single-swf-pano:
1. Changed the extension name of swfkrpano_inline-js-singleswf.html (in templates/html/) to .php, then added this in the very beginning of it:

Source code

<?php
$domain = ('http://yourwebsite.com'); // your website
$url = dirname($_SERVER['PHP_SELF']) . '/'; // Gets the current folder path
$file = pathinfo(__FILE__, PATHINFO_FILENAME); // Gets the current filename without extension
$fb = ('_preview.jpg'); // the name suffix for the facebook preview image
?>

2. Then add this anywhere inside the <head></head> and change to your facebook ID:

Source code

<meta property="fb:page_id" content="your_fb_ID" />
<meta property="og:title" content="[NAME]" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php echo $domain . $url . $file . $fb;?>" />
<meta property="og:url" content="<?php echo $domain ?>" />
<meta property="og:video" content="<?php echo $domain . $url . $file .'.swf';?>" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="398" />
<meta property="og:video:height" content="460" />

3. Change the extension from .html to .php on the following rows in either singleswf.config, singleswfmultires.config or singleswftiled.config depending on which droplet your using. Should look like this:

	Source code
1 2	htmlpath=%INPUTPATH%/%BASENAME%.php htmltemplate=html/swfkrpano_inline-js-singleswf.php

4. Now when you drag your panorama picture to any of the single-swf droplets and upload the files to your server, you will get a yourpanorama.php that you can link to on facebook and it will automatically show a thumbnail with a play button which can be clicked and viewed right inside facebook. Just remember to create a preview image with the same name as your swf but add the suffix “_preview.jpg”.

DONE!

EXTRA: If you want to make a yourpanorama_preview.jpg easier you can actually make a copy of "MAKE PREVIEW (CUBESTRIP) droplet.bat" and edit this row:

	Source code
1 2 3 4 5 6 7	:SPHEREINPUT FOR %%V in (%) do "%~dp0\kmakepreview" -cs -smooth=25 "%%~V" into this: :SPHEREINPUT FOR %%V in (%) do "%~dp0\kmakepreview" -smooth=0 "%%~V"

This will produce a sharp yourpanorama_preview.jpg that facebook will use as thumbnail (it will be smaller off course).

I Hope someone finds this useful, at least I do :D

Go to the top of the page

zackyd

Beginner

Posts: 42

2

Thursday, October 6th 2011, 3:15am

Got it working, thanks for the great guide!

I am having trouble getting it to show up as an image you can hit the play button. Do you need to be cleared by Facebook (whitelisted) before they will show the panos?

here is my header

<?php
$domain = ('http://panoviewimaging.com'); // your website
$url = dirname($_SERVER['PHP_SELF']) . '/'; // Gets the current folder path
$file = pathinfo(__FILE__, PATHINFO_FILENAME); // Gets the current filename without extension
$fb = ('_preview.jpg'); // the name suffix for the facebook preview image
?>
<!DOCTYPE html>
<html>
<head>
<title>OMSI</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" />
<style>
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>
<meta property="fb:page_id" content="1063740152" />
<meta property="og:title" content="omsi" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php echo $domain . $url . $file . $fb;?>" />
<meta property="og:url" content="<?php echo $domain ?>" />
<meta property="og:video" content="<?php echo $domain . $url . $file .'.swf';?>" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="398" />
<meta property="og:video:height" content="460" />
</head>
<body>

This post has been edited 3 times, last edit by "zackyd" (Oct 6th 2011, 4:07am)

Go to the top of the page

Sam Rohn

Trainee

Posts: 110

Location: Brooklyn, New York

Occupation: 360° VR Photographer

3

Thursday, October 6th 2011, 5:42am

pear, nice tutorial on editing the templates, thanks :)

zack, try running your link through the fb debugger, this will clear fb's cache for the link so you can see changes from the last time fb saw it

http://developers.facebook.com/tools/debug

whitelisting is no longer required

also see this page on the fb pano photographers group

http://www.facebook.com/groups/panoramic…72042586173194/

sam

Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

Go to the top of the page

zackyd

Beginner

Posts: 42

4

Thursday, October 6th 2011, 7:53am

I got it to work when i do it just with HTML. The PHP does not seem to fill the data correctly, unless i was supposed to enter more data.

I thought i would be able to view the panorama directly on a wall, but that does not seem to be the case.. any tips for this? I have seen it done, it just looks like a video with play button.

edit:

just read that you can not view the panos in HTTPS. that is unfortunate.

This post has been edited 1 times, last edit by "zackyd" (Oct 6th 2011, 8:38am)

Go to the top of the page

pear

Beginner

Posts: 12

5

Thursday, October 6th 2011, 3:39pm

Quoted from "zackyd"

Got it working, thanks for the great guide!

I am having trouble getting it to show up as an image you can hit the play button. Do you need to be cleared by Facebook (whitelisted) before they will show the panos?

here is my header

<?php
$domain = ('http://panoviewimaging.com'); // your website
$url = dirname($_SERVER['PHP_SELF']) . '/'; // Gets the current folder path
$file = pathinfo(__FILE__, PATHINFO_FILENAME); // Gets the current filename without extension
$fb = ('_preview.jpg'); // the name suffix for the facebook preview image
?>
<!DOCTYPE html>
<html>
<head>
<title>OMSI</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" />
<style>
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>
<meta property="fb:page_id" content="1063740152" />
<meta property="og:title" content="omsi" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php echo $domain . $url . $file . $fb;?>" />
<meta property="og:url" content="<?php echo $domain ?>" />
<meta property="og:video" content="<?php echo $domain . $url . $file .'.swf';?>" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="398" />
<meta property="og:video:height" content="460" />
</head>
<body>

Do you have a yourpanoramaname_preview.jpg in the same folder as the yourpanoramaname.php file? If you look at the source code (CTRL + U) of your uploaded yourpanorama.php file. Copy the url in the <meta property="og:image" content="http://COPY_THIS" /> field and paste in the browser address bar and see if the preview_image shows up. If you have a too big preview image facebook will have problems generating a thumbnail for it. I discovered that sometimes facebook can handle a large preview image and sometimes not. But just make sure you DO have a yourpanoramaname_preview.jpg in the same folder.

Go to the top of the page