Hi,
As you may know I have a tutorial that show how to use a droplet to create a set of files for embedding 360˚ panoramas into Facebook timelines.
I've had an inquiry from a photographer using my droplet tutorial that the panorama wasn't showing up in the Facebook timeline. I've done a bit of testing and it seems as though Facebook has changed something in the way 360˚ panoramas embedded in the timeline work. Just a few days ago if you had an embedded panorama and you were on a device or browser that didn't have Flash installed you were presented with an HTML version. Unfortunately that is no longer the case. I've gone back through the timeline and checked previous postings, both my own and others, and they all display the same issue.
I'm on an iMac and in Firefox, without Flash, when I click on the start button I see a grey square with the notification "This plugin is disabled" and on Safari, without Flash, I just get a white square. On my iPad, iPhone and Samsung Tab tapping on the image in the timeline opens the panorama.
So it seems as though it's not working on a browser on the desktop on both Mac and PC's
Tony
Facebook Embed in Timeline Issue
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
I've been looking further into this issue and I'm wondering if it's got something to do with the fact that Facebook encode the basepath URL.
For example in the index.html Pano2VR produces the following code....
However once it's gone through the Facebook Debugger it now looks like this...
OG:Video
Secure URL
SRC
I'm not a coder and I've been trying to find out exactly what the ?basepath does but it I cut and past the following url http%3A%2F%2Ftonyredhead.photography%2F ... s-Ayers%2F into a browser I get error messages
Google: Your search - http%3A%2F%2Ftonyredhead.photography%2F360%2FSocial%2FAD-Fringe ... - did not match any documents.
Firefox: Firefox can't find the server at http://www.http%3a%2f%2ftonyredhead.photography%2f360%2fsocial%2fad-fringe-illuminations-ayers%2f.
Safari: Your search - http%3A%2F%2Ftonyredhead.photography%2F360%2FSocial%2FAD-Fringe ... - did not match any documents.
I'm just wondering if the basepath url is used if Flash is not detected and hoping someone with more coding experience could shed some light on the issue.
cheers,
Tony
For example in the index.html Pano2VR produces the following code....
Code: Select all
<meta property="og:video" content="http://tonyredhead.photography/360/Social/AD-Fringe-Illuminations-Ayers/AD-Fringe-Illuminations-Ayers-FLASH.swf?basepath=http://tonyredhead.photography/360/Social/AD-Fringe-Illuminations-Ayers/"/>
OG:Video
Code: Select all
{
"url": "http:\/\/tonyredhead.photography\/360\/Social\/AD-Fringe-Illuminations-Ayers\/AD-Fringe-Illuminations-Ayers-FLASH.swf?basepath=http\u00253A\u00252F\u00252Ftonyredhead.photography\u00252F360\u00252FSocial\u00252FAD-Fringe-Illuminations-Ayers\u00252F",
"secure_url": "https:\/\/tonyredhead.photography\/360\/Social\/AD-Fringe-Illuminations-Ayers\/AD-Fringe-Illuminations-Ayers-FLASH.swf?basepath=https\u00253A\u00252F\u00252Ftonyredhead.photography\u00252F360\u00252FSocial\u00252FAD-Fringe-Illuminations-Ayers\u00252F",
"type": "application\/x-shockwave-flash",
"width": 640,
"height": 480
}
Code: Select all
https://tonyredhead.photography/360/Social/AD-Fringe-Illuminations-Ayers/AD-Fringe-Illuminations-Ayers-FLASH.swf?basepath=https%3A%2F%2Ftonyredhead.photography%2F360%2FSocial%2FAD-Fringe-Illuminations-Ayers%2F
Code: Select all
http://tonyredhead.photography/360/Social/AD-Fringe-Illuminations-Ayers/AD-Fringe-Illuminations-Ayers-FLASH.swf?basepath=http%3A%2F%2Ftonyredhead.photography%2F360%2FSocial%2FAD-Fringe-Illuminations-Ayers%2F
Google: Your search - http%3A%2F%2Ftonyredhead.photography%2F360%2FSocial%2FAD-Fringe ... - did not match any documents.
Firefox: Firefox can't find the server at http://www.http%3a%2f%2ftonyredhead.photography%2f360%2fsocial%2fad-fringe-illuminations-ayers%2f.
Safari: Your search - http%3A%2F%2Ftonyredhead.photography%2F360%2FSocial%2FAD-Fringe ... - did not match any documents.
I'm just wondering if the basepath url is used if Flash is not detected and hoping someone with more coding experience could shed some light on the issue.
cheers,
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Hi Tony,
in coding, in this case for js, base path is used to keep the code simple, easy readable and changes concerning the path is fast to do.
For example:
You habe your pano and the fils stored like this:
The images are stored in:
etc.
In coding instead of writing every time the full path you define a basepath and make all internal links referencing to it. That means:
and inside the index.html all is linked as:
and in the js-files you see:
So when you put the basepath in the browser nothing could be found - you did not "ask" for a specific file you gave only a path to to whatevercouldbethere. Like I give you a streetname like "John Doe" without country and city - you will not find something. Because you didn't even know that I search a street. Could be a book, my grandfather or a galaxy....
The encoding/coding itself seems correct. But I miss some essential parts in your file (the video-Tag from my panos in Facebook):
In your meta-Tag the concrete files are missing! As "pano2vr_player.swf" and the pano/skin-xmls...
in coding, in this case for js, base path is used to keep the code simple, easy readable and changes concerning the path is fast to do.
For example:
You habe your pano and the fils stored like this:
Code: Select all
http://www.myServer.com/subfolder/anotherSubfolder/maybeYear/maybeMonth/index.html
Code: Select all
http://www.myServer.com/subfolder/anotherSubfolder/maybeYear/maybeMonth/images/yourImage.jpg
http://www.myServer.com/subfolder/anotherSubfolder/maybeYear/maybeMonth/images/Tiles/Tile1.jpg
In coding instead of writing every time the full path you define a basepath and make all internal links referencing to it. That means:
Code: Select all
basepath = http://www.myServer.com/subfolder/anotherSubfolder/maybeYear/maybeMonth/
Code: Select all
<img src="images/yourImage.jpg" />
Code: Select all
'src',basePath + '../images/yourImage.jpg');
The encoding/coding itself seems correct. But I miss some essential parts in your file (the video-Tag from my panos in Facebook):
Code: Select all
<meta property="og:video" content="http://www.maServer.com/Sub1/Sub2/pano2vr_player.swf?basepath=http://www.myServer.com/Sub1/Sub2/&panoxml=http://www.myServer.com/Sub1/Sub2/pano.xml&skinxml=http://www.myServer.com/Sub1/Sub2/skin.xml"/>
Have a nice day
Christian
Christian
Hi Christian,
Thanks for that, your explanation of the base path makes it much easier to understand.
As far as the code goes I'm using the embed_p2vr 2.ggt downloaded from the blog post http://ggnome.com/wiki/Embedding_and_fo ... _(Pano2VR)
The HTML created on output looks like this...
Using Facebook Debugger it ends up like this...
In the section "These are the raw tags that we found" all of the URLS to the project are unencoded and correct.
In the section "Based on the raw tags, we constructed the following Open Graph properties" In the og:video section the first part of the URL has \/\/ slashes in place of the / slash. However in the second part after the ?basepath FB has encoded the : and the / slashes with \u00253A and \u00252F
In the section "Type of Share" we end up with basepath=https%3A%2F%2Ftonyredhead.photography%2F360%2FSocial%2FAD-Fringe-Illuminations-Ayers%2F
So I'm not sure what's going on but the original data output from Pano2VR and sent to FB seems to be correct.
Tony
Thanks for that, your explanation of the base path makes it much easier to understand.
As far as the code goes I'm using the embed_p2vr 2.ggt downloaded from the blog post http://ggnome.com/wiki/Embedding_and_fo ... _(Pano2VR)
The HTML created on output looks like this...
Code: Select all
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Adelaide Fringe Illuminations</title>
<meta name="Title" content="Adelaide Fringe Illuminations" />
<meta property="og:title" content="Adelaide Fringe Illuminations" />
<meta name="twitter:title" content="Adelaide Fringe Illuminations" />
<meta itemprop="name" content="Adelaide Fringe Illuminations" />
<meta name="Author" content="Tony Redhead" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="copyright"content="2015 Tony Redhead" />
<meta name="Description" content="Elder Hall at Night" />
<meta property="og:description" content="Elder Hall at Night" />
<meta name="twitter:description" content="Elder Hall at Night" />
<meta itemprop="description" content="Elder Hall at Night" />
<meta name="url" content="http://tonyredhead.photography" />
<meta property="og:site_name" content="http://tonyredhead.photography" />
<meta name="directory" content="360/Social/AD-Fringe-Illuminations-Ayers/" />
<meta property="og:url" content="http://tonyredhead.photography/360/Social/AD-Fringe-Illuminations-Ayers/index.html" />
<meta property="og:type" content="article" />
<link rel="image_src" href="http://tonyredhead.photography/360/Social/AD-Fringe-Illuminations-Ayers/AD-Fringe-Illuminations-Ayers-FBTM.jpg" />
<meta property="og:image" content="http://tonyredhead.photography/360/Social/AD-Fringe-Illuminations-Ayers/AD-Fringe-Illuminations-Ayers-FBTM.jpg" />
<meta property="og:image:secure_url" content="https://tonyredhead.photography/360/Social/AD-Fringe-Illuminations-Ayers/AD-Fringe-Illuminations-Ayers-FBTM.jpg" />
<meta name="twitter:image:src" content="http://tonyredhead.photography/360/Social/AD-Fringe-Illuminations-Ayers/AD-Fringe-Illuminations-Ayers-FBTM.jpg" />
<meta itemprop="image" content="http://tonyredhead.photography/360/Social/AD-Fringe-Illuminations-Ayers/AD-Fringe-Illuminations-Ayers-FBTM.jpg" />
<meta property="og:video" content="http://tonyredhead.photography/360/Social/AD-Fringe-Illuminations-Ayers/AD-Fringe-Illuminations-Ayers-FLASH.swf?basepath=http://tonyredhead.photography/360/Social/AD-Fringe-Illuminations-Ayers/"/>
<meta property="og:video:secure_url" content="https://tonyredhead.photography/360/Social/AD-Fringe-Illuminations-Ayers/AD-Fringe-Illuminations-Ayers-FLASH.swf?basepath=https://tonyredhead.photography/360/Social/AD-Fringe-Illuminations-Ayers/"/>
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta name="video_height" content="480" />
<meta name="video_width" content="640" />
<meta property="og:video:height" content="480" />
<meta property="og:video:width" content="640" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
In the section "These are the raw tags that we found" all of the URLS to the project are unencoded and correct.
In the section "Based on the raw tags, we constructed the following Open Graph properties" In the og:video section the first part of the URL has \/\/ slashes in place of the / slash. However in the second part after the ?basepath FB has encoded the : and the / slashes with \u00253A and \u00252F
In the section "Type of Share" we end up with basepath=https%3A%2F%2Ftonyredhead.photography%2F360%2FSocial%2FAD-Fringe-Illuminations-Ayers%2F
So I'm not sure what's going on but the original data output from Pano2VR and sent to FB seems to be correct.
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
-
- Posts: 47
- Joined: Mon Feb 22, 2016 3:38 pm
Hi Tony,
any News on this?
I just started looking into the Facebook topic, but I am wondering whether the basepath is sufficient. I mean how does the swf Player finds the pano and Skin.XML? Are these Default namens hard-coded Inside the swf Player?
Just my thoughts...
Cheers,
Matthias
any News on this?
I just started looking into the Facebook topic, but I am wondering whether the basepath is sufficient. I mean how does the swf Player finds the pano and Skin.XML? Are these Default namens hard-coded Inside the swf Player?
Just my thoughts...
Cheers,
Matthias
Hi Matthias,M. Kräckmann wrote:any News on this?
I've got a couple of friends looking at the issue and I haven't seen any response from the feedback I sent to Facebook.
I've come up with an alternative method that allows you to play a panorama within the Facebook UI on desktop and mobile. It plays Flash or HTML depending upon the presence of Flash in the browser. Unfortunately it doesn't play in the timeline it does however open a rather large view of it within Facebook.
https://www.facebook.com/tonyredhead/po ... nref=story
In the Timeline
Playing
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
-
- Posts: 47
- Joined: Mon Feb 22, 2016 3:38 pm
Hi Tony,
that's great news. How did you manage to trick Facebook?
Is this an iFrame-App your are using?
that's great news. How did you manage to trick Facebook?
Is this an iFrame-App your are using?
Hi,M. Kräckmann wrote:How did you manage to trick Facebook? Is this an iFrame-App your are using?
Sorry I've only just seen this post. It's no trick I'm using a Facebook Tab App https://developers.facebook.com/docs/pages/tabs. Inside the Tab app you can point to your page and have it load within a defined area.
If you go to my Facebook page, redthreesixty, https://www.facebook.com/redthreesixty/ in the menu on the left hand side you will see three menu items; 360˚ Namibia, 360 Street Art and Ulusaba Tour. The first two are built in Krpano in HTML and the third Ulusaba is an old tour built using Flashificator and requires Flash to run. These are all Tab Apps.
regards,
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Hi JiminLai,jiminlai wrote:Hi Tony, Your post on Facebook seems to be not working anymore. The pano has disappeared.
what post are you referring to?
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/