Facebook comment plugin does not show in iframe - facebook

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>

Related

Facebook Page Plugin

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.

How to import a facebook post's comments?

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).

facebook like box doesn't like the facebook 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>

Facebook plugin does not work properly on my website

I'm trying to include the Facepile (one of Facebook's social plugins) on my website, but obviously without success:
The Facepile does not show up.
Firebug shows the generated code as inactive/gray.
Firebug's Network plugin shows 3 HTTP requests to Facebook resources, they all seem to be ok.
JavaScript is on.
I used Firefox, but Google Chrome behaves just the same way.
The stripped down HTML looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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/de_DE/all.js#xfbml=1&appId=333311513469576";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:facepile href="http://www.facebook.com/umdiewelt" app_id="333311513469576" max_rows="1" width="300"></fb:facepile>
</body>
</html>
How can I fix this?

Facebook comments social plugin in iPhone iOS Safari Browser has very small fonts and small width

I'm using the standard Facebook comments social plugin in iPhone iOS Safari Browser but its fonts and width are very small.
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://example.com" data-num-posts="5" mobile="true"></div>
Setting the mobile attribute directly didn't help too.
Does anybody know a solution?
I was missing this statement inside my HTML web page:
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
</head>
After adding the statement, the Facebook Comments widget automatically adjusted to the iOS Safari browser.