there's a problem at installing the new facebook page plugin. I create a simple test.html file with the following code including the plugin-code from https://developers.facebook.com/docs/plugins/page-plugin. But there is an error message from my browser that file://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.4 cannot find on the server. I also completed the adress by http: or saved the Facebook-file local and embedded it as a local js-file, but the page plugin doesn't appear. What's the problem?!
HTML-Code in test.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<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 = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/facebook" 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/facebook">Facebook</blockquote></div></div>
</body>
</html>
You do not appear to be including an App ID in your URL for the SDK request. If you have not yet created an App ID, you can do so here: https://developers.facebook.com/apps
Note the appended &appId=[APP_ID_NUMBER_GOES_HERE] in the example below from my Website (real App ID removed, obviously)
js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.4&appId=[APP_ID_NUMBER_GOES_HERE]";
The Facebook SDK quick start guide and documentation should answer any other question you have about getting started: https://developers.facebook.com/docs/javascript/quickstart/v2.4
Ok managed the problem. The only thing I had to do is uploading my site to an online server.
Related
I came across something strange; the Facebok Page Plugin doesn't load on mobile only if it's for a specific Facebook page.
My code:
<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.4&appId=1591121954498982";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-page" data-adapt-container-width="true" data-height="350" data-hide-cover="false" data-href="https://www.facebook.com/pages/סיפורי-פירות-Fruit-Story/410067012494711?fref=ts" data-show-facepile="true" data-show-posts="true" data-small-header="false"> </div>
Changing just this line:
data-href="https://www.facebook.com/pages/סיפורי-פירות-Fruit-Story/410067012494711?fref=ts"
to another page's URL such as:
data-href="https://www.facebook.com/CocaColaUnitedStates?fref=ts"
...makes the plugin load fine.
Is it because the page URL contains Hebrew? Is there a relevant page setting?
I set up a small demo page:
http://s-fruit.co.il/facebook-test.html
Found the cause!
This is an intentional (though peculiar) behavior of Facebook when dealing with age-restricted pages and guest users (not logged in, as it often happens on mobile browsers as most use the app).
Why not simply display a login prompt? Some paraphrased info? Who knows. At least the mystery is solved.
An official response can be found here:
https://developers.facebook.com/bugs/828224027247232/
I have tried using the code in Facebook Developers but it's not working when I try getting my post's comments. Anyone have tried this recently? I read in some forums that the code they used may be outdated, and when I tried it, it didn't solve my problem
I have tried two codes:
Code 1:
<html>
<head></head>
<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="https://www.facebook.com/cielomuyot/posts/903985589615702" data-numposts="5" data-colorscheme="light"></div>
</body>
</html>
Code 2:
<html>
<head>
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}">
</head>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script>
<body>
<div id="fb-root"></div>
<fb:comments href="https://www.facebook.com/cielomuyot/posts/905033959510865"></fb:comments>
</body>
</html>
This is not possible. The Comments Plugin is completely unrelated to Facebook posts. The href parameter is more or less just an id to get different comment plugins on one page.
That means, it does not make any sense to use a facebook.com URL as href parameter, always use the URL where you implement it (with a get parameter if you need more than one Comment Plugins on one page).
1st please don't mark my question as a duplicate one because I read all the questions related but none of the questions stated my hint.
I was trying to make a facebook like button and found that facebook like box is more what I need because it just like and doesn't show any post after like.
The idea is when I take the code from the like box plugin link it doesn't add the like to the facebook page as other said that it was a bug in the facebook like. But when I press the button inside that link it will add the like to the facebook page.
The question is if it is a facebook bug should they state the first field as "Facebook Page URL" and should it work in the plugin link while you are configuring the like box before you get the code???
In other words, if it work in the plugin link so it must work if you get the code and paste it in your site, or am I wrong??
I've tried the HTML5, XFBML and IFRAME code that the facebook generate for you according to the data you provide.
No one of the below codes work; It shows the like box and when you click it will change to grey color but it doesn't make a like to the facebook page and when I refresh the test page it returns to the default state. When I was trying I found that the if I like the page from facebook site in normal way and try to dislike using the below code fro test page it will work.
EDIT:
While I am still trying to find a solution I found that in explorer works sometimes while in chrome and firefox doesn't.
I am using a test.html file that is placed in htdocs of xampp to test the result.
HTML5 code tried:
<html>
<head></head>
<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 = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/FacebookDevelopers" data-width="150" data-height="100" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div>
</body>
</html>
XFBML Code tried:
<html xmlns:fb="http://ogp.me/ns/fb#">
<head></head>
<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 = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like-box href="http://www.facebook.com/FacebookDevelopers" width="150" height="100" colorscheme="light" show_faces="false" header="false" stream="false" show_border="false"></fb:like-box>
</body>
</html>
and the Iframe Code tried:
<html>
<head></head>
<body>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&width=150&height=62&colorscheme=light&show_faces=false&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:62px;" allowTransparency="true"></iframe>
</body>
</html>
Ok I'm sure this has been addressed somewhere, but as it currently stands I couldnt figure out the solution or find one on google....
I am implementing Facebook's comments box and my code is essentially a copy-paste of what is on the site
<!DOCTYPE html>
<html>
<head>
</head>
<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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=417087715031519";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
<div class="fb-comments" data-href="file:///A:/commentsbox.html" data-width="470"></div>
</html>
Problem is that when I log in from my account and comment, I can see my comments, when I log in from another test account, I can only see that test accounts comments, and when I log in from another test account, again I can only see its comments. What am I doing wrong?
Note that I currently have this up on localhost and my APP is in test mode.
It seems I had a fundamental misunderstanding when asking this question. Test users cant view each others comments (which is how I was testing the comments box)..
I am trying to use facebook comment plugin in my fancybox (iframe) however for some reason the plugin does not load / show. Like plugin just next to the comment plugin works fine.
I am using HTML5 markup option. Is this a common issue and will it perhaps be resolved in the June 2013 changes?
I just tried using the demo codes provided by Fancybox test out iframe and comment plugin, no issues. the iFrame is loading the following code file
<!DOCTYPE html>
<html>
<head>
<title>fancyBox - iframe demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=327444117315763";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<h1>fancyBox - iframe demo</h1>
<div class="fb-comments" data-href="http://localhost" data-width="470" data-num-posts="10"></div>
</body>
</html>