I'm trying to displaying content on my website only if people like my Facebook Page.
Unfortunately, I can't get it work... I use edge.create and edge.remove but even if I "Like" the page, it goes through the "edge.remove" function instead of the "edge.create" function...
Here my code :
<!DOCTYPE html>
<html lang="fr" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="DC.Language" content="fr" />
<meta name="DC.Creator" content="Noomia" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="./css/screen.css" media="screen" />
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/scripts.js" type="text/javascript" charset="utf-8"></script>
<title>Concours LTBR</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '118439091595657', // App ID
channelUrl : 'http://cedriccharles.be-webdesigners.com/concoursLTBR/index.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('edge.create', function(href) {
alert('Like');
});
FB.Event.subscribe('edge.remove', function(href) {
alert('Unlike');
});
};
// 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/fr_FR/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div id="main">
<fb:like href="https://www.facebook.com/pages/Noomia-studio/100473956669259" send="false" width="960" show_faces="true"></fb:like>
</div>
</body>
Related
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.
<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# fb: http://ogp.me/ns/fb# music: http://ogp.me/ns/fb/music#">
<meta property="fb:app_id" content="###########" />
<meta property="og:type" content="music.song" />
<meta property="og:url" content="http://mymediaupload.com/fbindex1.php" />
<meta property="og:locale" content="en_US" />
<meta property="og:title" content="MyMediaUpload" />
<meta property="og:description" content="MMU" />
<meta property="og:image" content="http://www.mymediaupload.com/v4/img/ErrorBG.png" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1" scope="publish_actions"></div>
<input type="button" value="Read" class="openGraphButton" action="song" page="http://mymediaupload.com/fbindex1.php" />
<script type="text/javascript">
$(document).ready(function()
{
$('.openGraphButton').click(function(){
var action = $(this).attr('action');
var page = $(this).attr('page');
postAction( action, 'article', page);
});
});
function postAction( action, object_type, object_url ){
FB.api('/me/music.' + action + '?' + object_type + '=' + object_url, 'post', function(response){
var msg = 'Error occured';
if (!response || response.error)
{
if (response.error) {
msg += "\n\nType: "+response.error.type+"\n\nMessage: "+response.error.message;
}
alert(msg);
}
else
{
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '###########', // App ID
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'; 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>
</body>
</html>
I have used facebooks own actions.. I have searched and searched! I fixed all my errors apart from this last one, i get the error:
Error occured
Type: GraphMethodException
Message: Unsupported post request.
Please help! I can't find an answer!
I have view in asp.net mvc3, which has list of products, when user clicks on a product, user goes to another view with product detail, the problem is that the facebook like button is not showing when the page is finish loading. But if I refresh the page, then it displays, where as google plus +1 button is working properly. help plz.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height,user-scalable=no" />
<title>xxxxxxxx</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"> </script>
<link href="/Content/JqueryContent/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="/Content/JqueryContent/jquery.ui.core.js.js" type="text/javascript"></script>
<script src="/Content/JqueryContent/jquery.ui.widget.js.js" type="text/javascript"></script>
<script src="/Content/JqueryContent/jquery.ui.position.js" type="text/javascript"></script>
<script src="/Content/JqueryContent/jquery.ui.autocomplete.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"> </script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxx',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.Event.subscribe('auth.statusChange', handleStatusChange);
};
(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>
<header data-role="header" data-theme="a"><h3>xxxxx</h3></header>
<div data-role="content">
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
<style>.fb_edge_comment_widget {display: none !important; }</style>
<div class="g-plusone" data-size="medium"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</div>
<footer data-role="footer" data-theme="a" style="font-family:Trebuchet MS;"><h5></h5></footer>
</body>
</html>
You may want to update your FB sdk snippet. I just checked the Facebook Javascript SDK page and it does this:
// 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));
Notice the new method for inserting the js, insertBefore(). Maybe this will help.
Cheers!
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.