like detail page inside timeline page tab - facebook-graph-api

Question

I have a facebook timeline page tab app that's running inside an IFRAME on a fan page.
On the main page of the app, we show 10 jobs and users can click through to the detail page of one single book.
We want to add a LIKE button on those detail pages, so that users on facebook can like and share that job in their stream.
The app is totally dynamic so different customers can install the app on their fan page and list their own jobs. (ex. coca-cola installs it on his coca-cola page and lists jobs within the company. then microsoft installs it as well and does the same)
The problem concerns og:metatags and redirection of the liked detail page link, right inside the right facebook company page and relative right detail page showing the job.
I can get these two things done and working but not at the same time:
A. Facebook gets correctly the og:metatags in the head section, with image, title, description when I use the following implementation of the like button (without "data-href" extra attribute)
<div class="fb-like"
data-send="false"
data-layout="button_count"
data-show-faces="false"
data-action="like"
data-font="arial">
</div>
The problem is that not specifying the data-href attribute (and the og:url meta is totally ignored) this is gonna create a link to the current page => intended current page inside an iframe => so the result will be that when you click the shared job on facebook you will be redirected NOT inside the facebook app -right page -right detail page, but to the detail page on the server that hostes the app.
B. If I instead specify the data-href attribute
<div class="fb-like"
data-href=<%= "http://www.facebook.com/pages/:page/#{session[:fb_page_id]}?v=app_XXXXXXX&app_data=#{#job_details.job_id}" %>
data-send="false"
data-layout="button_count"
data-show-faces="false"
data-action="like"
data-font="arial">
</div>
Doing this I can get the right link posted on facebook (so then using &app_data attribute) I can get the perfect redirection working.
BUT on the downside, the og:metatags are totally ignored and instead facebook picks the page tab metatags (top iframe that hostes the pagetab app) and so I get posted on facebook a crap link that tells about a page on facebook with the page app picture. And the even bigger downside is that when you like a job on the app, all the jobs appear to be liked as well (basically the iFrame app becomes the liked page... instead of being the job detail page picked as liked page)
Is out there any genius that knows how to sort this out? I need to get the A an B working at the same time to get the requested result!!!!
Please help!!! :(

Answer 1

I've found the solution myself.
Like button => use href and ref attributes, especially put on the ref the id of your facebook fan page. Passing the current page url will also load and share correctly the og:metatags.
<div class="fb-like"
data-send="false"
data-show-faces="false"
data-layout="button_count"
data-font="arial"
data-action="recommend"
href=<%= "https://app.com/jobs/job_details.job_id" %>
ref=<%= FB_PAGE_ID %>>
</div>
Once you pass the ref attribute to facebook, on your wall the link will be posted by facebook with an extra query string appended with in particular the "fb_ref" parameter:
for example a button with parameters:
href=<%= "https://app.com/jobs/job_details.job_id" %>
and
ref=<%= 332325142248470 %>
becomes:
https://app.com/jobs/a0Ed000000a54bkEAA?fb_ref=332325142248470&fb_source=profile_multiline
when the user clicks the link we want to be redirected back right inside the correct page tab app and right job details page. To achieve this we set up into the controller/show action (that in ruby corrisponds to controller_name/id) a new redirection, remembering that ref will put inside a query string after our href link:
if params[:fb_ref]
redirect_to "http://www.facebook.com/pages/:page/#{params[:fb_ref]}?v=app_xxxxx&app_data=#{params[:id]}"
end
As you can see we create a new dynamic url that will use the "app_data" parameter of the facebook "signed_riquest" (http://developers.facebook.com/docs/authentication/signed_request/) in order to pass to our application the right detail page to be visualized and also redirect us to the right facebook page.
once done this we have just to manage correctly the new app_data parameter that comes now with the signed_request. In my case in one of my main controller I've used:
if fb_signed_request[:app_data]
redirect_to "/jobs/#{session[:app_data]}"
end
And we will see our app loading the right page and the right job detail page!
Hope is gonna help other people!