I'm having tremendous trouble getting the new Facebook Page Plugin to work. I discovered that I needed to change SDK src path from //... to http://... because, for some reason it wouldn't load while testing locally.
So in the script that loads the SDK, it now says
...
js.src = "http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=471086929645819";
...
instead of
...
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=471086929645819";
...
But now, instead of just getting a plain link to the page (which happened because the SDK didn't load), I get nothing. If I open up the Firefox Network Monitor in the console, I can actually see a bunch of GET requests for all my friends' profile images for use in the widget. So I know that it's actually loading the data, but it's not displaying it on the page. Any idea what's going on? Here's the exact code of the HTML file I'm testing on.
<body>
<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 = "http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=471086929645819";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/TheWelcomingCommittee" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/TheWelcomingCommittee">The Welcoming Committee</blockquote></div></div>
</body>
I don't think you can successfully test it locally. I was having the same problem, so I created a test page with just the FB code on it (same as what you've posted here). When viewed locally (on Chrome, IE, and Firefox), the plugin was exhibiting the same behavior that you've described. The only solution was to upload the page to a web server for viewing - then I was able to see the plugin normally.
Related
I want to have a "facebook share" link or button on a web page. The idea is to to share a link and a brief description, identical to twiter. No image or title of page is needed
In the past, the following link worked:-
"http://www.facebook.com/sharer.php?u=" + complete_url + message
Now, facebook ignores the message and it discards the complete url link. Instead it only displays the title of the homepage.
I found this answer on stack overflow:-
Make my own custom Facebook share button.
Having tried it (the script below) - I get the error: 'FB' is undefined
I'd be grateful if you could tell me:-
1. what am I doing wrong?
2. do we have to download the sdk.js from facebook server everytime?
The script is like this:
<html><head>
<script>
function onClick() {
FB.ui({
method: 'share',
href: 'the_complete_url_to_specific_page'
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'my_facebook_id',
xfbml : true,
version : 'v2.3'
});
};
(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_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</head>
<body>
<a href='#' onclick='onClick() ;return false;'> share on FacebookR</a>
</body>
</html>
First of all: No, you do not need to change the API version. Only if you need to use something that is only available in newer versions, check out the changelog once in a while: https://developers.facebook.com/docs/apps/changelog
You get the "FB is undefined" error if the JavaScript is not loaded (yet). Most likely you are not trying your code on a real server (it can also be localhost) but from your file system. You can try adding "https" to the source like this, or (better) test the code on a real server:
js.src = "https://connect.facebook.net/en_US/sdk.js";
The App ID is NOT your User ID, it´s an ID you get after creating an App here: https://developers.facebook.com/apps
Btw, the user can enter the message right when the Share Dialog pops up.
I am attempting to use the share button on http://www.desiringgod.org/ on a Mac. It works for me on mobile, and on a desktop, the sharer dialog comes up properly. However, when clicking the Share Link button, dialog shows a short Facebook status bar and then does not respond. After inspecting in the browser's dev tool console, I see an 500 error.
Here's what I see in Firebug.
"POST https://www.facebook.com/ajax/sharer/submit_page/ 500 Internal Server Error"
"NetworkError: 500 Internal Server Error - //www.facebook.com/ajax/sharer/submit_page/"
Is anyone else experiencing this issue? Any ideas on how to resolve?
It seems like a FB issue, but I can't find much else about this online or on FB forums.
Thanks!
I had the same error and realized I was using a wrong app id. I'm not an admin of that faulty app id, so I don't know whether it was some settings in it (perhaps sandboxed) or something else. But changing it will definitely solve the issue for you
This seems to be a bug on Facebook's behalf - as their Like button plugin doesn't require an appId and their Share Button code-generator doesn't include any references to it being required.
That said I've found a workaround that doesn't require signup/AppID-registration.
What I did was simply to copy any existing AppID and stuff it at the end of the sdk.js URL, Like so:
<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_US/sdk.js#xfbml=1&version=v2.0&appId=XXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
(The one I used in place of the "XXX" above, was an App ID from one of Facebook's own sites.)
There seems to be no validation being performed, which again leads me to believe this is a temporary blunder made by Facebook.
I've created a Facebook App and am using the FB developer tools to share content on a site.
However, when a link is shared it is titled "xxx shared a link via Widget Share Log App". I've seen other sites change this to read something like "xxx shared a link via Irrawaddynews" and I wondered if it was possible to do the same here.
BTW, I'm initiating the Facebook SDK with the code below (as per the instructions here: "shared a link via Widget Share Log App." - but this didn't solve my problem).
window.fbAsyncInit = function() {
FB.init({
appId : '{MY_APP_ID}',
status : true,
xfbml : true
});
};
(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_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
In your App ID settings on Facebook, there are a few fields you have to update. We wrote pretty detailed setup instructions for doing this in conjunction with our own share software, but there's a general section beneath that for setting up the Facebook app:
https://naytev.zendesk.com/hc/en-us/articles/202777178-Link-Naytev-to-Your-Facebook-App
#userfuser - you actually don't need their validation, you simply need to make the app active. The process has a pretty terrible UX, and missing fields like "support email" will cause you to not be able to activate without a helpful error message.
I added a facebook like button in my page. The page is rendered by using AJAX.
Here is my code:
$(document).ready(function(){
(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_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
When I access this page via Chrome, Chrome keeps log the error message:
Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "site url" The frame requesting access set "document.domain" to "facebook.com", but the frame being accessed did not. Both must set "document.domain" to the same.
Thanks a lot for your help.
I just found this on the facebook developer site:
"This is a warning in Chrome that has no ill side effects
Please check whether you have any extensions installed."
http://developers.facebook.com/bugs/586120791417551/
It may be that you have a content script from an extension that is generating these errors. My site is slo showing several of these errors in the console log. However, the facebook button is operating correctly. I am going to test in a chrome session with no extensions installed.
Is your facebook like button functioning correctly (other than throwing messy console errors)?
I'm using the module "facebook like box" in my homepage:
<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/it_IT/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I put this code immediately after body tag and I put this in left side:
<div class="fb-like-box fb-box-laterale" href="http://www.facebook.com/RistorantiRomaRisto.it" data-href="http://www.facebook.com/platform" data-width="190" data-height="380" data-show-faces="true" data-stream="false" data-header="true"></div>
All works done, but I receive this error in console: FB.getLoginStatus() called before calling FB.init()
I've just read other conversation where i read that "You need to load the api asynchronously" and I followed their instructions with no result.
How can I solve it?
This happen because you don't add an appId to the url you set for facebook.
See the complete code Facebook generate here: https://developers.facebook.com/docs/reference/plugins/like/
As you'll see, the url is written like this: //connect.facebook.net/fr_CA/all.js#xfbml=1&appId=YOUR_APP_ID
The presence of this appId, will automatically call FB.init() with basic app settings. But as you removed it, FB isn't calling it's init function, and call .getLoginStatus() directly.
So, go create a app for your website, and add the app Id to the code snippet in order to remove this error.
Hope this help !