My goal is that have a fb page app (only in one tab) and use it with linkable subpages inside it.
For example:
If I click on subpage link there would be a http or ajax request inside the iframe. Thats fine, i can do that.
BUT
in the solution I also want to implement these two features:
1.:
I want that page to be accessible directly from an url like:
http://facebook.com/pagename/app..blabla/subpage1
or
http://facebook.com/pagename/app..blabla&sk=535&subpage=1
or
http://facebook.com/pagename/app..blabla#subpage1
2.:
On subpage link click inside iframe I want the browser url to turn into something like mentioned in the 1. point. (even when using ajax - probably with a hash tag)
Is it possible?
If you look at the page tab tutorial http://developers.facebook.com/docs/appsonfacebook/pagetabs/ at the bottom of the page they describe how you can create the 'subpage' idea using the app_data parameter. So your links will look like http://www.facebook.com/YourPage?v=app_1234567890&app_data=any_string_here
For your second question, in the links on the page you would specify target="_top" in any links you have with the href being: http://www.facebook.com/YourPage?v=app_1234567890&app_data=subpage1. This will cause the entire page tab to load through Facebook and you'll get the signed_request and your app_data parameters.
You probably don't want your ajax to load through facebook, because you'll get the Facebook page back instead of json or whatever you are trying to load. Instead you'll just make ajax calls to your server and pass the parameters you need to, like app_data or whatever you want.
Related
I am compiling a lead generation landing page and, in the form I have inserted a hidden field which collect whatever is written in the url bar after
"?rel=".
This is done in order to track where the leads come from (Facebook ads, direct linking etc).
To be more clear if this is the url: www.mywebsite.com/form.html?rel=fbads
the hidden field will be fill with "fbads" and this is working.
In the landing page I have a link to another page with more details and in this webpage I have the same form.
My idea is to run campaings on the first page with the rel link, but then if the user clicks on the link and go to the detailed page (and then compile the form from there), I am losing the rel field.
How can I pass the rel field to the url of the second page?
Thanks
You may refer the this stackoverflow page. Once the HTTP GET request comes, traverse in HTTP headers in your controller and look for Referer field but it is not always set and the client can change the header value. May be using google analytics is the better option.
If you just want to know that whether if they came to your form page from your landing page or not, you may add fix HTTP URL parameter prior to HTTP redirect.
If you save your rel in a variable, you can add it on your link to detailed page, for example in case of =fbads just once variable is set up, add it: <a href="http://myDetailedPage.com/detailed/?=<?php $rel;?>"</a>
I am attempting to use the standard Facebook share button to share a deep link into my iframe page tab of the form:
https://www.facebook.com/YourPage?v=app_1234567890&app_data=any_string_here
where app_data content is a deep link relative path into my iframe page tab app content
(e.g. /path/to/page_that_I_shared_from).
Just to be clear, there is a Share button on my iframe app page, and I am trying to generate the link back to that page to be shared.
I place the absolute URL above into the data-href parameter per the Share Dialog documentation, and when I click the Share button, the url in the share dialog is of the form:
https://www.facebook.com/sharer/sharer.php?app_id=my_app_id&sdk=joey&u=url_encoded_version_of_the_absolute_url_above&display=popup
but when the post is rendered, the query string is stripped completely.
Note that if I use a non-Facebook URL, the query string is preserved.
I do notice that app_id parameter in the share dialog URL - perhaps the fact that this is coming from inside the page tab iframe makes a difference.
Initial testing with the feed dialog looks promising, but I'd like to use the share button since it provides more flexibility as to the destination of the post.
The final solution was to generate the link like so:
https://www.facebook.com/pages/<page id>/<page id>?id=<page_id>&sk=app_<FB_app_ id>&app_data=<deep link>
where deep_link is a relative URL with a query string that starts with a '?' and has the '&' characters replaced with '|' characters (poor man's encoding that I decode on the way in).
I saw several suggestions (mostly here on SO) to double or even triple encode the app_data URL - none of these worked, and usually they resulted in links that could not be posted by the sharer.php script.
I would like to build a customized Facebook page tab for other page owners to instal onto their Facebook pages. Each page tab will need to have its own ID in the links that lead out of the page tab in order for us to track that page activity.
For example each page tab will have a list of products that link to the relevant product pages on an external website. Each of those links will have a unique ID parameter to we can track clicks and purchases. [e.g http://www.mydomain.com/products/product123.aspx?userid=12345]
So I need to create the userid variable in the link. Possibly using GET (or Request.QueryString for asp) to receive from the initial page tab installation.
From what i can see I might be able to use the app_data parameter to pass data over to the page, but when i tried it, it didn't work.
This is what i am using to install the page tabs
[https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&app_data=12345]
I thought that this will pass the userid over to the new page tab, but it doesnt seem to work.
If anyone could point me in the right direction i would be very grateful.
Cheers
From what i can see I might be able to use the app_data parameter to pass data over to the page, but when i tried it, it didn't work.
This is what i am using to install the page tabs [https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&app_data=12345]
But you are aware, that appending &app_data=12345 does not mean you will get a GET parameter by the name 'app_data', right …?
The app_data will be passed as a property inside the signed_request parameter – so you’ll have to decode that one, and inside you’ll find your app_data value.
Why does 'each page tab' need to have an ID?
The Page ID should be enough for you to determine which content to show (and it's passed to your app on each page load via the signed_request, and the page ID is also passed back to your app in the callback to the pagetab dialog
You could also request manage_pages Permission from the user to determine the list of pages they administer and if your app is installed on each
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 page where users must initiate actions on multiple objects, but Facebooks design limits you to just one object per page using the required meta property tags.
Has anyone found a solution to this problem?
The Open Graph uses the URL as the object identifier, so its not possible to have several objects on one page, the page is the object.
Instead, you'll need a URL for each object, and that URL's HTML should contain the correct OG markup.
You can put multiple like buttons on one page, and make them point at each of your objects by specifying the 'href' parameter for each like button.
However, if you want the user to end up back at the SAME page when they click on the link to each of these objects, you can do this, but its a bit tricksy...
On your object pages, on your server, look at the incoming request useragent. If the useragent contains the string 'facebookexternalhit' then render the HTML and the OG markup - this is how the Facebook scraper sees your page. If the useragent does not contain this string, perform a 302 redirct to the page you want the user to see.
Result? Many objects, but only one user-visible page. Win.
And this is how you would do it:
<?php
if ($_SERVER["HTTP_USER_AGENT"] != "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)") {
redirect('http://www.somesite.com', 302);
}
function redirect($url, $type=302) {
if ($type == 301) header("HTTP/1.1 301 Moved Permanently");
header("Location: $url");
die();
}
?>
<html...
https://stackoverflow.com/a/7659770/1354666 This is a great answer, but a few things about it aren't working out well for me, so I've tried an alternative.
Instead of using href's in button tags I'm using Iframes.
Make a series of html pages for each of OG objects.
In Each of these pages add the necessary facebook header scripts and facebook root elements to call the facebook api.
Create form input elements that will call the actions for each of these OG objects. Give each of these elements an id.
Include a small script that will determine if you're and Iframe or a page, so you can redirect users back to your home page if they click on the facebook feed.
Finally, place and your sized iframe with a style set to no frame on the page and set it to no scroll. Use the ids of the form elements to target which action should be in the iframe view.
I'm still working on refining this for my mobile phones output, but it's working as I it should for most browsers.
FB uses the URL you assign to the object to scrape it for information. The only way around this would be to have the objects shown via an iframe or some approach similar. If the object was referenced directly you'd need a way to redirect back to the appropriate wrapper page for the combined object view. As long as everything is in the same domain you could work out a method for communication between the children frames via the parent.