panotour on facebook

[kosmomedia]

panotour on facebook

by kosmomedia » Tue Jan 31, 2012 8:52 pm

Hello friends,

I want to embed my panotour on facebook. Here I have found an instruction http://www.autopano.net/wiki-en/action/view/Panotour_-_Web_publishing but I don´t understand it


I load the example from here:

To ease this integration to social networks, you will find a HTML template sample that can be used in Panotour Pro; already containing the meta-tags expected by Facebook, in this link: http://www.kolor.com/tutorials/SocialNetworks.zip

Then I put in my data. Now what do I have to to with this html.file? Do I have to load it up to the server and embed it to fbml on facebook?

greets stathi

[bdd]

by bdd » Wed Feb 01, 2012 9:16 am

Hello,

The files contained in the zip file you downloaded have to be copied in the templates directory of Panotour Pro (PTP).
To find the templates directory, open Panotour Pro, and choose the menu "Edit/Open templates directory".

Copy the zip in the sub-directory "html", and unzip it there.

Close PTP, and reopen it.

Create your tour, and choose the new html template in the "Build" tab.
Edit, the generated html file in the generated tour.
Modify the tags, that PTP was not able to fill (mainly the URL of the tour)

Upload your tour on your web server.

Go to your Facebook account, and try to make a post containing an URL to the uploaded tour.

Gérald

[Pano360.co.uk]

by Pano360.co.uk » Wed Feb 01, 2012 3:31 pm

I've followed your instructions to embed a panotour into facebook but all I end up with is a link in the post that opens a new tab with the virtual tour in, am I missing something?

http://www.facebook.com/Pano360Devon

[bdd]

by bdd » Wed Feb 01, 2012 4:07 pm

The full instructions are here :
http://www.autopano.net/wiki-en/action/view/Panotour_-_Web_publishing


Did you set the right values for the 3 followings meta tags ?
Panotour Pro do not know them, so you have to edit the HTML file and set them by yourself.

<meta property="og:url" content="http://www.MyWebSite.com/MyTourDirectoryPath/MyTourHTMLFile.html" />
<meta property="og:video" content="http://www.MyWebSite.com/MyTourDirectoryPath/MyTourSWFFile.swf"/>
<meta property="og:image" content="http://www.MyWebSite.com/MyTourDirectoryPath/MyTourPreview.png"/>


I looked at the content of your HTML files, and they are quite emmpty.
Here is the content of the HTML file for the Hotel tour : http://www.pano360.co.uk/virtualtours/hotel/hotel-virtualtour.html

Code: Select all

<object width="800" height="450">
<embed src="hotel-virtualtour.swf" width="800" height="450" allowFullScreen="true">
</embed>
</object>

Remember also, that Facebook is looking for a "movie" meta tag in the HTML file. This movie will be the flash file that Facebook will play.
So you cannot have multiple tours in a single HTML page if you want them to be played inside Facebook.

But I think that our instructions are a bit dated.
It seems that you can do it a bit easier now in Facebook.
For example see the following facebook page :
http://www.facebook.com/mawbycreative?sk=app_284279531622402

And the original page :
http://facebook.view360vr.com/clients/padma/

It seems that the entire webpage is played, not only the flash player.


Gérald

[firefire]

by firefire » Wed Feb 01, 2012 4:51 pm

But I think that our instructions are a bit dated.


Gérald

Since this question comes up reguarly.... would you be able to give a step by step instructions on what/how to do it for others who want the answer to this question.

Regards,

Neil.

[bdd]

by bdd » Wed Feb 01, 2012 4:56 pm

I thought that was what we wrote here :
http://www.autopano.net/wiki-en/Panotour_1.5_-_Web_publishing

Gérald

[firefire]

by firefire » Wed Feb 01, 2012 5:12 pm

Didn't know about that!......I was just going off what you put in your reply saying that the instructions were dated......Glad you pointed me to that link anyway!


Thanks,

Neil.

[Pano360.co.uk]

by Pano360.co.uk » Thu Feb 02, 2012 2:56 pm

This was acutally the virtual tour I was trying to put into facebook following your instructions, it was output with the social.html template and the code altered.

http://www.pano360.co.uk/virtualtours/facebook/merlin-farm/eco-cottage/eco-cottage-virtualtour.html

With reference to the example supplied http://www.facebook.com/mawbycreative?s … 9531622402 this has just been put into an iFrame within facebook, very easy to do this now. Take a look at the tabs on my facebook page http://www.facebook.com/Pano360Devon

What I wanted to do and thought that is what the instructions intended, was to place the link into a post on my wall, the png would be inserted and when you click on the png it would open the usual popup with the interactive tour. Possible?

Curtis.

[bdd]

by bdd » Thu Feb 02, 2012 3:37 pm

Hello Curtis,

Yes it is possible.

Lets take the example of your following tour :
http://www.pano360.co.uk/virtualtours/facebook/merlin-farm/eco-cottage/eco-cottage-virtualtour.html

You added all the wanted metatags in this page.
So it should be working.
BUT.
You did some errors when writing those metatags.

A good way to find errors in Facebok OpenGraph tags, is to "debug" your web page.

Facebooks provides an online debugger :
http://developers.facebook.com/tools/debug

If you enter your URL in the URL field of the debugger, you get the following errors :

Code: Select all

Errors That Must Be Fixed

Valeur d’objet non valable :    Object at URL 'http://www.pano360.co.uk/virtualtours/facebook/merlin-farm/eco-cottage/eco-cottage-virtualtour.html' of type 'video' is invalid because the given value '$http://www.pano360.co.uk/virtualtours/facebook/merlin-farm/eco-cottage/eco-cottage-virtualtour.html' for property 'og:url' could not be parsed as type 'url'.

I think that if you remove the "$" character at the beginning of the value, it should work fine.

BUT, another BUT.
Facebook cache mechanism will not allow you to see your modifications, unless you re-debug your web page.

That's why it is really important to keep the debugger URL somewhere, because you'll have to use it quite often (if you change the preview image, if you change the tour itself, etc...) .

Gérald

[Pano360.co.uk]

by Pano360.co.uk » Sun Feb 05, 2012 4:37 pm

Hi Gerald,

Many thanks for the info, change what you suggested on a new tour, debugged, put into new post, can click on the png, but opens only white box, any ideas?

http://www.pano360.co.uk/virtualtours/social/merlin-farm/trevone-cottage/trevone-cottage-virtualtour-soc.html

http://www.facebook.com/Pano360Devon - Top Post

Curtis.

[bdd]

by bdd » Mon Feb 06, 2012 9:23 am

Hello Curtis,

You used "Domains restriction" for your tour.

So you are in the case named "Case of a tour with nothing embeded, with protection (restricted domains)" in our documentation :
http://www.autopano.net/wiki-en/action/view/Panotour_-_Web_publishing

You did not use the correct syntax for the "video" tag. In such case you have to suffix the "video" url by the URL of the XML file.

Gérald

[Pano360.co.uk]

by Pano360.co.uk » Mon Feb 06, 2012 3:20 pm

Hi Gerald,

Many thanks for your help, found what you meant in the code and got it all working now, great!

Curtis.

[leifs]

by leifs » Tue Feb 28, 2012 11:35 pm

I have read the posts including http://www.autopano.net/wiki-en/Panotou … publishing
Still I can't get it work.

the html includes this:
<!-- Open Graph tags for Facebook -->
<meta property="og:url" content="http://www.rundskuer.no/panotour/sundalsnipa/index.html" />
<meta property="og:video" content="http://www.rundskuer.no/panotour/sundalsnipa/virtualtour.swf?xml=http://www.rundskuer.no/panotour/sundalsnipa/virtualtour.xml"/>
<meta property="og:image" content="http://www.rundskuer.no/facebook/thumb_sundalsnipa.jpg"/>
<meta property="og:title" content="Sundalsnipa 26.2.2012" />
<meta property="og:description" content="snurrebilete" />
<meta property="og:type" content="video" />
<meta property="og:video:height" content="350" />
<meta property="og:video:width" content="350" />
<meta property="og:video:type" content="application/x-shockwave-flash" />

In facebook the thumb is shown correctly with a playbutton, but when the playbutton is pushed it is a open space where the pano is supposed to be shown.
Anybody ?

leifs

[bdd]

by bdd » Wed Feb 29, 2012 8:19 am

Hello,

I tried to share your page on my Facebook account, and it works. Maybe you did something since your last post Leifs ?

Gérald

[leifs]

by leifs » Wed Feb 29, 2012 9:23 am

that's funny !
it still doesn't work for me
I have done a couple of tries and to update the facebook cache I have used the debugger
maybe it is a cache somewhere else or maybe a safety restriction on my computer
I will have to do some research.

leifs

[firefire]

by firefire » Thu Mar 01, 2012 7:30 pm

Could someone help me before I pull all my hair out (and I didn't have alot in the first place!)

Really struggling to get it onto Facebook, I have followed ALL the instructions, downloaded the Socialnetwork html file, altered it with all the necessary things that are mentioned, it will not embed on Facebook...and worse when clicked you just get the white screen with no pano at all just the Project " " at the topleft.
I have even Debugged it, restricted domains tried it that way, added the XML file part as well....still no joy...

Here is the HTML file, could someone tell me where I have gone wrong?!!



Hoping someone can help!!

Thanks,

Neil.

Last edited by firefire on Sat Mar 17, 2012 9:19 pm, edited 1 time in total.

[leifs]

by leifs » Thu Mar 01, 2012 9:00 pm

I start to think that "pano on facebook" is not one single challenge.
bdd made "it" work. after some thinking I noticed bdd had shared the pano, and that sharing it worked.

what I tried was to put it into the newsfeed, and that is maybe another case.
anyhow I have tried to "play the pano" in the newsfeed from four different PC's and it does not work on any.
I have asked a facebook-friend to play it from the newsfeed, and he also got this white space.

For now I have concluded that the Socialnetwork html file template work for sharing and maybe for a "facebook site" but not for playing in the newfeed

leifs

[firefire]

by firefire » Thu Mar 01, 2012 9:28 pm

Thanks Leifs,

I spent ALL day trying to make it work!!
I will try tomorrow without using the Social HTML and let you know how I go on....it's so frustrating!!


Neil.

[Marknot]

by Marknot » Mon Mar 26, 2012 3:23 pm

Hello, i've problem with the integration, can you show the code that you have used for facebook?? i saw your html file, it's i-device compatible with nothing embed, but i cannot embed on facebook. Thanks in advance.

The full instructions are here :
http://www.autopano.net/wiki-en/action/view/Panotour_-_Web_publishing


Did you set the right values for the 3 followings meta tags ?
Panotour Pro do not know them, so you have to edit the HTML file and set them by yourself.

<meta property="og:url" content="http://www.MyWebSite.com/MyTourDirectoryPath/MyTourHTMLFile.html" />
<meta property="og:video" content="http://www.MyWebSite.com/MyTourDirectoryPath/MyTourSWFFile.swf"/>
<meta property="og:image" content="http://www.MyWebSite.com/MyTourDirectoryPath/MyTourPreview.png"/>


I looked at the content of your HTML files, and they are quite emmpty.
Here is the content of the HTML file for the Hotel tour : http://www.pano360.co.uk/virtualtours/hotel/hotel-virtualtour.html

Code: Select all

<object width="800" height="450">
<embed src="hotel-virtualtour.swf" width="800" height="450" allowFullScreen="true">
</embed>
</object>

Remember also, that Facebook is looking for a "movie" meta tag in the HTML file. This movie will be the flash file that Facebook will play.
So you cannot have multiple tours in a single HTML page if you want them to be played inside Facebook.

But I think that our instructions are a bit dated.
It seems that you can do it a bit easier now in Facebook.
For example see the following facebook page :
http://www.facebook.com/mawbycreative?sk=app_284279531622402

And the original page :
http://facebook.view360vr.com/clients/padma/

It seems that the entire webpage is played, not only the flash player.


Gérald

[Marknot]

by Marknot » Mon Mar 26, 2012 4:29 pm

I can show the link and the play button work on timeline, but i can't create a page like this:
http://www.facebook.com/mawbycreative?sk=app_284279531622402
Wich code have you used to show the html page inside facebook ( or wich app). I'm on the right way but i miss something. Thanks Thanks

Last edited by Marknot on Mon Mar 26, 2012 4:33 pm, edited 1 time in total.

[firefire]

by firefire » Mon Mar 26, 2012 5:24 pm

I can show the link and the play button work on timeline, but i can't create a page like this:
http://www.facebook.com/mawbycreative?sk=app_284279531622402
Wich code have you used to show the html page inside facebook ( or wich app). I'm on the right way but i miss something. Thanks Thanks

Not totally figured out how to do it yet but here's your starting point.....

http://www.socialmediaexaminer.com/top-10-facebook-apps-for-building-custom-pages-tabs/#more-10487


Neil.

[Marknot]

by Marknot » Mon Mar 26, 2012 5:40 pm

Thanks, right know i've solved, and if can help anyone:
1. Customize Html FILE ( i'm using not embed for i-device )

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Title</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta property="og:url" content="http://www.yourwebsite.com/file.html" />
<meta property="og:video" content="http://www.yourwebsite.com/file.swf?xml=http://www.yourwebsite.com/file.xml"/>
<meta property="og:image" content="http://www.yourwebsite.com/preview.jpeg" /> (will be used only for the timeline)
<meta property="og:title" content="Name" />
<meta property="og:description" content="Description" />
<meta property="og:type" content="video" />
<meta property="og:video:height" content="350" />
<meta property="og:video:width" content="350" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<style type="text/css">
@media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
* { padding: 0; margin: 0; }
html { height: 100%; }
body { height: 100%; overflow:hidden; }
#container { height: 100%; min-height: 100%; width: 90%; margin: 0 auto; }
</style>
</head>
<body>
<script src="swfobject/swfkrpano.js"></script>
<div id="container">
<h1>HEAD TITLE</h1>
<div id="panoDIV" style="height:90%;">
<script>
embedpano({target:"panoDIV",swf:"XXXXX.swf"});
</script>
<noscript>
<div id="tour">
<object width="100%" height="100%">
<embed src="XXXXXX.swf" width="100%" height="100%" allowFullScreen="true"></embed>
</object>
</div>
</noscript>
</div>
</div>
</body>
</html>

2. Add an app to your facebook page like: "Static HTML: iframe tabs"

3. Insert the code like this:

<script>
location.href="http://www.yourwebsite.com/file.html"
</script>

DONE!!!

Last edited by Marknot on Mon Mar 26, 2012 5:41 pm, edited 1 time in total.

[Air Photo Colombia]

by Air Photo Colombia » Fri Nov 16, 2012 9:57 pm

wow --lock mom whit no hands-- thanks so much for this code.

check my Facebook and tell me how its look.

http://www.facebook.com/Aerofotografia

thanks again.

[Andras Jacso]

by Andras Jacso » Sat Mar 30, 2013 12:50 am

Hi Folks,

I've managed to post a panorama onto my timeline within 3 hrs thanks to the contributors of this topic.
But the containing frame is a bit overflown on the right side no matter what size I set.

If I set:
<meta itemprop="width" content="384" />
<meta itemprop="height" content="224" />

or

<meta itemprop="width" content="400" />
<meta itemprop="height" content="224" />

the frame will overflow.

Any idea on this?

Last edited by Andras Jacso on Sun Mar 31, 2013 12:50 pm, edited 1 time in total.

[Andras Jacso]

by Andras Jacso » Tue Apr 16, 2013 1:27 pm

bump...