I'm coding a "one page" app inside facebook (using the canvas app approach). While the user moves inside the app I'm changing the location like: apps.facebook.com/my-app#current_location and loading stuff via AJAX.
Unfortunetely, when someone loads http://apps.facebook.com/my-app#current_location in their browser, the canvas app doesn't see the url fragment #currrent_page.
How can I get around this limitation?
Although I cannot answer properly your question, (and as I think it's kind of old already) the info below should help other people understand better these # (hash) things. They are called URL Fragments.
http://blog.httpwatch.com/2011/03/01/6-things-you-should-know-about-fragment-urls/
Any URL that contains a # character is a fragment URL. The portion of
the URL to the left of the # identifies a resource that can be
downloaded by a browser and the portion on the right, known as the
fragment identifier, specifies a location within the resource:
Fragments Are not Sent in HTTP Request Messages
If you try using fragment URLs in an HTTP sniffer like HttpWatch,
you’ll never see the fragment IDs in the requested URL or Referer
header. The reason is that the fragment identifier is only used by the
browser – it doesn’t affect which resource is returned from the
server.Here’s a screen shot of HttpWatch showing the traffic generated
by refreshing a fragment URL:
The URL fragment is only read on the client-side (users' browsers), so Facebook won't and can't sent that on the POST request it makes to your server.
What you can do is catch all URLs with the same route, regardless of the server-side language of your choice, encode them somehow, and send them to the client to be read by client-side Javascript which would then be responsible for navigating.
Example: the user loads http://apps.facebook.com/my-app/current_location (notice the / instead of the #). You serve your single page, where you'll have something like (ERB):
<script>MyApp.navigate("<%= request.path %>");</script>
Your navigate function could do the following:
function navigate(path) {
window.location.href = "#" + path;
}
Yeah, the Hash urls are nice to use for navigation within your site, however, not so good when sharing the url. The solution is to create canonical URLs for each of your objects.
So, when someone can access specific information like http://yoursite.com/#artists/styx, you also have a way for your server to serve content from http://yoursite.com/artists/styx. This way someone can share http://apps.facebook.com/yoursiteapp/artists/styx and then get to the correct content within your site.
Related
I need to create a custom Facebook Page Tab app which will show an external site in an iframe. This need to have adverts on it but I'm not sure if this is possible as the site is hosted externally.
I'm not sure if I need to sign up to the Facebook Audience Network to get approved etc. either?
Any help or advice would be great.
Many browsers have this limitation of not allowing external sites to be shown in an iframe. Imagine the case when you are working hard to create a site and others show all your content in iframes. That is, naturally frustrating.
However, there is a candidate-solution: Let's suppose you create a page which sends a request to the other site and appends all the content into the body and head of your page. This is very much possible, so the solution is to:
Create a page in your site, let's call it outsider
In the server-side code of your outsider page send a request to the desired page to be shown
You will get the html of the page. Process it and include its content into the head and body of outsider. This includes:
3.1. Checking all the CSS to be reached, as the target page might refer to local CSS, which is unreachable locally at your end. Process the URLs of CSS files
3.2. Checking all the Javascript to be reached, as the target page might refer to local JS, which is unreachable locally at your end. Process the URLs of JS files
3.3. Apply the idea described in 3.1. and 3.2. for other resources, like images, until you are satisfied with the content of outsider
Create an iframe, having the source to point to outsider. outsider is inside your scope, so it should be shown
NOTE: If the site owning the target page does not like the possibility of you showing their content inside iframes, they might protect it by, let's say, having Javascript in their code, which checks whether the page is inside an iframe. Remove that code while processing the response to your request. If nothing else prevents you from showing the page in an iframe, then you should achieve success.
I have an application running in an iFrame that is embedded in a SharePoint site. The problem with this is navigation within the application does not result in a change in the SharePoint site URL. Therefore, if you were to refresh the overall page, you would be sent back to the default page of the application, not stay on the same page of the application. The reason this is an issue is sharing for social media. I have added a Facebook Share button to the application, but when it pulls the URL of the application which does not match or reference the URL of the overall site, so it just shares the application (which is not visually appealing and does not allow you to access the rest of the site).
Any body have any suggestions or know a place I can go for help? Thanks!
If I understand properly, the Facebook stuff is INSIDE the iframe?
If so, you can:
* Remove the iframe and integrate the application better with SharePoint, or
* Change the application so that it detects that it's running "alone" (with javascript etc), and if so redirect to the "big" application.
IF the Facebook stuff is in SharePoint, OUTSIDE of the iframe, you can write some javascript to update the URL in some way that matches the URL of the application. This requires that the SharePoint parent application and the iframe application run in the same domain - if they are not, this is not an option.
Note that changing the "parent" URL with JS will reload the page, UNLESS you only change the URL after the "#" part (so you can do something like:
"http://sharepoint/iframe.aspx?aa=11&bb=22#iframeUrl=http://uglyapplication/"
You'll also probably want to write JS to update your iframe accordingly if the user press "back"/"forward" etc in the browser, because changing the URL like above will still add a "step" to the browser history.
I have a facebook page tab iframe and would like to access the browser url in order to get the current facebook page url.
I know it's not possible to use a javascript that interacts with the parent frame because of browser security issues.
An approach that didn't work for all browsers was to read the HTTP_REFERER header from the request.
Is there a better way?
I hope this is impossible at all. Otherwise it will be a security issue, likely to be closed.
You should not write code depending on compromising other users.
It is not possible to get URL of a parent Frame due to cross-domain policy. And there is no way to get the information about page your application running on in client-side.
But on the server-side you can reconstruct the Page URL using details passed in signed_request. For Page Tab Applications it contains page:
A JSON object containing the page id string, the liked boolean (set to true if the user has liked the page, false if not) and the admin boolean (set to true if the user is an admin of the page, false if they're not).
Using that page id you can build the Page URL:
http://www.facebook.com/pages/-/PAGE_ID
If you want the link to your Page Tab with your application use:
http://www.facebook.com/pages/-/PAGE_ID?v=app_APPLICATION_ID
Beware, HTTP_REFERRER is provided by client and cannot be trusted, and it's may be cut by plugin/proxy/etc...
Notes:
Pages may have different URL in real life, but using this technique user will be landing the correct Page since Facebook will issue redirect to correct URL of a Page.
Sample URLs use HTTP scheme, feel free to use HTTPS if you need it.
In PHP for example you can detect the current scheme like this:
$scheme = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS']!=="off") ||
(isset($_SERVER['HTTP_X_FORWARDED_PROTO']) &&
$_SERVER['HTTP_X_FORWARDED_PROTO']=="https")
) ? 'https' : 'http';
HTTP_REFERRER might not work as expected in my experience. If the tab app is designed for a specific page (which I suppose it kind of should), have you tried recreating it?
https://www.facebook.com/MYPAGENAME/app_MYAPPID
Where MYPAGENAME is your page name and MYAPPID is the app id, of course.
If the tab is applied to multiple pages though, I'm quite sure you'll get the relevant data to apply the above from https://graph.facebook.com/PAGEID, where PAGEID is the ID of the page which you get from the signed request.
I have a like button on my page that I'm hosting as a FB app. Question is: Leaving the data-href blank on the like, sets my canvas url "www.example.com/page.aspx" for liking. Window.location.href or window.top.location all point to the canvas URL.
I want the users to like the app URL instead of the canvas URL. Anyway I can get this in the code behind? or in javascript? I do not want to specify this, because I want to do this for multiple applications each one to point to their own app url to like.
Usually you have to somehow initialize the app in order to work with it so in your config you should have a canvas name (or namespace).
Another method would be to query the graph-api for convas details. The query should look something like this:
var app_data = FB.api("/you_app_id");
You should test it first with Graph API Explorer . And also remember that this is an expensive call if you're doing it on each page request. You will get an array with all the info about your currently loaded app including the canvas name. Having the canvas name you can form the app URL like this: http://apps.facebook.com/your-canvas-name
Short answer: No!
Longer answer: You cannot get any information from a frame in another domain. This is for security purposes. So if you try:
console.log(window.top.location.href);
...when the frames are in the same domain, you'll get the url. Otherwise, you'll get a security exception.
I'm attempting to put a named anchor on a part of our Facebook tab and add "#anchor" to the shared URL so when users click the shared link it will take them directly to the proper content on the tab.
I added to my tab and then recoded the FB Feed Dialog URL so
link=http://www.facebook.com/mybhg?sk=app_279723102083145#quiz
and
actions={name:'name',link:'http://www.facebook.com/mybhg?sk=app_279723102083145#quiz'}
In testing the dialog displayed an error saying both of these were invalid links:
Requires valid redirect URI
actions should be a JSON-encoded dictionary with "name" and "link" keys
So I bit.ly'd them which Facebook accepted and you can share the short URL. When users click the shared link though, the correct URL is used (with "#quiz") but the browser does not snap to the anchor location.
Since FB failed on the original URL, I suspect they aren't set up to parse #named anchors in their URLs, but I wanted to put it out to the community and see if someone has made it work (or confirmed it doesn't.)
Thanks!
URL fragments (the #) can't be read on the server side.
What you can do is use the app_data parameter, which is forwarded to you on the signed_request parameter, parse it accordingly, and have some Javascript to force the jump yourself.