Trying to integrate a facebook social like button plugin with the comment box. The like/unlike function works fine, and it reflects properly in my activity log on Facebook.
However, once I type in a comment in the comment box and click "post to facebook", nothing happens! The comment box won't close when I submit, and it doesn't publish anything in the timeline.
I can see the post request in Firefox debugger. Facebook debugger doesn't report any errors on the page, and extracts the meta tags.
See my code below: What am I doing wrong or missing?
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta property="og:title" content="mytitle" />
<meta property="og:description" content="mydescription" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo $this->baseUrl(); ?>/welcome"/>
<meta property="og:image" content="<?php echo $this->baseUrl(); ?>/images/screen_shot_general.jpg" />
<meta property="og:site_name" content="myname" />
<meta property="fb:app_id" content="xxxxxxxxx" />
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxx', // App ID
channelUrl : '<?php echo $this->baseUrl(); ?>/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-like" data-href="<?php echo $this->baseUrl(); ?>" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="lucida grande"></div>
This is probably just a Facebook Plugin bug and it's not your code that's affecting the plugin, since it's loaded within an iframe. Are you still getting the issue? If you are, it's best to report the bug to Facebook or see if there is an existing bug that relates to the issue.
Related
I am placing an iFrame (xx.com) at the client website (yy.com), the iFrame has a facebook share that should redirect to the client site (yy.com). The problem is with the og:image & og:title as I am placing them in xx.com bcz I have no access to yy.com. The share is not displaying the image and title I am placing in xx.com. Is there a way to do so?
the code in xx as follows:
<head>
<meta property="og:url" content="yy.com" />
<meta property="og:title" content="title" />
<meta property="og:image" content="image-path" />
</head>
<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/ar_AR/all.js#xfbml=1&appId=xxapp-id";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="yy.com" data-type="button_count"></div>
The code in yy.com is as follows:
<iframe width="950" height="600" frameborder="0" src="http://xx.com/path-to-file"></iframe>
I found a workaround for this as follows:
I redirect the share button to xx.com instead of yy.com having the title and the image url as a parameters in the URL and then inside xx.com I set the og:title and og:image according to the parameters passed and I redirect the user to yy.com
The share button in xx is as follows:
<div class="fb-share-button" data-href="xx.com?share_url=yy.com&title=the_title&image=the_image" data-type="button_count"></div>
The code for redirecting in xx is as follows:
<?php
$share_url = $_REQUEST['share_url'];
if(isset($share_url) && $share_url!=''){
$video_title = $_REQUEST['title'];
$video_image = $_REQUEST['image'];
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:title" content="<?php echo $video_title ?>" />
<meta property="og:image" content="<?php echo $video_image ?>" />
<meta http-equiv="refresh" content="0; url=<?php echo $share_url ?>" />
</head>
<body>
</body>
</html>
<?php
}
?>
Hello i have problem with facebook comments on my page.
Posts which make visitors are not visible. Posts are visible but only which i will make and then when i logout it will disappear.
/*part of header.php*/
<meta property="fb:admins" content="{hereisadminid}" />
<meta property="fb:app_id" content="{hereisappid}" />
<meta property="og:title" content="<?= $row['title']; ?> | Yrrej" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?= $row['title_uri']; ?>" />
<meta property="og:description" content="<?= $row['title']; ?>" />
<meta property="og:image" content="http://www.something.sk/og_something.png" />
<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/sk_SK/all.js#xfbml=1&appId=hereisappid";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Then in body of my website, under each article is this
<div class="fb-comments" data-href="http://www.yrrej.eu/<?= $_GET['id'] ?>" data- numposts="10" data-colorscheme="light"></div>
Can you help me someone, what is wrong when i cant see all comments? Thanks for tips and help :( Here is my website www.yrrej.eu
I checked your source code, you've written ID's in meta tags with {***}, pls remove the { and }
Second thing, please check that your app is not in the development mode. If it is, you can change the status to live in the settings in "Status & Review"
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>
I am trying out the facebook opengraph cookie recipe tutorial and I am following all the instructions, but every time I hit the cook form on it, it still says error. I am using php and using a heroku server. Here is my code:
<html 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# tommytechcook:
http://ogp.me/ns/apps/tommytechcook#">
<title>OG Tutorial App</title>
<meta property="fb:app_id" content="145722645553824" />
<meta property="og:type" content="tommytechcook: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="https://simple-journey-2635.herokuapp.com/cook.html">
<script type="text/javascript">
function postCook()
{
FB.api(
'/me/tommytechcook:cook?recipe=https://simple-journey-2635.herokuapp.com/cook.html',
'post',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Cook was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '145722645553824', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>Stuffed Cookies</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>
alert(response.error);
will return "Object Object".
Use instead:
alert(JSON.stringify(response.error));
user1304503, I'm interested in finding out how you got around this problem - I'm having a hard time setting up a test app myself (one that posts to a user's news feed)
WoolyG
My guess is that you're not logged in. I don't see FB.login() anywhere.
What's the error message?
Change alert('Error occured'); to alert(response.error); to see the error message.