I am planning to create some dynamic content in a Facebook tab for my fan page. It should have content displayed if the visitor is not a fan, and then upon them clicking the Like button, changing the content to display hidden carrots (metaphorically). Is it possible to capture the event of the click on the Like button from inside the iframe?
On a Facebook fan page, when the user clicks the Like button, the whole page gets reloaded and Facebook sends an HTTP post to your website with a parameter called signed_request that you would need to decode and look at with server code, not javascript. The code to decode it will obviously vary depending on what language you are using, but the process is documented on Facebooks site. Once decoded, you will need to look at the page.liked value.
Related
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?
The Facebook API docs say the parameter, "app_data," should be used to customize tabs within a Facebook Fan Page.
However, when users add our tab to their page, the "app_data" param gets lost every time, meaning the tabs aren't customized per Fan Page as they should be.
For instance, we want this page to get rendered for one client: http://www.facebook.com/apps/application.php?id=198939416792674&sk=app_198939416792674&app_data=15
After the client adds this URL as a tab to his Fan Page, though, the tab URL loses the "app_data" parameter. The page rendered no longer reflects the data specific to this client.
We need the tabs to contain a parameter specific to each Fan Page. We thought "app_data" was the right approach.
Any clues what we're doing wrong?
The best way to do what you trying to achieve is to customise the content based on the page['id'] that is passed to you via a signed request.
I am currently developing UI for a facebook app. Basically, the game is shown on the canvas page and it has navigation in a tab form.
What I need is that when a user clicks "friends" to invite people, the page will show over the game(the game is still in background, and running as it should be). So the page must not reload. To do this I placed the url of the friends requests in the src of an <iframe> and using jquery to hide/show the divs but the problem is the <iframe> will also contain the header, footer and all like facebook.com, but I just want the content because the user is already on facebook. Is there a better approach than what I'm doing? How would I accomplish this?
A good visual example is the navigation of "City of Wonders" facebook app.
You'll need to write a server side script that uses the facebook API to get a list of friends. Then you simply generate the HTML that is necessary to display and use this information.
Also, instead of using a an <iframe></iframe>you could just use a <div>, and use javascript to populate it's innerhtml (via ajax).
i have one problem with facebook landing page. i created facebook landing page through static fbml app but i have one problem with like button, user must like the page before he will navigate to another page.
i want to do same functionality in my landing page,
http://www.facebook.com/BusinessofCinema?v=app_6009294086.
anyone know about this please help me .
thanks inadvance......
At this point you'll probably want to go with iframe based Facebook page tabs instead, now that these have become available and fbml based apps are being phased out. Among other advantages, the signed_request parameter that Facebook sends to an iframe based tab app includes a flag that indicates whether the user is a fan of the page.
Now that iframes are the only way to create new Facebook apps and FBML is being phased out, you need a new way to do it.
When your app URL is loaded, it is passed a signed_request POST parameter. This parameter contains the information you need. However, it is packed and encoded so it requires some manipulation to get the right info out.
First, split the signed_request on the '.' character. The first part is the signature. The second part is the encoded_data
Decode the encoded_data into a JSON string using the URLBase64Decode function equivalent in your server-side programming language
The JSON object contains a node called "page". This contains a node called "liked".
If "liked" is true, the user liked the page and you display the "liked" version of your app. If false, show the "Please like me" version of the site.
The FBML way will continue to work the way you have it live right now, but for anyone building a new Facebook app, this is the way to do.
writing my first facebook webapp and i have some questions. I'm using their new Graph API + JS library.
The idea is that in order to use my webapp, user has to 'Like' facebook page A.
Suppose user is logged in. I have to check if he 'likes' page A. If user doesn't like that page, i display 'fan box' via
FB.XFBML.parse('<fb:fan profile_id="A's id" stream="0" connections="0" width="450"></fb:fan>');
Now, this fan box with 'Like' button is rendered in iframe that has src set to facebook domain.
Problem: i want to know when user clicks on 'Like' button so that i can display the rest of my webapp. The only possible solution that i can think of is polling every second facebook graph server which is really bad.
i can't attach 'onClick' event on that button cause it's inside iframe pointed to facebook domain (can't access it at all using JS)
i tried getting the contents of this iframe from my server and display it in iframe with empty src property so that i can access its elements - doesn't work, fan box is messed up.
There is no way that i know of to send 'i want to like that page' request to Graph server on behalf of the user.
I'm stumped. I really doubt that polling is the right way to solve this problem :)
You can get the onclick event by using the fbml code of like button instead of iframe code.
Facebook provides FB.event.subscribe which triggers when somebody clicks like button.
A complete tutorial is here.In your case you can write the code to refresh the page on like button click. and check for like condition on page load. so that if current user has liked the page you can redirect him to application page.