I currently have a custom app on Facebook that works fine on desktop PC's (full version of Facebook). As you would know you can't access custom apps from mobile devices and it redirects you to the wall of the page.
Is there a way to redirect them to a mobile web app if they try to access the app from a mobile device? So that way when people share links to the app I can at least show them something.
I saw the Mobile Web URL option in my app but am unsure on how this will actually work.
You are referring to the "mobile tab access" Vitrue announced this week? :)
What they are doing is this (basically):
Create a special link to the tab (mydomain.com/tablink1 or something, NOT the ?sk=app_xxxx URL in the browser bar)
On that link they have code which does a conditional redirect
If it's a regular browser/device, redirect to the tab (?sk=app_xxxx)
If it's a mobile browser/device, redirect to an alternate mobile webpage with the same content as the tab (mydomain.com/mobilecontent1)
The redirect is not on the actual tab, since the mobile browsers will never get there. It has to be on a separate page.
So if they try to access the tab on a mobile device with the regular tab URL they will not get redirected. It only works if they go to the special redirect URL. Vitrue's application publishes that special redirect URL to the Page wall.
It works very well to make sure everything you post to your Wall (which mobile users can see) does not break, but it does not really provide a redirect for mobile users trying to get to your tab.
That's the best we can do right now though, until Facebook actually comes up with a mobile tab solution (bug filed here: https://developers.facebook.com/bugs/264010470314544)
Good luck!
Related
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 have a Facebook app the currently consists of 3 elements - an App on Facebook, Mobile Web, and a Page Tab.
Currently if I use the app URL it detects whether I am on a mobile or not and directs me to either the app on Facebook or the mobile web site.
What I'd like it to do is always show the app in the context of the page tab. Is there anyway to force this?
I tried looking at whether I could use the page tab URL directly and have that redirect to the mobile but depending on how I've linked it either returns a 404 or just takes you to the Facebook page. I appreciate I could do my own mobile detection but I thought I'd check if I'm missing something in Facebook first.
I wrote an explanation of how to do this here: https://stackoverflow.com/questions/14434072/create-facebook-page-tab-and-publish-template-on-it/14455665#14455665
Hope this is what you are after!
we have created a Facebook app, but when opening this on a mobile (via Web or iPhone) the page results in a 4oh4 error. I have setup a Mobile Web URL but still (after 1 hour wait) gives a 404.
Do I need to make specific changes on my app?
Please help.
This is expected as #Igy stated. You will need to have a handler to support redirecting mobile users to your apps.facebook.com/ or you can redirect them out of Facebook to your own URL if you are going to try and link to your page directly with an app embedded as a tab.
i.e. point link to http://yoursite.com/redirector
is mobile goes to http://yoursite.com/myapp or http://apps.facebook.com/
non mobile goes to http://facebook.com//app_
Some things to note:
You won't get any page specific data back from facebook on your page (i.e. Liked or Not Liked).
Based on #1 you won't be able to restrict the non-liking app users from a page.
After trying everything under the sun to get Facebook to redirect to a mobile web URL, here is what I needed to do in order to get the redirection working:
Make sure the Facebook application is a canvas application. This gives you the ability to give the application a namespace.
Give your application a namespace so that you can access it through https://apps.facebook.com/NAMESPACE. From here, Facebook will do the detection for you, and if needed, redirect your users to your specified mobile URL.
Make sure your app is NOT in sandbox mode.
If your app is in Sandbox Mode, Facebook won't redirect you to the mobile version you have specified in your app settings.
Facebook does the redirecting for you, you don't have to. Although their version of what "mobile" is and what you deem "mobile" might be different.
We have a post on a FB wall. It points to http://tinyurl.com/{something}.
When the link is clicked in a non-mobile web browser, it works fine: TinyURL redirects the user to our web site using the appropriate URI including a special querystring.
When the link is clicked in a mobile web browser on my Android, it fails with the error in the title of this question.
When the link is clicked in the FB native app for iPad and in Safari on the iPad, it works fine.
I have tried adding our URL to the Mobile Web setting in the Basic Settings tab of the FB App configuration. That results in all links pointing directly to the root of our web site with a funky set of parameters in a querystring -- in other words, it doesn't follow the TinyURL in that particular case. The funky parameters include "refid", "ref", and "ft".
So primarily my question is: Why, when I specify the URL in the Mobile Web setting as described in the previous paragraph, does it redirect to our main URL instead of the TinyURL link originally called for?
I think this is something Facebook broke very recently (perhaps even today?). When a user clicks on any links to our app from inside the Facebook native iOS app, they get this error "Either this application has not configured its Mobile Web URL or the URL could not be verified as owned by the application. Unable to redirect." We had never set a Mobile Web URL previously, and everything had been fine since we launched the app over a year ago. We sent all mobile clicks to the same URL's as desktop browsers and handled the mobile rendering server-side. We have not changed our application domain inside the App Settings or anything like that.
In the App Settings, can set a Mobile Web URL to our homepage and the link works (and the error message goes away) but that's not the desired behavior at all - it would mean that all links end up at the same Mobile Web URL regardless of what the link was!
Was this change made on purpose by Facebook and if so why? There's been no mention of this whatsoever on the Developer Blog.
Update 3/21 8:10am PST:
I've since found this to be a widespread problem, not just for a few apps. Just by clicking around I've seen this error on posts to weather.com, youtube, msn.com and a dozen others. It happens on both clicks from the Timeline as well as the News Feed (although strangely sometimes the same post works on one, but not the other!), and from the m.facebook.com mobile web app as well as the native iOS app.
I commented on http://developers.facebook.com/bugs/302635863137683 but no word from Facebook yet. I can't believe more people aren't talking about this right now, this is a major bug.
In your app, go to Settings -> Add platform -> Website
Add both, Website URL and Moblie Website (Yes, you need these both), then your app will be able to be opened from facebook native app.
You will also need the FB Canvas.
Same here, I recently noted that all links of items shared with our Adroid or iPhone app are broken. This only happens with the mobile version of Facebook the Desktop web version is still working. What is actually wrong on the mobile version is that the original shared url is replaced with a m.facebook url that ends with "?ref=unknown&refid=0&ft=fbid.332036910178718%3Ainterface.m_touch%3Ac.m" When user click on it Facebook is redirecting the user to the App's "Mobile Web URL" + "?ref=unknown&refid=0&ft=fbid.332036910178718%3Ainterface.m_touch%3Ac.m" instead of the original shared url.
My opinion is that this is an issue of Facebook that is redirecting the url to the wrong location, "Mobile Web URL" instead of the original post url.
Ok not working. What is going on, 1st directed to something about itunes url. I am on an Android not an Iphone. Sad state when an disabled person is unable to gain access the same as others. This is bad for all users.
For example, the following URL shows the app in a tab:
https://www.facebook.com/just.to.get.a.rep?sk=app_203403406338325
But when on a mobile device it redirects to the mobile site and does not show the tab or even have a link to it:
https://m.facebook.com/just.to.get.a.rep?sk=app_203403406338325
I even have the application tab set as the Default Landing Tab for this page, but cannot get the pap to show for the page. Is there another format we need to develop for the App to support mobile? Ideally we would like to show the tab on iPhone app and other mobile viewing.
If you're in control of the link the user clicks on to reach your fanpage/pagetab-combination, then try adding a GET parameter ref=ts
h++ps://www.facebook.com/just.to.get.a.rep?sk=app_203403406338325&ref=ts
Apparently this prevents the redirect to the mobile version of facebook.
There's not currently any way to see App-provided Page tabs on the m.facebook.com site
Mobile web apps are supported, but they're not tied to the Page and need to be manually linked-to or bookmarked, the tab functionality simply doesn't exist now.
Currently you can develop application functions such as app authorisation but sadly no, you can't display standard iFramed tab apps, I suspect this is because of slow 3G data speeds and the fact that Facebook wouldn't want the mobile experience being any slower than it already is (dependent on external hosting etc).
Many of my larger clients are begging for it. The only workaround I use is to build an external page with the same content used in the iFrame - then you can direct users to the tab or mobile users to an external link.
https://www.facebook.com/pagename/app_000000000000000?ref=page_internal
as of now ref=page_internal is working as a work around.
You can redirect Mobile users to a specific mobile website, and have desktop users redirected to your page tab app.
Detailed instructions for doing this are available here:
https://stackoverflow.com/a/15860533/121285