Facebook Embed in Timeline Issue

[Tony]

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

[CBosch]

Hi Tony,

thanks for that hint - on my business-timeline my panos are deleted(?). At least I can't see them anymore... the entire post seems away.

Hope to get some information soon about this behavior from Facebook!

[CBosch]

That's crazy...

all panos I linked last year are away from the timeline. I now made a new link with the file from last year and it works. We will see how long the pano is online.

[Tony]

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

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/"/>

However once it's gone through the Facebook Debugger it now looks like this...

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
}

Secure URL

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

SRC

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

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

[CBosch]

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:

Code: Select all

http://www.myServer.com/subfolder/anotherSubfolder/maybeYear/maybeMonth/index.html

The images are stored in:

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

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:

Code: Select all

basepath = http://www.myServer.com/subfolder/anotherSubfolder/maybeYear/maybeMonth/

and inside the index.html all is linked as:

Code: Select all

<img src="images/yourImage.jpg" />

and in the js-files you see:

Code: Select all

'src',basePath + '../images/yourImage.jpg');

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

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"/>

In your meta-Tag the concrete files are missing! As "pano2vr_player.swf" and the pano/skin-xmls...

[Tony]

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

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" />
		

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

[M. Kräckmann]

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

[Tony]

any News on this?

Hi Matthias,

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

[M. Kräckmann]

Hi Tony,

that's great news. How did you manage to trick Facebook?

Is this an iFrame-App your are using?

[jiminlai]

Hi Tony,

Your post on Facebook seems to be not working anymore. The pano has disappeared.

Just wondering if there's any updates on this?

JL

[Tony]

How did you manage to trick Facebook? Is this an iFrame-App your are using?

Hi,

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]

Hi Tony, Your post on Facebook seems to be not working anymore. The pano has disappeared.

Hi JiminLai,

what post are you referring to?

Tony