Secure Canvas URL will be required from October 1, 2011. Does it refer to all apps or only to apps running "inside facebook" (iframe apps, apps on fanpages).
Will my website without HTTPS that uses facebook-connect still work? I own app like this one: http://thinkdiff.net/demo/newfbconnect1/php/sdk3/index.php
https://developers.facebook.com/roadmap/
"All Canvas and Page tab apps (that are not using FBML) must convert
to process signed_request (fb_sig will be removed) and obtain an SSL
certificate for use in ‘Secure Canvas URL’ and ‘Secure Page tab URL’
(unless you are in Sandbox mode)."
Only Canvas and page tab apps :)
Related
I have read that Facebook requires that iframe pages uses secure connections (SSL).
But I am now setting up my first app and there are two fields, one "Canvas URL" and another for "Secure Canvas URL".
Has the Facebook policy changed? Is it possible to use an iframe with an non-secure canvas url?
Secure canvas urls are not required in these scenarios:
The app is in sandbox mode and you are a developer or someone who can view the app in sandbox mode.
The app is public
and the user of your application has not enabled secure browsing on
their Facebook account.
If your app is live (not in sandbox mode) and you want ANYONE to use your app, the you will need to get an SSL certificate for your server and add the secure URL to your app's settings
Here is a blog post from Facebook about the change they made in October 2011 http://developers.facebook.com/blog/post/2011/09/09/platform-updates--operation-developer-love/
Sorry in advance for my bad english:
Fb policy has changed a lot in the last period.
Actually you NEED absolutly 2 canvas urls:
"standard" canvas (simply, link the host where the app/program is
stored)
secure canvas (you need to buy a facebook certificate for your host where app is stored)
Basically the app works if you have and also if you don't have a SSL certificate, but people who have setted a strong app privacy on their fb accounts, aren't able to see your app
(browser displays an error message: "this website is not secure bla bla, ecc")
Yes, you need a SSL certificate, but you can get 1 free cert in startssl.com.
I'm having a problem that I can't see to fund the solution to.
I have a tab on my Facebook page (one of those static HTML: iFrame apps). There are no problems accessing it from a PC, however when I try accessing the tab from a mobile device it says:
"The page you requested was not found.
Back to previous page"
Is there some way I can either create a tab accessible on mobile devices, or just redirect them to an external domain?
Thanks!
How to create a mobile accessible Facebook Page Tab App
In order to create a Page Tab App which has a mobile accessible version (an external website accessed directly, not via a Facebook iFrame). You need to add and configure 3 different "Platforms" in the app developer settings. These should be configured as follows:
Page Tab
Configure this as you would normally.
Page Tab Name: the name you want to appear on the page tab
Page Tab Url: the url where you are hosting the page tab app (e.g. http://myapp.com/page-tab)
Secure Page Tab Url: the same thing but with https in front (e.g. https://myapp.com/page-tab)
Website
This is where you configure the url for your mobile site
Mobile Site URL: This is the url you want mobile users to be redirected to (e.g. http://myapp.com/mobile-version)
Site URL: This is used for Facebook Connect, if you are not using Facebook connect, just put your mobile url in here too.
App on Facebook
This is going to be the gateway to your app. Mobile users arriving on this page will be redirected to the mobile website. You can use javascript to redirect desktop users to your Facebook Page Tab App.
Canvas App Page: this will be http://apps.facebook.com/my-app-namespace, this is the link you will post on your facebook wall or in your ads, or anywhere else you want to link to your page tab
Canvas Url: this is a link to a page on your app that will be embedded as an iframe on the canvas app page. You will use this page to redirect to your page tab using JavaScript. e.g. http://myapp.com/canvas-redirect
Secure Canvas Url: This is the same as above but with https in front (e.g. "https://myapp.com/canvas-redirect")
Your Canvas Redirect Script
You want people arriving at your canvas app on a desktop browser to be redirected to your page tab app. Because it is loaded inside an i-frame, the only way to do this is using JavaScript.
This will be the content of your Canvas Url (http://myapp.com/canvas-redirect above):
<script>top.location="http://facebook.com/page_tab_url/app_1234"</script>
Note the "top.location" - this will redirect the parent window, not just the iframe to the page tab. When a user arrives on the canvas page in a desktop browser, they will be redirected via JavaScript to your Page Tab App. Mobile users will be redirected by Facebook to the Mobile Site Url you specified above.
Testing in Sandbox Mode
If your app is in Sandbox Mode, only admins, developers or testers of the app will be able to see it. In particular users not logged into Facebook, or who are logged into Facebook but are not admins or testers of the app, will not be able to access the app canvas page - they will just see a 404 error. In order to test your mobile redirect when the app is in sandbox mode, you need to ensure that you are an an admin, developer or tester of the app AND you are logged into Facebook's mobile site on your phone's web browser - i.e. Safari on iOS and Chrome on Android. It is not sufficient to be signed into the Facebook Mobile App on your phone, you must also be logged in using the browser.
A note about User Roles
You can configure the App User Roles by clicking on the "roles" tab in the app settings. You can add a Facebook user, or a Facebook Group as any of the roles. (If you add a Group, all the users in that group will have the role specified in the app). In order for a user to have a specific role on an app, they must:
Verify their facebook account: http://www.facebook.com/help/verify
Install the Facebook Developer app https://developers.facebook.com/
(Edited to reflect updated Dev Settings UI and readibility)
As an update to this, Facebook now automatically redirects to your website without needing any hacks.
To do this make sure you have added a website platform to your app and put your mobile URL in there.
I had a hard time figuring out how to access page tabs with mobile and, thanks to Ben in a previous comment, I found a way. First of all, you can't access page tabs with your mobile phone, so you will need to point it where your page tab takes it source. Facebook can do that for you if you are using canvas, but if you access it with a desktop computer, you will be redirected to your canvas link, not your page tab. This is how we fix it :
--
1) Go into your App (Facebook developers) under Settings - Basic
2) Copy your Page Tab URL from the Page Tab section (something like http://yourpagetab.yourdomain.com), and past it in your Mobile Site URL into the Mobile Web section.
3) Do the same with the App on Facebook section, but instead of pointing it into your page tab, you will have to use a redirection file. Let's use http://yourpagetab.yourdomain.com/redirection.php?fb
Note that you have to use ?fb at the end of your link. It does nothing, but Facebook wants it. Actually it could be ?anything and probably only ?
4) Create that redirection.php file (don't add the ?fb) and add this code in it
<script>top.location="http://facebook.com/your_fb_page/your_page_tab"</script>
You have tho replace /your_fb_page/your_page_tab with the link to your page tab.
5) Save it!
--
Now, all you have to do is to use the Canvas Page url that Facebook provides you (under App on Facebook). If people click on it and are on desktop, they will be redirected into the page tab. If they are on mobile, they will be redirected to your website hosting the page tab.
If you are using fan gate (user have to like your page before accessing your page tab) : this will not work as the mobile user will get stuck on your fan gate.
The only ways to get through that is to disable the fan gate or to use Mobile Detect (you can search it on Github) and disable it only for users that are on mobile. It's a small price to pay if you want your page tab to work with mobile users. Desktop users will still need to like your page to see your page tab.
you can also use a link like this to stop facebook redirecting mobiles
https://www.facebook.com/MyAppName/?sk=app_11111-APP-ID-11111&ref=ts
I'm one of the developers of Static HTML. We actually have a feature built into the app now that generates smart, shortened links that work for mobile and desktop. If you click on the "+" icon at the top of the editor, it'll pull up a shareable link.
If you use that link, we do a little bit of extra magic so that your tabs fit better on small screens.
Edit: we've discarded the special formatting, because it was glitchy on iOS devices.
Here is the php code I use for the redirect:
// Mobile_Detect
require 'Mobile_Detect.php';
$detect = new Mobile_Detect;
if (strpos('https://' . $_SERVER['HTTP_REFERER'] . $_SERVER['REQUEST_URI'], 'facebook.com') !== false && $detect->isMobile()) {
echo '<html><head><script type="text/javascript">window.top.location.href = "https://yourappurl.com";</script></head><body></body></html>';
die();
}
I am developing an application in my local machine.
I let users invite their Facebook friends with a Facebook request Dialogue.
The friends then click the link in their Facebook and are directed to the canvas page and then redirected out of Facebook to my local site.
Do I need to have an SSL certificate and if so how can I have one when I am developing locally so I can test my site?
From Facebook Oct.1 deadline blog post, SSL is not required for sandbox apps. So you can continue to develop apps without SSL certificate as long as you enable sandbox in your app.
In my case, temporary DISABLE secure browsing setting in 'Account Setting'.
http://gyazo.com/39e4dd5087636ebc3024d2285ab3e33a.png
Forward works great for developing facebook apps locally, supports SSL too.
https://forwardhq.com/in-use/facebook
You need a certificate before October 1st, otherwise your canvas landing page will be blocked by Facebook. If you develop locally and need a SSL cert just for test, see the following trick for IIS:
http://weblogs.asp.net/scottgu/archive/2007/04/06/tip-trick-enabling-ssl-on-iis7-using-self-signed-certificates.aspx
I have a canvas iframe Facebook app.
I updated the secure canvas URL with https url and it works fine.
since October 1st, it is not allowed to access apps without ssl.
I used to debug my app by creating a duplicate app with localhost as the canvas URL.
Since October 1st (or actually since today...) it is not possible to access it due to the ssl restriction. How can I debug facebook app now??
In your account settings turn off 'Safe browsing' so you will be visiting Facebook without https. Then it does work for me (after turning on Sandbox mode that is).
Turn sandbox on
(source: phpcode.eu)
Apps on Facebook authentication and security migration
All Canvas and Page tab apps must convert to process signed_request (fb_sig will be removed) and obtain an SSL certificate for use in Secure Canvas URL and Secure Page Tab URL (unless you are in Sandbox mode).
So I created a facebook app using iframes, I'm using it as a tab on a facebook page and it works.
But if I use HTTPS, the tab isnt even there.
Anyone know how to fix this?
thanx
Facebook recently enabled the ability for users to set their accounts to use secure browsing (https / ssl). In your application settings > Facebook integration section you now have 2 fields: Secure Canvas URL & Secure Tab URL which in order for your app to work if a user has enable secure browsing, you will need to fill those in. This also requires that the server you are hosting your app on has a valid and configured SSL certificate.
If you are browsing over HTTPS (which is a something a user can now enable in their FB account settings), then the iframe will need to be pulled in over a secure connection too.
This is a known issue (marked as fixed and resolved - http://bugs.developers.facebook.net/show_bug.cgi?id=15200) and, rather than attempting to simply call the same URL over HTTPS, Facebook now provide a separate field under the integration settings for the URL of a secure version of the iframe. If this does not exist, then the tab will not display over HTTPS.
Sergiogx, make sure you filled both fields Canvas Tab URL and Secure Canvas Tab URL. I'm using free facebook page hosting from http://hostfb.com and they also provide SSL support.