Has anyone the same Problem?
I got the example from https://developers.facebook.com/docs/plugins/save?locale=en_US
After pressing the "Save-Button" i got the success message from facebook but nothing was added. Console displays the following error.
The Error:
POST: Failed to load resource: the server responded with a status of 404 ()
https://www.facebook.com/plugins/save/sentry/?dpr=1
Code:
<html>
<head>
<title>Your Website Title</title>
<meta property="og:url" content="https://www.instagram.com/facebook/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<style>
.fb-save, span, iframe {
width: 200px !important;
height: 50px !important;
}
</style>
</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.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-save" data-uri="https://www.instagram.com/facebook/" data-size="large"></div>
</body>
</html>
Okay i found the problem! I missed the App-Id....
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=12345679";
or
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.5'
});
};
Related
I've got this code for the Facebook like button on an HTML page, taken directly from the FB developer site:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>FB Like button test</title>
</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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:like href="http://developers.facebook.com/docs/reference/plugins/like" send="false" layout="button_count" width="90" show_faces="true"></fb:like>
</body>
</html>
When I look on Firefox or other non-IE browsers, I see a normal looking Like button, like this:
{Like} <[1.5m]
However, when I look at the same page on IE8, it doesn't show the like count, it seems to ignore the width="90", and I just end up with a long string like this:
{Like} Be the first of your friends to like this.
What's going on?
I have added a comments box on my page:
http://metallica-gr.net/news/welcome/welcome.html
But when I add a comment even with Post to Facebook checked, that comment is not showing on facebook. Sometimes it worked when I unchecked and rechecked the box. Is it bug or am I doing something wrong?
Your source code shows you have multiple fb-root div tags and no app Id.
Your code:
<div id="fb-root"></div>
<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/el_GR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Remove one fb-root div tag and then create a new fb app, get its app id and append it to the connect url, i.e. //connect.facebook.net/el_GR/all.js#xfbml=1
Final code should look like this:
<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/el_GR/all.js#xfbml=1&appId=<YOUR-APP-ID>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Also why not use HTML5 code for plugin?
<div class="fb-comments" data-href="{YOUR_SITE_URL}" data-num-posts="2" data-width="470"></div>
And your site is missing some of the important OG meta tags, those are og:title, og:url, og:description, og:type and fb:app_id (Optional for moderation of comments).
Also your image referenced by og:image should be at least 200px in both dimensions. Correct it and it should work.
For example:
<meta property="og:title" content="Metallica-gr" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://metallica-gr.net/news/welcome/welcome.html" />
<meta property="og:image" content="{IMAGE_URL}" />
<meta property="og:description" content="{YOUR_SITE_DESCRIPTION}" />
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>
Don't forget to lint the url after changes, so fb servers cache new updates.
Let me know if it worked.
Since yesterday, I cannot see the full widget for comments from facebook. I have a website with articles, and for every article, a fb comments widget. First, I've thought it was a problem of layers or something, but i've created a new file and same problem is happening.
The code is:
<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=386320764714835";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://steagu.ro/index.php?id=2806&cat=1" data-num-posts="5" data-width="630"></div>
</body>
</html>
You can see it in action here.
I've test it on Firefox 16.0.1 and also in IE 9.0.7
Any idea what's wrong?
include this line :
<html xmlns:fb="http://ogp.me/ns/fb#">
Use this Code and check
<!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">
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</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=386320764714835";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://steagu.ro/index.php?id=2806&cat=1" data-num-posts="25" data-width="630"></div>
</body>
</html>
I have the typical HTML5 implementation of the Facebook recommend button:
<div id="fb-root"></div>
<script type="javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
<? if ( $current_language == 'en' ): ?>
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
<? else: ?>
js.src = "//connect.facebook.net/fr_CA/all.js#xfbml=1";
<? endif; ?>
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
<div class="share_button facebook" id="facebook">
<div class="fb-like" data-send="false" data-layout="button_count" data-width="80" data-show-faces="false" data-action="recommend"></div>
</div>
The first time I click it, the popup preview box does not display the Title or Description. I have the following info at the top of the page:
Test
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta name="description" content="Test website." />
<meta name="keywords" content="test whatever" />
<meta property="og:title" name="Show this!" content="Show this!" />
If I leave the page, unrecommend the page from Facebook and return to the same page and press Recommend again, the title and description then appear. The page shows one of thousands of db entries so the problem needs to be fixed. I have tried putting the js function in jQuery(document).ready(function() - no luck. I tried moving it to the bottom of the page - no luck. Can someone help me?
From the example you gave, you are missing some required OG tags such as URL and image. Also, do you have the prefix info on your head tag?
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# myspecialapp: http://ogp.me/ns/fb/myspecialapp#">
Below you can find the code I use, as you can see it has been copied from the sample code. However the result is very unstable, more than often it returns 'unexpected error please try again later', also the dev app has some problems. At random it clears the app namespace, while I did not delete it. In fact, the app namespace is still active so if I re-enter my app namespace it says it already exists.
This has kept me busy for 12 hours now. I was wondering if other people are experiencing the same problem that it might be a bug on the Facebook part.
<html xmlns:fb="http://ogp.me/ns/fb#"
xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# mycookieapp:
http://ogp.me/ns/apps/mycookieapp#">
<title>OG Tutorial App</title>
<meta property="fb:app_id" content="115973895205576" />
<meta property="og:type" content="mycookieapp:recipe" />
<meta property="og:title" content="Stuffed Cookies" />
<meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://www.crystalminds.nl/facebook/index.html">
<script type="text/javascript">
function postCook()
{
FB.api(
'/me/mycookieapp:cook?recipe=http://www.crystalminds.nl/facebook/index.html',
'post',
function(response) {
if (!response || response.error) {
alert('Error occured: ' + response.error.message);
} else {
alert('Cook was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '115973895205576', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(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/nl_NL/all.js#xfbml=1&appId=115973895205576";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<h3>Stuffed Cookiess</h3>
<p>
<img title="Stuffed Cookies"
src="http://fbwerks.com:8000/zhen/cookie.jpg"
width="550"/>
</p>
<br>
<form>
<input type="button" value="Cook" onclick="postCook()" />
</form>
</body>
</html>