I'm trying to set up some like buttons to a project. These buttons live inside a jquery slideshow with Aino's Galleria and let you "Like" each different slide. I'm using an xHTML strict document and while in Firefox (and Firebug) everything seems ok, but in webkit inspector I get this:
XML self-closing tag syntax used on <fb:like>. The tag will not be closed.
[The HTML that caused this error was generated by a script.] XML self-closing tag syntax used on <fb:like>. The tag will not be closed.
I get one of these every slide, so there are 28 errors. Looking into it, found some seem to enclose the fb:like into something like this:
<script type="text/javascript">
//<![CDATA[
document.write('<fb:like href="<?php echo "http://www.site/image-".$image_id ;?>" width="260" height="80" show_faces="false" />');
//]]>
</script>
The above, still works in Firefox, but not in Safari. The inspector says:
26 XFBML tags failed to render in 30000ms.
Moreover, for the Facebook like buttons to work with the Galleria Jquery plugin, I have a custom function that reloads only the facebook like button concerning the actual slide which appears briefly upon loading the slide:
[...]
extend: function(options) {
// listen to when an image is shown
this.bind(Galleria.IMAGE, function(e) {
number = e.index + 1;
tag = $('.galleria-info-description .info-box-'+number).find('.btn_fb');
$(tag).each(function() {
FB.XFBML.parse( this );
});
});
}
This thing is getting more complex and really don't know who is causing the problem! Hope somebody can help or ask the right questions!
Add this attribute to your <html> tag:
xmlns:fb="http://www.facebook.com/2008/fbml"
If that doesn't work, you could try generating the buttons in iFrame form instead of using the XFBML tags.
The code that you are trying to use here is part of the Open Social DTD. XHTML Strict is not able to parse this code, it is not part of the spec and is therefore invalid.
Take a look at the documentation for Facebook Open Social
and you will see that the document must be marked up with a very different DTD.
Try using HTML5 instead, it's not as strict as XHTML and especially XHTML strict. XHTML is dead anyway.
Related
Can someone help solve this problem with meta tags in body?
I have a wordpress site and I'm using the open graph wordpress plugin to make the facebook image default to the featured image. It is not working properly. When I debug it on the opengraph debugger, I get ...
*
*Meta Tags In Body*Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell
lower in the parse tree. Please fix this in order for the tags to be
usable.
*
Can anyone look quickly at the debug link and tell me how to fix it? Here is a sample URL: http://wilmettefeed.com/wh-42/
thanks!
Your HTML, indeed is malformed. On line one of your document the source shows:
<div id="nmlurkoverlay">
<!DOCTYPE html>
<html lang="en-US" xmlns:og="http://ogp.me/ns#">
A function somewhere is outputting code before the wp_header(); function. Could it be your justified-image-grid plugin? Or whatever involves outputting id="nmlurkoverlay". Find and fix this, and you will resolve your Facebook Open Graph Tags issue.
The <div id="nmlurkoverlay"> could come from a function, but could also be hard coded in the header.php file in your active template folder. Check there first.
I'm creating a website using multiple views.
The tag and the tags of the page get changed through a a $rootScope variable.
so I have something like
<html>
<head>
<title ng-bind="page_title"></title>
<meta property="og:title" content="{{page_title}}">
</head>
Whenever each view get loaded on the website, the page_title variable changes and the title and the og:title tags get updated (everything works as expected).
The problem is that I need, on some views to load a facebook, a google+ and a twitter button.
I can display them properly but if I click on each them the page title appear to be something like:
{{page_title}}
I've tried to delay the execution of the scripts of each button using setTimeOut but to no good.
But the scripts just read whatever is written, they don't parse the page_title.
Does anyone know a workaround to this?
Thank you
This can't be done using javascript. Some people think that Facebook is reading what's currently on the page. It's not. It makes a separate request to your server using the same url (from window.location.href) using it's Scraper, and the Facebook Scraper does not run javascript. That's why you get {{page_title}} when clicking on something like a Facebook share button. Your content will have to be generated by the server so when Facebook goes to hit the url it gets the content it needs up front without the need for javascript. You can tackle the server side rendering in a fews ways.
You can allow your server side technology to render the content.
You can use the PhantomJS approach https://github.com/steeve/angular-seo.
There's also a possibility that you can re-render Facebook widgets. Use their parse method:
FB.XFBML.parse();
after your angular stuff has completed. It's not working for my share button (yet!!), but I tested it on likes, and it's cool. Basically it re-scans the DOM and renders the Facebook widgets. You can also pass it a single element, something like this directive:
'use strict';
angular.module('ngApp')
.directive("fbLike", function($rootScope) {
return function (scope, iElement, iAttrs) {
if (FB && scope.$last) {
FB.XFBML.parse(iElement[0]);
}
};
});
This snippet would rescan the DOM for html5 facebook fb-like widgets when creating the last element in angular repeater.
I've been working on a problem for the last day and a half now and have still yet to find a solution.
When visitng my game on facebook (which is in facebook's iFrame) php sessions don't work. This is for IE and Safari. Chrome works fine.
I've already read all the posts on stack about this problem, which seems to be down to third party cookie security and needing interaction with the iFrame first. There was a workaround by making javascript post some form data to the iFrame first, but this seems to have been 'fixed' in the latest versions of the browsers very recently as this no longer works.
I even tried implementing a start page that would require them to click a link first (in the iFrame) to load another page which would then create the session. But even THAT doesn't work.
I'm also having trouble even loading new pages in the iFrame using javascript, which seems to always cause infinite loop refreshes.
And no, P3P headers do NOT solve it.
Does anyone have a solution to this problem? I can't be the only one with it, considering how many facebook apps exist!
I came across this problem using a client that had "Accept third party cookies" disabled. My solution was to force PHP to embed the session ID into the URI by putting this line at the start of each page:
ini_set('session.use_trans_sid', true);
As the URLs are in iframe within Facebook the SID is not seen in the top window.
For IE, you will need the P3P Headers set. Something like:
<?php header('P3P: CP="CAO PSA OUR"'); ?>
Safari blocks 3rd-party cookies by default. Currently, the only work-around that is working for me is to "pop-up" a new window to set the cookies. I have something like this:
<script type="text/javascript">
function safariFix(){
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1){
window.open('https://yourdomainname.com/safari.php', 'Safari Fix','width=100,height=100');
}
}
</script>
And safari.php will have this:
<?php
setcookie("safari_test", "1");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Safari Fix</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
window.close();
});
</script>
<body>
Since Safari does not accept third-party cookies by default, we are forced to open this window.
This window will automatically close once we have set the cookies.
</body>
</html>
PROBLEM: This won't work if users have "block pop-ups" enabled in Safari. If anyone has a better solution for this, inform me ;)
I've got an implementation of the Facebook SDK that I'm using in my site. It works great on every browser minus Safari where occasionally the Facebook Connect button won't load.
Looking at the JS errors I'm getting the following messages. They're coming from all.js which is FB's JS library. Anyone got any ideas?
The "fb-root" div has not been created. (all.js Line 3)
TypeError: 'undefined' is not an object (evaluating 'e.root.appendChild') (all.js Line 6)
When working with Facebook's all.js, you need to make sure that you have div with id set to fb-root typically below the body tag. Make sure you have:
......
<body>
<div id="fb-root"></div>
<script>
// facebook js code here
</script>
The error message you have posted clearly says it does not find such div which means you should have it on your page like shown above.
How many fb-root divs do you have? If you have multiple it might confuse the API on the Safari browser.
As I understand it, Facebook's FBML should render html. But mine isn't. Here is my source code after viewing the page in the browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head id="Head1" runat="server"> <title>test</title>
</head>
<body onload="initFB();">
<script src="http://static.new.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
type="text/javascript"></script>
<fb:login-button v="2" size="medium" onlogin="window.location='test.aspx'">Login with your Facebook account</fb:login-button>
<script type="text/javascript" language="text/javascript">
function initFB() {
FB_RequireFeatures(["XFBML"], function(){
FB.init("464 ... my api key here ... b62", "xd_receiver.htm");
});}
</script>
</body>
</html>
Here's the page: http://www.rebelstudent.com/test.aspx
Could it be the server? Is there any change that my host is blocking communication with Facebook somehow? Doesn't make sense because the facebook connect kinda works...the popup windows just doesn't go away. I'm pretty sure it's because these FBML tags aren't being rendered properly and so the "onlogin" function isn't getting called...
Anway, I'm new at this. Any help is appreciated because the facebook developer forums seem kind of dead.
I haven't done any work on Facebook so I don't have a direct answer for you, sorry. However, have you tried starting with a "Hello World" app? Basically remove everything that is not absolutely necessary for Facebook and try to display the text "Hello World" to the screen. Remove the script, the header, fb button, etc.
If you are able to get "Hello World" working, then just add small pieces of the application back in until it breaks. Then you will know exactly what it is that is breaking the output.
If you are not able to get "Hello World" to work, then you are missing a basic requirement. Perhaps somebody else will know what that is.
Well it looks like I need to always use "www" in front of my domain. That was my issue. rebelstudent.com/test.aspx doesn't work but www.rebelstudent.com/test.aspx does. Thanks for everyone's help!
More than likely the problem is your render method for your canvas is set to an IFrame (instead of FBML).
Go here: http://www.facebook.com/developers/apps.php
Click on 'Edit Settings'
Select 'Canvas' in the left navigation
Underneath the 'Canvas Settings' heading, select 'FBML' for the 'Render Method'
FB_RequireFeatures(["XFBML"], function() {
FB.Facebook.init("key", "/xd_receiver.htm");
FB.Connect.requireSession();
FB.ensureInit(function() {
FB.Connect.showPermissionDialog("offline_access,read_stream", function(x) { alert(x); window.location = "/myAuthorizeApp"; });
});
});
It doesn't do quite the same thing as you're trying to achieve, but I found I needed to require XFBML to get the the other JS functions to work properly, strange enough.. Also, look into rendering XFBML server side.