Facebook Like Button on iFrame-based FB Pages App - Problem

Question

I'm experiencing problems adding a like button to an iFrame based page within my FB fan pages tabs. I'm using the JavaScript SDK and the Open Graph to specify the page I'd like the user to "like" (which is the current page within my FB pages).

The page is iFrame based, is an app in FB, and is accessed via the FB Page tabs of my FB Page. The problem is that Facebook is assigning the Like to my FB Page itself (my FB page homepage if you will) rather than the page In question (my test page – it’s set up as an app and appears in my FB Pages tabs under the name “og test”).

I’ve tried running the target page for the iFrame through the FB linter and its giving a strange error saying I’ve supplied the Open Graph Type of “Other” (I haven’t, I’ve supplied “website” in my META tag) see below:

http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.airport-parking-quote.co.uk%2Ffacebook%2Fog-test.php

Also, from looking at the debug page it seems that Facebook is either ignoring the QueryString in my “og:url” value and therefore only seeing my FB page’s vanity URL, or there is some kind of block on being able to Like iFrame based app pages.

Can anyone shed any light on this? I thought from this article it would be possible to achieve what I am trying to do:

http://www.insidefacebook.com/2010/09/09/like-buttons-app-content/

The code for the iFrame target page is:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    <title>Test Like</title>
    <meta property="og:title" content="OG Test"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="https://www.facebook.com/EssentialTravel?sk=app_275969292428556"/>
    <meta property="og:image" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="fb:admins" content="100002424161307"/>
    <meta property="fb:app_id" content="275969292428556"/>
    <meta property="og:description" content="OG test through canvas page"/>
  </head>
  <body>
  <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js"></script>
  <script>
    FB.init({
      appId  : '275969292428556',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true, // parse XFBML
      oauth  : true // enable OAuth 2.0
    });
  </script>
    Test Page<br>
    <script src="http://connect.facebook.net/en_US/all.js#appId=156081301143077&amp;xfbml=1"></script><fb:like href="https://www.facebook.com/EssentialTravel?sk=app_275969292428556" send="false" width="450" show_faces="false" action="recommend" font=""></fb:like>
  </body>
</html>

Anybody have any ideas?

Thanks,

Pjordanna

score 2 · Accepted Answer · answered Sep 05 '11 at 18:02

2

Unfortunately you can't set up a like button for an actual tab on a page.

As you have found out, trying to make a like button using a url such as https://www.facebook.com/EssentialTravel?sk=app_275969292428556 will just make a like button for the page not the individual tab.

The best way to make a like button for that specific tab would be to just use the URL of the app sitting on your server eg. http://YOURDOMAIN.com/YourAppDirectory

answered Sep 05 '11 at 18:02

Jont

972
5
10

Hi Jon, Thanks for the info. That's where I'd got to with it. I guess I could check to see if the app had been requested by Facebook from within my app when it loads up and if not, redirect the user to the app within my Facbook page. This way if anybody followed the link from the like to my app they would end up on the FB page app, rather than just the app itself. – pjordanna Sep 05 '11 at 18:51
2

Not sure if anybody is seeing this but pjordanna, I have implemented the same mechanism (like pointing to external page which immediately redirects to app within facebook page) and it works nicely (the external page contains all the og meta tags to let FB create a nice newsfeed post). However, I am worried this could violate FB's terms somehow? After all it is not very clear what the user is actually liking behind the scenes, I can imagine scenarios like this being used for fraudulent purposes. – Wouter Mar 09 '12 at 15:58
If you do set it to point at your own server, does Facebook distinguish between pages (using the full path including query)? or would liking http://my.site.com?page=3 be the same as liking http://my.site.com?page=1 – Tobin Rysenga Feb 05 '13 at 17:14

Facebook Like Button on iFrame-based FB Pages App - Problem

1 Answers1