auto-creating FB.getLoginStatus() called before calling FB.init() - facebook

I am getting this error in Safari and other browsers:
The "fb-root" div has not been created, auto-creating
all.js:52
FB.getLoginStatus() called before calling FB.init().
all.js:52
In my header I have this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml"
xml:lang="en" lang="en">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<meta property=""fb:admins"" content=""508331528"" />
<meta property=""fb:page_id"" content=""118806721611355"" />
<meta property=""fb:app_id"" content=""426360900751901"" />
(I realize I should not have all three property tags, but I have tried various scenarios)
In the body of the page I have these two simple facebook tags:
<fb:like data-href="http://www.PrintMyWatercolor.com" layout="button_count" style="width: 90px;" data-show-faces="true" data-send="true" action="recommend"></fb:like>
<fb:comments href="http://www.PrintMyWatercolor.com" numposts="25" width="590"></fb:comments>
As far as I understand, this should be ok. I don't have any explicit javascript code for facebook on the page. How can I resolve this error?
Thanks,
Kyle

You don't appear (from that sample ) to have the <div id="fb-root"></div> which the Javascript SDK attaches itself to
Your method of loading the Javascript SDK isn't asynchronous so the SDK may be loading before the page has finished, use the method from the documentation instead, which works by attaching the SDK once the rest of the document has loaded

Related

Redirect github default homepage to my own page

i have recently create a github page but the default homepage is always this auto-generated homepage
But I directly want to go to my actual webpage,is there anyway to do it?
You can see an example of Using meta refresh to create an instant client-side redirect: there is no space.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Tudors</title>
<meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />
</head>
<body>
<p>This page has moved to a <a href="http://thetudors.example.com/">
theTudors.example.com</a>.</p>
</body>
</html>
But in your case, your index.html does work on my side, and does redirect to default.html.

sails.js and foundation 6 - TypeError: url.indexOf is not a function

I am trying to use sails.js and Zurb Foundation 6.2. I used this handy npm generator that sets up my grunt tasks. The output looks pretty good. I have a single js file that contains jquery, foundation, etc.
In my layout.ejs, I have this:
<!DOCTYPE html>
<html>
<head>
<title><%=typeof title == 'undefined' ? 'New Sails App' : title%></title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--STYLES-->
<link rel="stylesheet" href="/styles/app.css">
<!--STYLES END-->
</head>
<body>
... some html ...
<%- body %>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/foundation.js"></script>
<!--SCRIPTS END-->
<script>
$(document).foundation();
</script>
</body>
</html>
When I run the page, I get this error:
**TypeError: url.indexOf is not a function
jQuery.fn.load()
foundation.js:9612
<anonymous>
foundation.js:11913
<anonymous>**
My reading on this suggests that the issue is either that something is not be loaded, is being loaded more than once, or is in the wrong order. How do I narrow that down? I tried to use CDN's for each piece and still couldn't make it work.
Thank you for your help.
Foundation is not currently compatible with jQuery 3.0.0, Foundation is using the deprecated jQuery.fn.load(). Use jQuery 2.2.x for now. See issue and PR:
https://github.com/zurb/foundation-sites/issues/8834
https://github.com/zurb/foundation-sites/pull/8923

Facebook Share not working in Safari or Chrome

I'm using wordpress, I have facebook share button code working with IE and Firefox, just not Chrome or Firefox.
Here is code I took from Facebook website: https://developers.facebook.com/docs/plugins/share-button/
In header.php I have: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
on single.php I have: <fb:share-button type="box_count" href="http://<?php echo($_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);?>"></fb:share-button>
What am I doing wrong?
Example: http://worldinsport.com/calcio-fiorentino-a-bruising-anarchic-and-exhilarating-spectacle-of-sport/
Thanks
Try this:
<div class="fb-share-button" data-href="http://<?php echo($_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);?>" data-type="button_count"></div>
OR
<a href="#" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href)+'&t=whole description whatever you want to write here','','width=626,height=436'); return false;">
<img alt="Share on Facebook" src="/imagesico-facebook-2.png"></a>

Why does the Facebook Send button pop-up window close?

We are looking at allowing users to share a link via a few different social media networks. The Tweet, Pin it and LinkedIn share button are each working, but the issue we are encountering revolves around the Facebook Send button.
The button appears to load fine, but when clicked on it puts up a message that "The page at www.website.com/page1.jsp?order_nbr=123456 could not be reached".
When using the object debugger # the Facebook Developers site, something interesting happens:
Trying to debug www.website.com/page1.jsp?order_nbr=123456 the Response code of the scrape is a 502 error (URL returned a bad HTTP response code).
Trying to debug www.website.com/page1.jsp we get a 200 (normal response).
Trying to debug m.website.com/page1.jsp or m.website.com/page1.jsp?order_nbr=123456, both return the same 502 error.
It appears like there is an issue when there are parameters in the URL after the ?, but then we are wondering if there is something else that needs to be set, or if this might be a server configuration issue.
If there are technical explanations of how facebook scrapes a page, or why their send button might be getting a 502 error, while the others mentioned above are operating normally? Any insight would be appreciated.
Here is the bare bones code we have stripped things down to in order to test on the mobile site:
<!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://ogp.me/ns/fb#">
<head>
<title>Testing - Order #123456</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/icon.png" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="viewport" content="width=device-width, user-scalable=yes" />
<meta name="format-detection" content="telephone=no" />
<link href="/css/test.css" rel="stylesheet" type="text/css" />
<meta property="og:title" content="Test - Order #123456" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://m.website.com/page1.jsp?order_nbr=123456"/>
<meta property="og:image" content="../../images/mobile_files/logo.png" />
<!--asynchronous loader-->
<script src="../../js/init.js" type="text/javascript"> </script>
</head>
<body>
<DIV id="fb-root"></DIV>
<DIV id="menu">
<DIV style="float: left; padding:2px; "><fb:send ref="top_left_m" ></fb:send></DIV>
<DIV style="float: left; padding:2px;">Tweet </DIV>
<DIV style="float: left; padding:2px;"> <a data-pin-config="none" data-pin-do="buttonPin" href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fm.website.com%2Fjsp%2Forder.jsp%3Fjob_order_id%3D%3C%25%3DjobOrderId%25%3E&media=http%3A%2F%2Fm.website.com%2Fimages%2Fmobile_files%2Flogo.png&description=Testing..."><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a> </DIV>
<DIV style="float: left; padding:2px;"><script type="IN/Share"></script> </DIV>
<DIV style="clear:both;"></DIV>
</DIV>
</body>
</html>
UPDATE: The output of debugger is different than it was the other day, I believe due to a redeploy and/or cached (server and/or local)previous tests, however two main issue remain.
.#1 - The main site is scraping fine (Return code 200). The mobile site returns a 502 and returns nothing.
.#2 - If I am not logged in to Facebook, a pop-up appears asking me to sign in. Once I do, the window disappears completely. If I am logged in to Facebook, a pop-up appears briefly and then disappears completely.
.#3 - Parameters in the URL have been ruled out as an issue.
Based on the nature of the biggest issue (#2)... I am going to change my question to be...
"Why does the Facebook Send button pop-up window close?"
(I will break #1 into a separate question if that's more appropriate, but I think the entirety of my problems are best served by leaving everything in one question )
Just in case it's relevant, here is the JS asynch loader:
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
add = function(url, id) {
if (doc.getElementById(id)) {return;}
js = doc.createElement(script);
js.src = url;
id && (js.id = id);
fjs.parentNode.insertBefore(js, fjs);
};
// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk');
// Pinterest
add('http://assets.pinterest.com/js/pinit.js');
// Twitter SDK
add('//platform.twitter.com/widgets.js', 'twitter-wjs');
// LinkedIN
add('//platform.linkedin.com/in.js');
}(document, 'script'));
The issue is that Facebook sends a Range Request as part of the request. Fails if within the range (0-52K), however pages bigger than this range scrape fine. Seems older versions of Oracle have an issue dealing with the range, so you need to strip Facebook's range request out of the request headers.

registration-url parameter fails for fb:login-button if oauth 2.0 is enabled

I'm trying to get the registration flow for Facebook login working. Here's a bare-bones example:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId:'xxxxxxxxxxx',
cookie:true,
status:true,
xfbml:true,
channelUrl : 'http://<myWebSite>/channel.html',
oauth:true
});
</script>
<fb:login-button registration-url="http://<myWebSite>/register"/>
</body>
</html>
(The only things I've replaced above are the website and the appID)
If I try it like this, the login button shows up, but clicking it causes FireBug to report 'Unknown status: undefined' in the browser log. If I remove the 'oauth=true' line though, it works. I'm trying to adhere to the new oauth 2.0 standard, so I'd like to leave it in. Has anyone else run into this? Seems like if this was a bug, it would have been caught pretty early on.
the 'registration-url' parameter is no longer supported by , take a look in the documentation of it. http://developers.facebook.com/docs/reference/plugins/login/
Just check if the user is logged in via the JS-SDK