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.
Related
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'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
I have a set of pages in my site that are using the FBML method of inserting a FB Recommend button. My problem is that every page on my site shows the exact same recommend count ("557 people recommend this page" even though I just installed the button), and when I've tried to Recommend it myself, it shows up in my news feed with the wrong page title, the wrong URL, and of course, every recommend button on the site is incremented. Here is my code:
og tags (I replaced these with anonymous values to protect my client from looking like they have an idiot developer) ;) :
<meta property="og:title" content="XXX page title"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://abc.xyz.com/path/to/my/page/"/>
<meta property="og:site_name" content="XXX site name"/>
<meta property="fb:admins" content="xxx my facebook id"/>
<meta property="og:description" content="xxx short description"/>
...then just inside the body:
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
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);
}());
</script>
...and then later on in the page (the only reason I'm using the FBML method is so I can track the recommend events in google analytics -- this should be unrelated, but for the purposes of full disclosure, I'm including that code here too)...
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
FB.Event.subscribe('edge.create', function(href, widget) {
_gaq.push(['_trackEvent', '<?php echo $item->type ?>', 'Facebook Recommend', '<?php echo $item->title ?>']);
});
</script>
<!-- FB LIKE BUTTON INSERTED HERE -->
<fb:like href="<?php echo urlencode('http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'] )?>" show_faces="false" width="450" action="recommend" font="arial" colorscheme="dark"></fb:like>
The link that shows up in my feed is http://abc.xyz.com/path/to/my/ (the last segment of the URL is missing), and the title is an old one; I realized that all the pages had the same title when I was setting this up, and so I gave them different titles since. I have run several of my URLs through the URL linter and there are no errors, and all the data looks correct.
Here are two notes:
Since you checked several URLS using the URL Linter and the result came up as expected this means it's a caching problem, read this.
If you are not using Facebook Graph API...or any Facebook related services other than the Like Plugin, then the first Facebook Javascript initialization snippet is not needed but if it's used then (<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>) is not needed.
EDIT:
Based on the comments, some of the pages have more than 50 likes this means you can't change the title anymore:
You can update the attributes of your
page by updating your page's
tags. Note that og:title and og:type
are only editable initially - after
your page receives 50 likes the title
becomes fixed, and after your page
receives 10,000 likes the type becomes
fixed. These properties are fixed to
avoid surprising users who have liked
the page already. Changing the title
or type tags after these limits are
reached does nothing, your page
retains the original title and type.
source [Editing Meta Tags].
BUT if you really need to change the title and you are okay of probably losing the likes' count, then you can add a fake parameter to the end of the URL meta tag so that Facebook thinks it's a new page:
http://www.domain.com/page.php?123
Please note that I've never used this technique with the new Like Plugin.
I have used the following code to implement the like - button:
Header
<!-- Facebook Metatags -->
<meta property="og:image" content="http://mysite/logo.gif"/>
<meta property="og:locality" content="mycity"/>
<meta property="og:country-name" content="Germany"/>
<meta property="og:latitude" content="52.xxxxxxx"/>
<meta property="og:longitude" content="9.xxxxxxx"/>
<meta property="og:type" content="product"/>
<meta property="og:site_name" content="mypage.com"/>
<meta property="og:url" content="http://mypage.de/myproduct/myproductkey"/>
<meta property="og:title" content="Myproduct Description"/>
Body on mypage.de/myproduct/myproductkey
<div id="facebook-likebox">
<script src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script>
<fb:like href="http://mypage.de/myproduct/myproductkey" width="450" height="90" show_faces="false"></fb:like>
</div>
The result is inconsistent: Most of the time it works, but sometimes I get this error:
You failed to provide a valid list of
administators. You need to supply the
administors using either a
\"fb:app_id\" meta tag, or using a
\"fb:admins\" meta tag to specify a
comma-delimited list of Facebook
users.
This error makes no sense because when I call the page later or somebody else calls the page it works again. Any idea what is wrong here.
EDIT
I updated the site with these meta tags
<meta property="fb:admins" content="xxx"/>
<meta property="fb:app_id" content="xxx"/>
I rechecked the ids on https://graph.facebook.com/xxx
But I still get get errors sometimes. The new error is:
The app ID "xxx" specified
within the "fb:app_id" meta tag was
invalid.
But most of the time everyrthing works. Does anybody have any idea on how to solve this issue?
EDIT 1
Our site uses a load balancer and has a lot of external scripts (E-Tracker and other tracking solutions)
EDIT 2
We used LINT https://developers.facebook.com/tools/lint/ to check the page
It gives sometime an error (invalid app_id )and sometimes returns as valid. But the app-id from the meta-tags is allways parsed correctly and it is the valid app-id.
The Facebook Like Plugin requires six attributes when using the open graph meta tags:
og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
So just add your facebook ID:
<meta property="fb:admins" content="your_FB_ID"/>
I spent a good couple of hours on this blasted Like button, but it is finally working for me! I had added the admin_id and app_id properties and it still flagged the same error.
Here is a check list to make sure you have what you need.
1) Your Doc type is probably wrong. I can't remember where I got this information, but use this instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
2) You need to import the XML namespaces. Change your HTML tag to something like this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
I used the HTML5 script on my website. So here's a copy-pasta for your reference.
<?php $current_url = "http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]; ?>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=YOUR_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="<?php echo $current_url; ?>" data-send="false" data-layout="button_count" data-width="80" data-show-faces="false"></div>
Also, it takes a couple of minutes to propagate. I waited 15 minutes and suddenly... it worked.
It turns out that the reason for the inconsistent behaviour was the loadbalancer. We deactivated loadbalancing and LINT always showed consistent results.
I have no idea what the Load balancing changed. The meta-tags are similar.
I used the admins- metatag. I did not have to use the app-id tag. Thats how it is written in the specification.
I found the solution!
the problem is in the URL address,
it has to be:
<meta property="og:url" content="http://www.yoursite.com/index.php" />
I used this and it works
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.