How to make your panoramas auto-postable on facebook!

pear

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-de…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:

PHP

<?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:

PHP

<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:

Code

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:

Code

: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

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>

Sam Rohn

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/panoram…72042586173194/

sam

zackyd

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.

pear

Zitat von 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>

Alles anzeigen

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.

How to make your panoramas auto-postable on facebook!

Jetzt mitmachen!

Benutzer online in diesem Thema