Image-stitching and virtual tour solutions My account Updates
It is currently Sat Jul 26, 2014 2:19 pm

All times are UTC + 1 hour




Post new topic Reply to topic  [ 36 posts ]  Go to page 1, 2  Next
Author Message
 Post subject: panotour on facebook
PostPosted: Tue Jan 31, 2012 8:52 pm 
Offline
New member

Joined: Wed Jan 18, 2012 10:15 am
Posts: 7
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


Top
 Profile  
 
 Post subject:
PostPosted: Wed Feb 01, 2012 9:16 am 
Offline
Member
User avatar

Joined: Tue Jan 18, 2011 4:05 pm
Posts: 1571
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

_________________
Your User Account, Kolor Documentation, Kolor Youtube Channel


Top
 Profile  
 
 Post subject:
PostPosted: Wed Feb 01, 2012 3:31 pm 
Offline
New member

Joined: Wed Feb 01, 2012 3:27 pm
Posts: 8
Location: Devon, United Kingdom
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


Top
 Profile  
 
 Post subject:
PostPosted: Wed Feb 01, 2012 4:07 pm 
Offline
Member
User avatar

Joined: Tue Jan 18, 2011 4:05 pm
Posts: 1571
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:
<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

_________________
Your User Account, Kolor Documentation, Kolor Youtube Channel


Top
 Profile  
 
 Post subject:
PostPosted: Wed Feb 01, 2012 4:51 pm 
Offline
Member
User avatar

Joined: Sun Jul 24, 2011 5:00 pm
Posts: 72
Location: UK
bdd wrote:
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.

_________________
http://www.walkabout360.com/
http://www.virtualtourmanchester.com
http://www.virtualtourscheshire.com


Top
 Profile  
 
 Post subject:
PostPosted: Wed Feb 01, 2012 4:56 pm 
Offline
Member
User avatar

Joined: Tue Jan 18, 2011 4:05 pm
Posts: 1571
I thought that was what we wrote here :
http://www.autopano.net/wiki-en/Panotour_1.5_-_Web_publishing

Gérald

_________________
Your User Account, Kolor Documentation, Kolor Youtube Channel


Top
 Profile  
 
 Post subject:
PostPosted: Wed Feb 01, 2012 5:12 pm 
Offline
Member
User avatar

Joined: Sun Jul 24, 2011 5:00 pm
Posts: 72
Location: UK
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.

_________________
http://www.walkabout360.com/
http://www.virtualtourmanchester.com
http://www.virtualtourscheshire.com


Top
 Profile  
 
 Post subject:
PostPosted: Thu Feb 02, 2012 2:56 pm 
Offline
New member

Joined: Wed Feb 01, 2012 3:27 pm
Posts: 8
Location: Devon, United Kingdom
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.


Top
 Profile  
 
 Post subject:
PostPosted: Thu Feb 02, 2012 3:37 pm 
Offline
Member
User avatar

Joined: Tue Jan 18, 2011 4:05 pm
Posts: 1571
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:
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

_________________
Your User Account, Kolor Documentation, Kolor Youtube Channel


Top
 Profile  
 
 Post subject:
PostPosted: Sun Feb 05, 2012 4:37 pm 
Offline
New member

Joined: Wed Feb 01, 2012 3:27 pm
Posts: 8
Location: Devon, United Kingdom
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.


Top
 Profile  
 
 Post subject:
PostPosted: Mon Feb 06, 2012 9:23 am 
Offline
Member
User avatar

Joined: Tue Jan 18, 2011 4:05 pm
Posts: 1571
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

_________________
Your User Account, Kolor Documentation, Kolor Youtube Channel


Top
 Profile  
 
 Post subject:
PostPosted: Mon Feb 06, 2012 3:20 pm 
Offline
New member

Joined: Wed Feb 01, 2012 3:27 pm
Posts: 8
Location: Devon, United Kingdom
Hi Gerald,

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

Curtis.


Top
 Profile  
 
 Post subject:
PostPosted: Tue Feb 28, 2012 11:35 pm 
Offline
Member

Joined: Sun Sep 06, 2009 12:08 pm
Posts: 579
Location: Ørsta Norway
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





_________________
Olympus OM-D E-M1, Panasonic 8mm f3.5 fisheye, Leica 25mm f1.4, Olympus 75mm f1.8, Canon 100-400mm f/4.5-5.6 L
Seitz VRdrive2
Intel i7 980X, 48GB RAM, Win7 64bit, SSD RAIDs


Top
 Profile  
 
 Post subject:
PostPosted: Wed Feb 29, 2012 8:19 am 
Offline
Member
User avatar

Joined: Tue Jan 18, 2011 4:05 pm
Posts: 1571
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



_________________
Your User Account, Kolor Documentation, Kolor Youtube Channel


Top
 Profile  
 
 Post subject:
PostPosted: Wed Feb 29, 2012 9:23 am 
Offline
Member

Joined: Sun Sep 06, 2009 12:08 pm
Posts: 579
Location: Ørsta Norway
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

_________________
Olympus OM-D E-M1, Panasonic 8mm f3.5 fisheye, Leica 25mm f1.4, Olympus 75mm f1.8, Canon 100-400mm f/4.5-5.6 L
Seitz VRdrive2
Intel i7 980X, 48GB RAM, Win7 64bit, SSD RAIDs


Top
 Profile  
 
 Post subject:
PostPosted: Thu Mar 01, 2012 7:30 pm 
Offline
Member
User avatar

Joined: Sun Jul 24, 2011 5:00 pm
Posts: 72
Location: UK
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.

_________________
http://www.walkabout360.com/
http://www.virtualtourmanchester.com
http://www.virtualtourscheshire.com


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

Top
 Profile  
 
 Post subject:
PostPosted: Thu Mar 01, 2012 9:00 pm 
Offline
Member

Joined: Sun Sep 06, 2009 12:08 pm
Posts: 579
Location: Ørsta Norway
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

_________________
Olympus OM-D E-M1, Panasonic 8mm f3.5 fisheye, Leica 25mm f1.4, Olympus 75mm f1.8, Canon 100-400mm f/4.5-5.6 L
Seitz VRdrive2
Intel i7 980X, 48GB RAM, Win7 64bit, SSD RAIDs


Top
 Profile  
 
 Post subject:
PostPosted: Thu Mar 01, 2012 9:28 pm 
Offline
Member
User avatar

Joined: Sun Jul 24, 2011 5:00 pm
Posts: 72
Location: UK
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.

_________________
http://www.walkabout360.com/
http://www.virtualtourmanchester.com
http://www.virtualtourscheshire.com


Top
 Profile  
 
 Post subject:
PostPosted: Mon Mar 26, 2012 3:23 pm 
Offline
Member

Joined: Fri Oct 30, 2009 12:34 pm
Posts: 115
Location: ITALY
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.


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


Top
 Profile  
 
 Post subject:
PostPosted: Mon Mar 26, 2012 4:29 pm 
Offline
Member

Joined: Fri Oct 30, 2009 12:34 pm
Posts: 115
Location: ITALY
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.

Top
 Profile  
 
 Post subject:
PostPosted: Mon Mar 26, 2012 5:24 pm 
Offline
Member
User avatar

Joined: Sun Jul 24, 2011 5:00 pm
Posts: 72
Location: UK
Marknot wrote:
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.

_________________
http://www.walkabout360.com/
http://www.virtualtourmanchester.com
http://www.virtualtourscheshire.com


Top
 Profile  
 
 Post subject:
PostPosted: Mon Mar 26, 2012 5:40 pm 
Offline
Member

Joined: Fri Oct 30, 2009 12:34 pm
Posts: 115
Location: ITALY
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.

Top
 Profile  
 
 Post subject:
PostPosted: Fri Nov 16, 2012 9:57 pm 
Offline
Member
User avatar

Joined: Wed Oct 17, 2012 9:37 pm
Posts: 80
Location: Colombia
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.

_________________
Luis Velasquez
Colombia
www.airphotocolombia.com


Top
 Profile  
 
 Post subject:
PostPosted: Sat Mar 30, 2013 12:50 am 
Offline
New member

Joined: Sat Mar 30, 2013 12:26 am
Posts: 5
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.

Top
 Profile  
 
 Post subject:
PostPosted: Tue Apr 16, 2013 1:27 pm 
Offline
New member

Joined: Sat Mar 30, 2013 12:26 am
Posts: 5
bump...


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 36 posts ]  Go to page 1, 2  Next

All times are UTC + 1 hour


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group