I created a canvas facebook app. The app itself was made in html and consisted of multiple different pages, the first page linking to the next, and so on... (links were assembled as simple html a tags with target="_self")
Everything seemed to be working fine in FF, Safari, Chrome, but not when we were testing in IE. It seems that redirecting within an iframe works different in IE, and it showed in the url of the browser:
When testing in FF,..., the url of the startpage would be apps.facebook.com/our-namespace, and after linking to the next page, this url in the browser would always remain that same apps.facebook.com/our-namespace.
When testing in IE, the url of the startpage would also be apps.facebook.com/our-namespace, but as soon as you hit one of the links, the url in the browser would change to apps.facebook.com/our-namespage/the-page-we-re-linking-to.php, not taking the target="_self" into account. When clicking on a comparable link again, the app would redirect to the start screen...
I spent hours trying to find an answer, I saw that changin IE's security settings would make it work:
in IE: go to Tools --> Internet Options --> Security --> Internet Zone --> Custom Level --> Miscellaneous --> Launch programs and files in an IFRAME. and make sure it is set to enabled
But this is not an acceptable solution as IE is configure different by default.
I found the solution was (in php) to add the following line to your code:
<?
header("p3p: CP=\"ALL DSP COR PSAa PSDa OUR NOR ONL UNI COM NAV\"");
?>
Problem solved! This should be in the facebook developer docs!!
Related
Facebook has launched option to embed 360° video in web app. I am trying show embedded video in UIWebView. But its not working.
Here is my code,
let iStrEmbed = "<iframe src=\"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F10153231379946729%2F&width=500&show_text=false&height=281&appId\" width=\"500\" height=\"281\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\"></iframe>"
webVW.allowsInlineMediaPlayback = true
webVW.mediaPlaybackRequiresUserAction = false
webVW.loadHTMLString(iStrEmbed, baseURL: nil);
I have noticed its not working in even safari of mobile. Its working fine in all browsers on mac.
Is it supported only for desktop as of now?
As of now, yes- desktop only. I've had the most success on our custom-WordPress productions with the following hack via Facebook for Developers platform. Please try the following steps:
Upon selecting your Facebook360 video or photo, click on the ellipsis menu and select Embed.
Next, a dialogue-window will prompt- click on Advanced Settings.
Clicking the aforementioned will direct you to the Facebook for Developers platform; click here to see the instance created for the subject example.
Click on the Get Code button, which will prompt another dialogue box; then click on the iFrame tab and copy the code.
Copy the code contained within the iFrame tab.
Post and feature on desired section of web-app or website.
Although Facebook assures fellow developers that an easy WordPress integration will be released soon, as of this post, that remains to be seen; hopefully, we will see one soon for the sake of our clients because the solutions provided for the duration (subject example for WP):
<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553"
data-width="500" da enter code hereta-allowfullscreen="true"></div>
aren't exactly responsive and sometimes fail to render as expected. Hope that helps!
It looks like a recent Chrome update broke this by tightening mixed content (https/http) security policies, and I read that Firefox plans to do this too.
Here's the issue:
Say I set the Secure Canvas URL of my app to https://themediadudes.com/httpstest/
That page contains only a link to Google:
Google
When I view the app on Facebook and click the link, nothing happens. An error appears in the console:
[blocked] The page at https://apps.facebook.com/myappname/ ran insecure
content from http://www.google.com/.
I understand that having insecure scripts/stylesheets etc. on an https page isn't allowed, but a simple link to a different website shouldn't be blocked right?. I assume Facebook is running some scripts which do something with the page before sending the user there? Which causes the error.
If I set the target of the link to _top or _blank it works.
Ideally I want to be able to use a javascript window.location to send the user to this insecure URL, or header('Location: blah'); in PHP. But neither of those work either. And it looks like this is a bigger problem than that if even a simple link to an insecure URL doesn't work.
I thought it may be caused by whatever makes the 'fluid' canvas width and canvas height settings work. But I tried setting both width and height to fixed and the problem still happens.
Does anybody have a solution or workaround, or can anybody at least shed some more light on this?
Thanks
I've been struggling with a similar issue and the answer seems to be that it is not possible at all to reference any non-https resources from within your page tab app. Of course if a google link is all you require then that is simply resolved (as google has a https version of course) but referencing external non-https sites will always turn up this warning/block in chrome
Additionally, I should add that I have noticed that the 'page tab URL' section requires a url to a particular page, whereas the 'canvas URL' needs to link to a directory. This does not seem to be documented and will also give the insecure content message in chrome and prevent the page tab app from loading
I'm trying to create a landing page on facebook with the Static HTML application, but the image does not appear in IE8 show only at 9 and other browsers like Chrome and Firefox.
The application link is: https://www.facebook.com/hyundainic/app_128953167177144.
Yet another application that looks like:
https://www.facebook.com/SomosEskimo/app_367456286664440.
This if displayed in all browsers, except that technically I do not know if it's the same.
I'm editing the html / css and occupy absolute and relative positioning, I thought that this could affect and remove it, but the problem persists forever.
Can someone help me with this?
I think the issue is probably that you are using an absolute, non-SSL URL for the image source, and the links you posted to the app use SSL. If you leave the protocol off (example: "//whatever.com/myimage.jpg" instead of "http://whatever" or "https://whatever") the browser will use https when needed.
However, it looks like your image doesn't work over SSL:
https://hyundai.com.ni/img/quickservice-fb.jpg?id=3
You can try viewing your app using http:// and confirm it displays ok in all targeted browsers to see if this is really your issue.
I have a problem with setting cookies in an iframe (which loads a site from another domain).
On my site X.COM I load <iframe src='Y.COM'>
Y.COM tries to set cookies, but Safari blocks they, as this site was not visited before. So loading Y.COM fails because it can't work without cookies. Is there a way to solve this issue?
P.S. I cann't modify any data at Y.COM.
P.S.S. Also we can modify Safari's settings - "Accept cookies" = "Always", but it is not a solution for me - it seems to be impossible to lead every user to do it..
I experimented a similar problem. A web "parent" page open my "child" website in a jquery fancybox i-frame cross-domain. Not problem at all with Explorer, Chrome, Firefox, Opera and even with Safari (5.8.1) on MAC. But with iPhone, iPad and mini iPad, the session in the i-frame is lost.
That's mean that at every click on an element in the i-frame (web site is in aspx) a new session started.
We solve the problem in a very simple way:
when the parent website start, it call a page in the child site directly (not in an i-frame). In this page I just set a session variable and I redirect to the parent website. Now when the child website is open in an iframe, the session is kept.
I'm attempting to add a FB "Like Box" to a website I'm developing. Not too familiar with Facebook apps, but so far I've gone the non-IFRAME route, using the FB SDK script include.
I'm fairly certain I've got almost everything setup correctly. In fact, I see the widget appear when I visit the page UNCACHED (i.e. in FF, I hit CTRL+SHIFT+R to reload all content to avoid loading from cache). Once I revisit the site, or move around within the site by clicking links, the content does not reappear.
I'm wondering if it's an issue with a) the channel.php file, or b) the apps interaction with my use of JQuery. The channel.php file is verbain what is provided by Facebook (using PHP's caching mechanism).
Here's the site currently: http://www.morningfatty.com/demo - It might be easier to list this rather than post several code snippets.
I went to your website and didn't see the like box. I checked the HTML code and it all appeared fine. The div looked like <div data-header="false" data-stream="false" data-border-color="#40ADAD" data-show-faces="true" data-colorscheme="light" data-width="192" data-href="http://www.facebook.com/morningfatty" class="fb-like-box"></div>
I went to https://developers.facebook.com/docs/reference/plugins/like-box/ and tried your link http://www.facebook.com/morningfatty and lo-and-behold the like box didn't display there.
I tried going directly to http://www.facebook.com/morningfatty and it redirected me to http://www.facebook.com/MorningFatty. I noticed the change of case in the name. So I went back and tried http://www.facebook.com/MorningFatty in the like-box and it worked!!.
I believe that you page will work once you update the casing on the url. :)