Example: Bejeweled Blitz frequently runs events and promotions that, when clicked, take you to their app page. Once there, the app can see that the page was reached by following the promotional link and forks over the reward.
How is this done? What do I need to do to implement a similar feature? To my knowledge the parent URL is out of bounds due to the domains being different (Facebook vs. my app), so how is the message passed to the app?
Every app (Canvas, Page tab)
You can get data by passing an app_data parameter to any URL linking to a Facebook app. This parameter value will then be added to the signed_request.
As so, this url http://facebook.com/mypage/app_123?app_data=promotion12 will allow you to get promotion12 via the signed_request.
In PHP, this would give you something like this:
$signed_request = $facebook->getSignedRequest();
$app_data = $signed_request['app_data'];
Of course, you could pass any string by there; for example it could be a JSON string.
That's really the heart of getting data from outside to inside an app.
Hope this help you out!
Canvas app
In Canvas app however, it's much simpler, every query parameter will be passed to the app.
So, http://apps.facebook.com/myapp?somedata=hey can be get via:
$data = $_GET['somedata'];
Facebook will just append those parameter to the iframe URL.
Docs
https://developers.facebook.com/docs/reference/login/signed-request/ (was pretty hard to find, damn FB documentation)
This is done with the query parameters passed in the URL that users click on. A clear example is DoubleDownCasino sharing an URL for their users to click on. The link is:
http://apps.facebook.com/doubledowncasino/?pid=PNNTDP&target_url=pid%3APNNTDP
What DoubleDownCasino probably does is once their canvas app loads, they parse the URL for the query params and the pid and target_url parameters help determine what type of "reward" the user gets. Once they redeem it, clicking the same URL won't get the reward again because it can check if the user has already redeemed the offer with the given pid and target_url.
Your question:
Example: Bejeweled Blitz frequently runs events and promotions that, when clicked, take you to their app page. Once there, the app can see that the page was reached by following the promotional link and forks over the reward.
What I explained above is exactly how Bejweled Blitz does it in this post. If you follow through the bit.ly short URL, the URL is:
http://apps.facebook.com/bejeweledblitz/?zgift=0/eTtVUuhF5ipdJmO1jlDhr96MtKjp1NYflJrcOddB6iZDH1y96K%2Bml6gC0%2B5yVN
So answering your question, Bejeweled Blitz run promotions and rewards by appending query parameters, which in this case is zgift, which they can then parse in their app by getting the current URL the user is hitting.
Related
I'm trying to submit a fitness.bikes story from a Windows Phone app. Ideally I'd like it to look the same way it does in the documentation -- a table of stats, and a course map. I'm trying to figure out how to make that happen. Specifically, whether it's possible to make it happen without a 3rd party server hosting the ride data.
Questions:
When I am submitting a course object to Facebook, can I specify all needed ActivityDataPoints to make the map show up, or is something else needed?
In the sample post I've been trying, all I get is the Title, the Image, and the Description. Can I get the table of stats to show up, without needing an external server?
The posts I'm sending are not appearing on the Timeline, even for a test user. They do appear in the Activity Log, and are marked with "Allowed on Timeline", not "Showing on Timeline." I'm using fb:explicitly_shared... shouldn't the post show up?
Ok, after further experimentation, I believe I can answer my own questions:
The fitness.bike activity post data should contain only fb:explicitly_shared, privacy, and course links, and nothing else. For some reason adding created_time makes the post appear in standard layout.
Same answer as above. Table of stats is part of the Map layout Facebook provides.
Same answer as above. Removing the created_time attribute magically makes the post appear correctly on the timeline.
P.S. As far as an external server -- it is necessary only if you want to redirect the user to your own page. Even then, the server can grab the object_id from the URL, grab an access token from Facebook using AppID and AppSecret, then lookup that object (course), extract data out of it, and show on the page.
Hope this helps someone else.
I'm working on a photo contest fb app to run in a fan page tab. the user should be able to share the photo in order for others to vote for them.
supposing image link in iframe is http://example.com/image.php?id=1 for particular photo, pressing share will share this link through iframe. which leads up to the host app itself.
what I need is sharing the whole fb app tab page url with http://example.com/image.php?id=1 open in its Iframe.
is that possible in any way?
thanks for help.
So to give the “alternative” to #Lix’ answer, which focuses on canvas apps, here the analog way for page tab apps:
For some reason Facebook decided to do things differently for page tab apps – different than with canvas apps, you can not pass just any GET parameters to your app by appending them to the facebook.com address of your app, but you have to use the app_data parameter for that.
You call/link to your app in the form https://www.facebook.com/YourPage?v=app_1234567890&app_data=foo – and whatever you put as value for the parameter app_data, you will find in the signed_request parameter that Facebook POSTs to your app on initial(!) load into the iframe.
So you parse the signed_request (or let f.e. the PHP SDK do that for you), and then you find the app_data value in there. If you want to pass more than one single value, you can f.e. also put JSON-encoded data there – then you have to decode that again after you read the app_data value from the signed request.
The docs just shortly mention the app_data parameter, but the principle itself is quite simple.
Now, when it comes to sharing those links, I found that when you use an address in the above form, Facebook tends to cut the parameters from the URL, and treat the whole link as just a link to your Facebook page – it shows the page’s picture and description, and does not even pass your page tab app along, let alone the app_data parameter.
I found the most reliable way around this is not to link to your page tab on Facebook directly, but instead to a URL of your own app. When the scraper visits it, you deliver the relevant OG information. And when it’s a real user visiting, you redirect them to your page tab app, passing the data you need via the app_data parameter as described above. Redirecting can either be done server-side (info on how to detect the scraper server-side via its User-Agent header), or client-side via JavaScript (which the scraper does not “speak”).
Sure it is. All you have to do is be able to extract the information from your application canvas URL. If your canvas URL is something like this:
https://apps.facebook.com/ImadBakir
Then you could place some more info in there, like this:
https://apps.facebook.com/ImadBakir?photo_id=123
Users will share that link and now in your application, you can parse that photo_id parameter and make the needed HTML changes to display the correct image inside your iframe as the page and application loads.
With regard to parsing the the URL parameters, assuming you'll be doing it with JavaScript, you can read more about it in this post:
How can I get query string values in JavaScript?
This is a series of questions about implementation with the Facebook open graph.
So, I make a query to the api as such: $this->facebook->api('me/namespace:action', 'post', $args );
My first query is where do posts appear? For example if I make a call with the parameters as follows:
$args = array(
//'message' => 'I just posted a pub review at PubJudge.com',
'website'=>'www.pubjudge.com',
'user'=>current_url(),
'link' => 'http://www.pubjudge.com/',
'caption' => 'Independent, social, pub reviews.'
);
The post appears on my timeline under 'Activity'
As far as I understand, if a user explicitly shares an action it will appear on the timeline. Is this correct?
Is "fb:explicitly_shared" a parameter that should be passed in the $args array?
Next comes Facebooks custom meta data. In this case my obect is a user, and I pass their URL through the $args array. Facebook then scrapes this array to get data from the custom meta tags on this link. Is this correct?
Does this url have to be the url from which the action is initiated? Can I not have a page on my website which simply generates custom meta tags based on a $_GET variable - this way I can keep all this complicated Facebook stuff independent of the main site.
Does anyone know why Facebook gets data for open graph actions like this anyway?
Finally because Facebook scrapes data like this I cannot test this functionality on my localhost. (I could do but it'd be very complex) What I have opted for instead is a testing.domain.com address to test my website and this functionality whilst having domain.com as my main live stable site.
I have also created two apps.. my main app, and a testing app because if I use my main app I have to change the site url to testing.domain.com which then breaks my stable site. Is this a suitable approach?
As far as I understand, if a user explicitly shares an action it will
appear on the timeline. Is this correct?
Yes, that's correct. You can find more information at the Facebook docs for explicit sharing. To be noted from the docs, you'll have to mark your action as able to explicitly share on your app dashboard and Facebook will have to approve it.
Is "fb:explicitly_shared" a parameter that should be passed in the
$args array?
Yes.
Next comes Facebooks custom meta data. In this case my obect is a
user, and I pass their URL through the $args array. Facebook then
scrapes this array to get data from the custom meta tags on this link.
Is this correct?
Yes, Facebook scrapes the URL you pass so they can get data from the OG tags at that link.
Does this url have to be the url from which the action is initiated?
Can I not have a page on my website which simply generates custom meta
tags based on a $_GET variable - this way I can keep all this
complicated Facebook stuff independent of the main site.
No, it does not have to be the url from which the action is generated. You can have a separate page on your website, and in fact you can even use javascript to redirect users who land on that page to a more appropriate page.
Does anyone know why Facebook gets data for open graph actions like
this anyway?
That's probably a deeper question than you realize. In short, they are trying to create a semantic web. The long answer would be an essay.
Finally because Facebook scrapes data like this I cannot test this
functionality on my localhost.
You can use reverse proxy which works in most cases (I've seen problems with photos if you are using a port for the reverse proxy). Not very complicated. Something like the following works well:
ssh -nN -f -R externalhost.com:49080:localhost:80 your#credentials.biz
I have also created two apps.. my main app, and a testing app because
if I use my main app I have to change the site url to
testing.domain.com which then breaks my stable site. Is this a
suitable approach?
Yes, that's normal. We typically have a development app (localhost), a staging app (external host for testing), and a production app.
I have a Facebook app that is giving me fits. I basically have an app that once the user has liked the app, they can continue through the app. Using the Facebook Javascript API, it will see if the user has logged in, and if not allow them to log in. I pass rather or not they "like" the page from the controller, as well as their language (English or Spanish) to the view via the ViewBag object.
This works both locally and from the staging server; however I have to disable the like check in the view, but the language and like is passed in the viewbag.
I placed language in the view like
<p>The user's language is #ViewBag.lang</p>
and
<p>They like the page? #ViewBag.likes
Like I said, both locally and at the staging server it works; but nothing gets passed through to the Facebook app. I have a conditional check to see if the user likes the page in javascript like:
var likes = #ViewBag.likes
In Facebook, using the console I see that the data isn't passed as well as the before mentioned debugging I tried doing.
I am very new to MVC; is there something I need to enable to make it work through Facebook?
Thanks!
Well the issue is that the Facebook canvas sends an initial POST, this was hitting my POST instead of the GET which was setting these values. See here:
Does Facebook open a canvas app with a Post request? It's causing havoc with my MVC actions
Thanks!
I have defined "book" to be an open graph object in my Facebook app. A book is a logical unit, and the user can view a book in a number of different ways in the app. However, there is no single URL in my app which corresponds to any single book.
I thought I would be able to have a URL which spits out open graph meta data to Facebook behind the scenes. For example http://www.example.com/opengrpah/object_book.php?id=3265 would return the title, author, and other info for a book, but not actually be user visible.
However it appears that Facebook uses the object URL for actions involving the object. If I create an action related to the book (e.g. add a book), then if somebody clicks on the link in the ticker they will go to the object_book.php URL, instead of an actual app page. Thus they will see the meta data but nothing useful.
Is this by design? Certainly an object shouldn't have to correspond to a single user-visible page. Can we not have object data drawn from one URL, but have that object displayed to the user within the context of an app?
How about just redirecting from your Open Graph Object URL to the actual app page? Or how about designing your app pages to provide Open Graph metadata?
I think this could be a tricky solution.
In the app I'm working on we had a similar problem because it is an FB Canvas App, so if the og:url for our objects is something like http://apps.facebook.com/our_namespace/?my_first_obj=0 then FB sees the app itself instead of the object loaded in the app. That is where we ultimately want people to land, but we had to provide a direct URL to our app that provided the proper meta tags, much like your situation. I simply put this in the head of those pages:
<script>
try {
if (top.location.href === window.location.href) {
window.location.replace("http://apps.facebook.com/our_namespace/"+window.location.search);
}
} catch(e) {}
</script>
So if somebody is sent directly to that page, they are immediately redirected to our Canvas App, but Facebook's scraper can still get the correct meta data about the object.
I had a similar problem and I ended up with 2 layers for my objects. One is the "master" object, which is actually the object (book in your case, goal in mine).
Then, I have another "user" object, which is actually an association between the master object and a user. This user object has the url like mysite/user/object and it's what I publish to the fb graph with the "add" action.