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&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
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
Related
I am currently integrating a HTML5 app into Facebook and testing the iFrame mechanism. I am self-hosting the game content however when I point the Facebook app system to the content, the page is not being displayed.
My hosted page is a simple Hello World app for now as illustrated below, and can be found at: https://bluebeck.space/alienz/fb/
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>Alienz</title>
</head>
<body>
<div><p>Hello, World!</p></div>
</body>
</html>
The app configuration in the Facebook app developer console appears as:
I have used the following HTTPS url which has a valid SSL certificate as required:
The app page contents are empty and upon inspection of the Facebook app page DOM, it is apparent that the iframe contents have been stripped from the hosted page:
My expected result would be that the contents of the self-hosted webpage would be visible in the Facebook app page. The actual result is that the contents are empty and the DOM contains an iframe tag with empty head and body tags.
Thanks to #cbroe I was able to pin this down to an X-Frame-Options error. My solution has been to include the following php headers to the page:
<?php
header('X-Frame-Options: ALLOW-FROM https://apps.facebook.com/');
header('Content-Security-Policy: frame-ancestors https://apps.facebook.com/');
?>
When posting a link directly to a Tab on a Facebook Page,
https://www.facebook.com/PAGENAME?sk=app_APPID
Facebook picks up the Page's Open Graph <meta> tags, which means the link post gets associated with the Page's profile picture, name, and a description of "Page • n like this".
I had hoped that Facebook would instead use the og <meta> tags from the app's HTML, allowing link posts to be customized.
What's the best way to provide a direct link to a specific Tab on a Facebook Page with custom content in the link post?
The best way I can see to have this accomplished would be to have a redirector page hosted on a website (www.example.com/fb/redirectorForApp.html) that does a redirect on a javascript timeout. That redirector page has the og tags you want to have specified. The redirect will land the person at the https://www.facebook.com/PAGENAME?sk=app_APPID. What's cool about the javascript redirect is that the redirect is not ran by the linter, so it can pickup the correct og: tags, while also allowing you to have the user go directly to the page tab. Good luck!
Since the content of your Page Tab is located inside an iFrame the Facebook scraper will always see first the meta tags outside the iFrame which are set by Facebook and which describe your Facebook Page. Try the url in the Facebook tool and see at the bottom of the page what the scraper sees for your url. Unfortunately you can not change those Facebook meta tags from within your iFrame. That is why the only way to achieve what you want is to go by a redirect. I have done this before using the following code:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" xmlns:og="http://ogp.me/ns#">
<head>
<!-- Facebook meta tags -->
<meta property="og:title" content="bla"/>
<meta property="og:url" content="https://yourdomain.com/redirect.html"/>
<meta property="og:image" content="https://yourdomain.com/thumb.png"/>
<meta property="og:site_name" content="bla"/>
<meta property="fb:admins" content="1234"/>
<meta property="og:description" content="bla"/>
<meta property="og:type" content="website"/>
<meta property="og:video" content="https://yourdomain.com/bla.swf?param=bla"/>
<meta property="og:video:width" content="398"/>
<meta property="og:video:height" content="224"/>
<meta property="og:locale" content="de_DE"/>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<!-- Check whether inside facebook -->
<script type="text/javascript">
function NotInFacebookFrame() {
return top === self;
}
function ReferrerIsFacebookApp() {
if(document.referrer) {
return document.referrer.indexOf("facebook.com") !== -1;
}
return false;
}
if (NotInFacebookFrame() || ReferrerIsFacebookApp()) {
top.location.replace("https://www.facebook.com/PAGENAME?sk=app_APPID");
}
</script>
<!-- content here -->
</body>
</html>
I'm a new user so I can't comment on DMCS's answer yet :-)
But I had to do this once, and it was also through a "redirector". However there was no need to set a timeout, simply:
<html>
<head>
<meta ...> <!-- OG tags -->
<script type="text/javascript">
location = 'http://www.facebook.com/PAGENAME?sk=app_APPID';
</script>
</head>
</html>
So no delay.
BTW. if you check the tab URL here, you'll see that it has a redirect path via its og:url tag that redirects from https://www.facebook.com/PAGENAME?sk=app_APPID to https://www.facebook.com/PAGENAME. Maybe you should check if setting the Default Landing Tab to your tab changes anything.
I too have been using the redirect method, but it is insufficient where users have an incentive to share content (for example in voting apps): all too often they copy the page tab URL from their browser and the shared content ends up having the generic page profile information associated with it.
But the good news is there is a solution! It's fairly complex though - especially if you have more than one subpage with different og:tags (such as in a voting competition for example).
How it works?
This solution is to set up ogtags on the page on your server to have a canonical url which redirects to the canvas app page - canvas apps are allowed to specify their own custom ogtags in this fashion. If you then redirect all users to the proper page tab, the canvas page will effectively not be viewable, yet it will allow you to provide custom ogtags for your page tab app.
The steps
Create a canvas page for your app (use the same urls as for the page tab)
Add og:tags to your page just as you would normally
Set the og:url parameter to the canvas app's url (http://apps.facebook.com/yourapp/...etc)
Add code so that when the request is coming from outside of the page tab iframe (in the canvas or directly on your server) you redirect the user to the proper page tab
I was having the same question... so here's what I did:
Redirection Page: A page that will get a parameter & set the tags for your sharing services or at least the OpenGraph tags. Then this page will craft a URL to a second page (Facebook Pagetab) like this:
//{facebook-page.link}/?sk=app_{your-app-id}&app_data=X
To obtain {facebook-page.link} see this example request:
See example: https://graph.facebook.com/200866110154
See documentation: https://developers.facebook.com/docs/reference/php/facebook-api/
Do not do the redirect immediately everytime, will not work. Instead do the redirect on certain conditions. Example:
if (strpos($_SERVER['HTTP_REFERER'], '//www.facebook.com/')) {
drupal_add_js('window.location = "' . $url_final . '"', 'inline');
}
Remember, to craft the URL use the page link attribute obtained from Facebook, not the ID of the page, otherwise you will lose the app_data parameter in the signed request.
Facebook Pagetab: A page called inside an Iframe of a tab of a Facebook page. This page will get the SignedRequest with the app_data and will load specific content that the end user will see.
Remember that app_data can also be an array (or a serialized object):
app_data[var1]=value1&app_data[var2]=value2
Tip: If you are using Drupal you can avoid the final redirect, just overwrite $_GET['q'] to the page need. This way you don't bootstrap Drupal only to do another redirect. You can achieve this using hook_init.
Tip: Save your requests to the Facebook API to speed up future calls. Every request to the graph API takes 300ms at least. Database access is obviously faster.
I have an app that is running in iframe canvas mode. And, I am trying to add an fb:like here in this app. I read the documentation and looked at other explanations, but nothing seems to work properly. I will share the details, but when a user hits the like button, I would like to display something like the following (which is what techcrunch and other sites are doing) on user's wall
John Smith likes a link.
[APP LOGO] My App's page title link: my_app_url
Basic description about the current page
whereas, Facebook posts this, which is dull and ugly:
John Smith likes a link.
My App Name (which is a link pointing to the app page) apps.facebook.com
apps.facebook.com (not my app url, but generic apps.facebook.com url)
Basically, I looked at the techcrunch site, FB docs, etc. And, what I put in my code is this:
<fb:like href="http://apps.facebook.com/myapp/pageid" send="false" layout="button_count" width="450" show_faces="false" font=""></fb:like>
I init FB using:
$("<div id='fb-root'></div>").appendTo('body');
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
window.fbAsyncInit = function() {
FB.init({
appId:appID, cookie:true, status:true, xfbml:true,
channelUrl: mySiteURL + 'fb_channel-1.0.2.html'
});
}
And, on the page I also put the following as meta tags:
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta property="og:site_name" content="Site Name-1"/>
<meta property="og:title" content="Title-1"/>
<meta property="og:image" content="http://mysite.com/logo.png"/>
<meta property="og:description" content="Description-1"/>
<meta name="description" content="Description-2"/>
</head>
But, when the user hits the like button, none of this shows up???
Any help is really really appreciated!
Thanks in advance!
Check this link for solution. It worked for me
http://forum.developers.facebook.net/viewtopic.php?pid=354148#p354148
I've tried every possible combination and suggestion in adding og meta tags to my page, but none of them worked. When testing URL with facebook URL Linter it always returned default values defined on application admin page. Like it doesn't see og meta tags.
And what was more interesting is that when I look the page source, og meta tags existed but haven't been evaluated by facebook or linter.
Now, in my canvas page I defined login/authentication (and depending redirection etc) at the top, before html and og meta tags definition, and that was the main problem.
If you perform FB login redirection/authentication before providing og meta tags,
then FB crawlers/linter will not be able to detect your meta info and will try to auto-fill it.
I am creating a Facebook iFrame tab application that features weekly interviews and uses a CMS to manage the interview content. I would like to be able to post a link to my newsfeed that points to the application tab and will show a preview with metadata in the newsfeed. Currently, there is no metadata showing up and it is just a blank link. How can I get Facebook to show a preview of the link to the application tab, the same as it would show a preview of a link to any website when posting to my newsfeed?
I know this was asked a long time ago but I figured I'll share more details on how I went about solving this issue:
Facebook does not read metadata from iFrame or application tabs. In other words, when you share a link of a Facebook tab, Facebook will override the meta data values of the iFrame page with the Page’s default ones. In order to work around this limitation, you can set up a redirect page with custom open graph meta tags. Here is how:
Create a redirect page called redirect.php with meta data information:
<html>
<head>
<title>Name of App</title>
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<!-- This is a page redirect -->
<meta HTTP-EQUIV="REFRESH" content="0; url=URL_OF_FACEBOOK_APP">
</head>
</html>
Use Facebook URL Linter to scrape page (https://developers.facebook.com/tools/debug)
Enter the address of your app’s root URL.
Use Google Shortner and enter the address of the redirect.php that you set up.
http://goo.gl/
Now you can share the new Google Shortner link
Facebook doesn't read metadata from your iframed tab, but you can set up a redirect page with custom Open Graph meta tags as described in the Facebook Developers Forum here: http://forum.developers.facebook.net/viewtopic.php?id=96146
UPDATE 2012.05.20: forum.developers.facebook.net has been replaced by facebook.stackoverflow.com. The link I provided no longer works, but there are some helpful related threads on the new forum:
http://facebook.stackoverflow.com/questions/8407013/open-graph-information-for-a-link-to-a-page-tab
http://facebook.stackoverflow.com/questions/7197919/how-can-i-301-redirect-a-page-in-the-open-graph-and-retain-facebook-like-informa
http://facebook.stackoverflow.com/questions/6053657/open-graph-pages-can-i-use-a-stub-forwarding-page
I'm trying to integrate Facebook into a site I'm developing, I have created a Facebook Page for the business & a Facebook app too - I am very confused with the documentation & terminology that Facebook uses.
I am using FBML to add a Recommend button to the footer of my site so that users can recommend that particular page but when I click on it, it creates a brand new Facebook page for that URI & seemingly ignores all the facebook & open graph metatag info.
FYI, these are the metatags that I'm using:
<meta property="og:title" content="My Page title"/>
<meta property="og:type" content="company"/>
<meta property="og:url" content="http://mysite.com/"/>
<meta property="og:image" content="http://mysiteimage.jpg"/>
<meta property="og:site_name" content="My Site Name"/>
<meta property="fb:admins" content="My_FB_Admin_ID"/>
<meta property="fb:page_id" content="My_FB_Page_ID" />
<meta property="fb:app_id" content="My_FB_App_ID" />
<meta property="og:description" content="Desctiption of page"/>
This is the FBML I'm using:
<fb:like width="940" action="recommend" font="lucida grande"></fb:like>
This is the Facebook Javascript SDK code I'm adding to each page before the </body> tag (it is only being added once per page):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'My_FB_App_ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Does anyone have any idea what the heck I should be doing? Should I be using an app as the fan page or the page I'm already using??
I would also really like to be able to 'Like/Recommend' the actual Facebook page from the site, is this possible?
Many thanks in advance.
Zander
The issue has to do with the meta property og:type. Anything other than article like a video/audio etc. will create a new Facebook Page on the open social graph.
If you set og:type to article, or remove it altogether, the issue will go away.
I hope that helps.
No mather where you place the "like" button you can specify the url on it, so in this wayonly one "page" is created ex:
your created html location = http://mywebsite.com
some other stuff
<!-- like button -->
<fb:like href="http://mywebsite.com" layout="button_count" show_faces="false" width="200" font="lucida grande"></fb:like>
<!-- end like button -->
your other created html location = http://mywebsite.com/help
some other stuff
<!-- like button -->
<fb:like href="http://mywebsite.com" layout="button_count" show_faces="false" width="200" font="lucida grande"></fb:like>
<!-- end like button -->
as you see here no mather what page your "like" button allways create the same page, even more you can specify your page aplication on it.
Remember even the "meta property" tags allways will create the same page if you specify the url and same content, if you left some part blank the facebook api will asume the current url and not will take any of the other parameters.Tha same apply to comments you can have the same comments box with the same comments on it if you specify the url.