Facebook share to refer back traffic to the iframe page tab - facebook

SO here's what I am after. I have a FB page tab that runs the content of the site https://site.com/
I set up a FB share link to share a page aboutus.html. When I share it FB allows me to share this URL https://site.com/aboutus.html, but how can i send the traffic directly to the iFrame on the page tab? For example https://www.facebook.com/fan_page/app_331267943480920398/whatever_aboutus.html
I know it is possible because I saw it one day - cant remember now where.
Thanks.

You can't pass in filenames this way, that's only supported on Canvas Apps.
The best workaround to replicate this is using the app_data parameter. Basically, have your landing page (as defined in your app settings), be some kind of server side script which listens to the Signed Request, specifically the app_data parameter. Then you have that script load content based on the contents of that.
So as an example, let's imagine I want to load http://mybasedomain.com/foo.php or http://mybasedomain.com/bar.php. I direct users to https://www.facebook.com/PAGENAME/app_APPID?app_data=foo or https://www.facebook.com/PAGENAME/app_APPID?app_data=bar, then on my landing page, I have a simple if/else statement to parse that and render the relevant content -
<?php
// Assumes you have this parse_signed_request function - https://gist.github.com/872837
// And a $config array, which contains your app_secret
$signed_request = parse_signed_request($_REQUEST['signed_request'], $config['AppSecret']);
if ($signed_request['app_data'] === 'foo') {
include('foo.html');
} else if ($signed_request['app_data'] === 'bar') {
include('bar.html');
} else {
include('index.html');
}

Related

Is there a way to conditionally block a referer in Google Tag Manager?

We have an issue with GA where conversion sources are being lost after a user clicks on a link to our site, goes to the site, and then logs in using Facebook.
My understanding from GTM tips - implement referral exclusions is that our site sees the document.referrer as coming from Facebook and starts a new session, losing the original referrer. If we know the landing page on our site the user sees after logging into Facebook, is it possible to add code to exclude the FB referrer only for that page? I.e, on that one page we have something like (from the linked article):
function() {
var referrals = [
'facebook.com'
];
var hname = new RegExp('https?://([^/:]+)').exec({{Referrer}});
if (hname) {
for (var i = referrals.length; i--;) {
if (new RegExp(referrals[i] + '$').test(hname[1])) {
return null;
}
}
}
return {{Referrer}};
}
We can't simply add facebook.com to the GA exclusion list, as we have campaigns running on Facebook as well, so we'd still need visibility to organic traffic coming from Facebook.
You can copy GA tag and modify the copy with this code. Then fire that copy only on pages where you need to block referrer and block original GA tag on same pages.
If you don't want to have multiple GA pageview tags then use Lookup Table variable based on page paths. For some pages this variable should return your code as a Custom JavaScript variable and a default value should be {{Referrer}}.

Facebook PHP SDK usage stand alone - how do the Facebook sessions/cookies work?

I'm utilizing the Facebook PHP SDK on its own. I do not want to use the JS SDK at all.
Because getUser(); from the SDK can return a user id even if the user is not logged in, I have opted for using a try/catch statement to check if the user is logged in.
try
{
$me = $CI->facebook->api('/me');
$CI->our_fb['is_fb']='YES';
echo "hello";
}
catch(FacebookApiException $e)
{
echo "catch";
}
This statement is included in the global include file of all of my files (for simplicity).
So, depending on the situation, I generate a Facebook login URL. The expected functionality is that the user logins to Facebook, authorises the app, is returned to the redirect URI set in the login URL at which point the try statement will execute, and $CI->our_fb['is_fb'] will be set.
This is however not happening.
If the user is already logged into Facebook and the app is authorised, it works perfectly. SUCCESS
If the user is not logged into Facebook, once redirected the variable is not set. FAILURE
If the user is logged in but the app is NOT authorised after redirect the variable is not set. FAILURE.
In the latter two cases if you simply refresh the page, the variable is set - SUCCESS. Refreshing the page is however unnecessary/pointless extra effort.
My problem is that if you need to login to FB/or authorise the app e.g the first time you login with FB, you have an additional unneeded refresh, and I don't know why.
I suspect it is something to do with the cookie/session? Which saves the access token that I assume is returned/passed to the SDK automatically not being set at the same time?
Anyone got any ideas?
If you're having an app on facebook (tab or canvas). PHP SDK only get the User ID on initial loading of a page because a signed_request is sent with the request to your app.
But, when the app refreshes, the signed_request is lost (as it's facebook who send it).
So, in this case, you can append the signed_request to every URLs your use in your app - but that's really not optimal as the signed_request won't be regenarated - neither refreshed.
Your only real option is to rely on the JS SDK to set cookie correctly and allow getUser to work as expected. This is required because you're considered as a third-party app in Facebook (being in an iframe) and most browser will block you from setting cookies - so you need a work around handled by the JS SDK for you. You can search for cross-domain cookies or third-party cookie for explanation about the workarounds, but these workaround only work via JS scripting and iframe management.
Also, be sure to setup the JS SDK correctly: channel file, cookie allowed, and send P3P headers (for IE).
You can also check this related question: A proper approach to FB auth
About website, the same mostly stays (but you have no signed_request). At this point, seriously consider using the JS SDK as it's way easier. Or else, you can make sure your app flow follow these guidelines: https://developers.facebook.com/docs/concepts/login/login-architecture/
The way I am seeing this is, you are trying to avoid that refresh if the user is not logged in and precedes to log in after the page has initially loaded.
So what you can do is make an ajax request to another page on your site, say for example id.php, which just loads the php sdk and echo $userid; and then you can grab the user id after login without the refresh.
Basically the cookie is used to save the signed request and session is used to save 'state', 'code', 'access_token', 'user_id'. If the above are present PHP SDK uses them, no matter if they are valid or not.
I think your problem lies in the CODE sent by facebook. Specifically these lines in base_facebook.php:
if ($code && $code != $this->getPersistentData('code')) {
$access_token = $this->getAccessTokenFromCode($code);
...
protected function getAccessTokenFromCode($code, $redirect_uri = null) {
if (empty($code)) {
return false;
}
if ($redirect_uri === null) {
$redirect_uri = $this->getCurrentUrl();
}
...
Because CODE is issued for specific url sometimes there is such situation: Visitor arrives on www.example.com. He givies permissions and is redirected to example.com/login. But the code is not valid there, so the getUserAccessToken returns false. When you refresh the page you get same urls and everything's fine.
You're on the right track of not using getUser() because as I wrote above it's taken from the session if available.

facebook redirect app from canvas page to fan page

im building facebook app as a iframe app in fan page. My problem at the moment is next: i added facebook request dialog (http://developers.facebook.com/docs/reference/dialogs/requests), and everything goes well except for one thing: when a user gets notification, the links goes to canvas page, not to fan page (where i would like to go...)
Since i cant convince facebook to add some funcionality (that would be great), im looking for a way to automaticly redirect from app canvas page to fan page, where this app is added as iframe tab.
I hope somebody understands what i want to do... :)
thanks, Peter
I also wanted to make sure that users view my Facebook app via a Facebook Page Tab (rather than via the Facebook App page or by directly viewing the actual site itself). I have managed to achieve it with this Javascript in a <script> tag in the head of my document (tested Mac/PC FF,Chrome,Opera,IE6-8,Safari).
<script type="text/javascript">
function NotInFacebookFrame() {
return top === self;
}
function ReferrerIsFacebookApp() {
if(document.referrer) {
return document.referrer.indexOf("apps.facebook.com") != -1;
}
return false;
}
if (NotInFacebookFrame() || ReferrerIsFacebookApp()) {
top.location.replace("http://permalink-to-my-facebook-page-tab");
}
</script>
If I understand you correctly, you can do this:
top.location.href='http://www.facebook.com/YOUR_PAGE_NAME?sk=app_YOUR_APP_ID'
or you can use a header to redirect to that url. This will redirect to the application's tab on your fan page.
My application is quite dynamic and I never know which page it's added to. So when I used URL 'http://www.facebook.com/YOUR_PAGE_NAME?sk=app_YOUR_APP_ID' it only redirected me to page, but not to application tab. What I do is:
1) I get page id from signed_request (the encrypted in base64url parameter that your app gets once someone comes to the page, so you have to decrypt it and pick id value from JSON page object)
2) Then I get page data from https://graph.facebook.com/PAGE_ID_YOUR_GET. You get JSON object with some page data in response in JSON format.
3) Only after point 2 I get 'link' value of page from response. It's like http://www.facebook.com/pages/Some-Page-Name
4) And finally I add '?sk=app_YOUR_APP_ID' to page link.
Maybe that's too complicated, but that's the only way it worked for me the way I expected (redirecting exactly to page application tab).
<script type="text/javascript">
function NotInFacebookFrame() {
return top === self;
}
function ReferrerIsFacebookApp() {
if(document.referrer) {
return document.referrer.indexOf("apps.facebook.com") == -1;
}
return false;
}
if (NotInFacebookFrame() || ReferrerIsFacebookApp()) {
top.location.replace("http://permalink-to-my-facebook-page-tab");
}
</script>

Facebook API: FB.Connect.requireSession issues

I have a Facebook app that is built as an iFrame. I am using the JavaScript client API loaded via:
http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php
In my initialization code, I use the requireLogin method to ensure that the user has authorized the app. I have found this to be necessary to be able to gather the user's name, avatar, etc. for the scoreboard. Here's a representative code snippet:
FB_RequireFeatures(["Connect","Api"], function() {
FB.Facebook.init("...API_KEY_HERE...", "xd_receiver.htm");
var api = FB.Facebook.apiClient;
api.requireLogin(function() {
api.users_getInfo(
FB.Connect.get_loggedInUser(),
["name", "pic_square", "profile_url"],
function(users, ex) {
/* use the data here */
});
});
});
This causes the iframe to redirect causing the Facebook authorization screen to load within my app's iFrame. This looks junky and is somewhat confusing to the user, e.g. there are two Facebook bars, etc.
Question 1: is there anything I can do to clean this up while still implementing as an iFrame, and still using the JavaScript APIs?
According to the FB API documentation:
FB.ApiClient.requireLogin
This method is deprecated - use
FB.Connect.requireSession instead.
My experience though when I replace api.requireLogin with FB.Connect.requireSession it never gets invoked. I'd prefer the recommended way of doing it but I struggled and was not able to find a way to get it to work. I tried adding various arguments for the other two parameters as well with seemingly no effect. My expectation is that this method will load in a dialog box inside my app iFrame with a similar authorization message.
Question 2: what am I missing with getting FB.Connect.requireSession to properly prompt the user for authorization?
Finally, at the end of the game, the app prompts the user for the ability to publish their score to their stream via FB.Connect.streamPublish. Which leads me to...
Question 3: am I loading the correct features? Do I need both "Api" and "Connect"? Am I missing any others?
Here is a summary of the changes I needed to make to clean up the authorization process. It appears that iFrames must fully redirect to properly authorize. I tried using the FBConnect authorization but it was a strange experience of popup windows and FBConnect buttons.
Ultimately this game me the expected experience that I've seen with other FB apps:
FB_RequireFeatures(["Connect","Api"], function() {
var apiKey = "...",
canvasUrl = "http://apps.facebook.com/...";
function authRedirect() {
// need to break out of iFrame
window.top.location.href = "http://www.facebook.com/login.php?v=1.0&api_key="+encodeURIComponent(apiKey)+"&next="+encodeURIComponent(canvasUrl)+"&canvas=";
}
FB.Facebook.init(apiKey, "xd_receiver.htm");
FB.ensureInit(function() {
FB.Connect.ifUserConnected(
function() {
var uid = FB.Connect.get_loggedInUser();
if (!uid) {
authRedirect();
return;
}
FB.Facebook.apiClient.users_getInfo(
uid,
["name", "pic_square", "profile_url"],
function(users, ex) {
/* user the data here */
});
},
authRedirect);
});
For iFrames, the solution was ultimately to redirect to the login URL which becomes the authorization URL if they are not already logged in.
I think that FB.requireSession only works from a FB connect site outside of
Facebook. If you're using an app hosted on apps.facebook.com use the php api
call instead,
$facebook = new Facebook($appapikey, $appsecret);
$facebook->require_login();
or link to the login page.
Of these methods to login
* Using the PHP client library
* Directing users to login.php
* Including the requirelogin attribute in a link or form
* Using FBML
only the first 2 are available to iframe apps hosted on apps.facebook.com
I think requirelogin and fbml only work with fbml canvas apps.
see
http://wiki.developers.facebook.com/index.php/Authorization_and_Authentication_for_Canvas_Page_Applications_on_Facebook
Question 1: is there anything I can do
to clean this up while still
implementing as an iFrame, and still
using the JavaScript APIs?
Question 2: what am I missing with
getting FB.Connect.requireSession to
properly prompt the user for
authorization?
Please have a look at this. This article discusses correct use of require session and provides links on how to implement that. And yes, you are right, the requireLogin has been deprecated and won't help any more.
Question 3: am I loading the correct
features? Do I need both "Api" and
"Connect"? Am I missing any others?
As far as I know, you can use both API and Connect together, basically you access Facebook's API with the help of JavaScript.
For iframe apps however, there is no great help and minimum support of API with some handful functionality available. See this for more info.
This causes the iframe to redirect
causing the Facebook authorization
screen to load within my app's iFrame.
This looks junky and is somewhat
confusing to the user, e.g. there are
two Facebook bars, etc.
Finally and personally I have not seen any iframe app requiring user to add the app first. This will create the problem of two bars you mentioned as quoted above.
The link I posted at the beginning of my answer has some useful links to get you started and decide the next-steps or possibly making changes to your apps.

Facebook iFrame app links send outside

any FB experts here? After reading about 15 thread on FB forums I don'T know where to go next =(
We have an iFrame FB app: http://apps.facebook.com/myapp
all links used in app are like: href="http://www.mysite.com/index.php?parm=value ..."
now when I click on any link, I am out of facebook and land on our server.
Don't really know how to solve this! using links with facebook server ins't an option.
Thanks guys for some hints!
This is because Facebook loses all of the authentication variables and is unable to determine that the concurrent requests belong to the same session, which results in "breaking out" of the iframe and ending up on your own server pages instead of within Facebook.
Anytime a page is served through Facebook, the request received at your server will include a number of GET variables sent by Facebook, these variables are collectively known as the "Facebook Authentication Signature" which proves to your server that the request actually is valid and originated from Facebook; likewise, when your server sends the response, the inclusion of these variables proves to Facebook (by a combination of the session_key, api_key, and sig digest) that your server is the application it claims to be.
In order to persist the session within your iframe app without breaking out to your server, you must include these parameters on each link's query string. Here is a simple function that will produce the query string for you, so you simply need to append the result of this function to each link URL in your application:
function fb_sig_urlQueryString() {
$query = '';
foreach ($_GET as $k => $v) {
if (strpos($k, 'fb_sig') === 0) {
if ($i++ > 1) $query .= '&';
$query .= $k.'='.$v;
}
}
return $query;
}
Do you mean clicking a link in the iframe goes to your site intead? If you do you could try setting the "target" attribute of the html anchor to "_self" which should open the link in the iFrame.
I was having this problem. After appending all the FB querystring parameters from the initial IFrame to each of the urls in my links, they started opening in the right windows.
See here for an example http://www.keywordintellect.com/facebook-development/facebook-iframe-authentication-across-pages-ajax-requests/