I have a sample code:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script language="javascript" type="text/javascript">
window.checkDoesLike = function() {
FB.api({ method: 'pages.isFan', page_id: '40796308305' }, function(resp) {
if (resp) {
alert("You have like this pages");
} else {
//<![CDATA[
document.write('<fb:like href="http://www.facebook.com/coca-cola" layout="button_count" show_faces="false" width="450" action="like" font="arial" colorscheme="light"></fb:like>');
//]]>
}
});
};
</script>
</head>
<body onload="checkDoesLike()">
<div id="fb-root"></div>
<script language="javascript" type="text/javascript">
// 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>
When I run code, facebook like not show (Though i have not like in page http://www.facebook.com/coca-cola), how to fix it ?
You need to call FB.XFBML.parse() after you add XFBML tags to the page
Related
I design an app who retreive my facebook's event.
I successful connect to my account, I request "/me/events", FB responds 200 with data: [] but when I log myself on Facebook, I can see I have 2 events incoming. What did I missed ?
Here is some pieces of my code :
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Calendar API Maxime</title>
</head>
<body>
<p>Connecté en tant que : <span class='username'>Anonyme</span></p>
<ul class="events">
</ul>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="https://apis.google.com/js/api.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '376225472791830',
autoLogAppEvents: true,
xfbml: true,
version: 'v2.10'
});
FB.AppEvents.logPageView();
FB.login(function() {
FB.api('/me/events', function(response) {
if (response && !response.error) {
console.log(response);
} else {
console.error(response.error);
}
})
})
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
I'm trying to post multiple facebook post on a page by using jQuery. So far I am getting success to post first facebook post but not able to post another.
What is happening?
facebook post embed url is
<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.3";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-post" data-href="https://www.facebook.com/ClashofClans/posts/1104473549576967:0" data-width="500">
<div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/ClashofClans/posts/1104473549576967:0">
<p>The update is finally here!!! Maintenance will start soon! Read all that's new: http://supr.cl/UpdateNotes
</p>
Posted by
Clash of Clans on
Wednesday, July 1, 2015
</blockquote>
</div>
</div>
When I append this URL directly to DIV, it calls an iframe and then complete facebook post data binds on DOM. It works very well but next time Iframe is not loading on the DOM. In console first time I found an APP error ie Invalid App Id: Must be a number or numeric string representing the application id.. I tried with correct AppId but not succeed. Below is my code what I've tried so far
$("input").blur(function ()
{
$('div').html($(this).val());
//$(this).val() is facebook post URL shown above
})
Will anyone please suggest me the correct way of doing that ?
Use the following code. It factors when the code is loaded. The answer was created using this source Working with asynchronously loaded javascript You can wrap the getLoginStatus call in a loop if you will.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<input type="text" id="message" />
<input type="button" id="send" value="Send" />
<script>
$(document).ready(function(){
function facebookReady() {
FB.init({
appId : '1521775134725984',
xfbml : true,
status : true,
cookie : true,
version : 'v2.1'
});
$(document).trigger("facebook:ready");
}
if(window.FB) {
facebookReady();
} else {
window.fbAsyncInit = facebookReady;
}
});
$(document).on("facebook:ready", function() {
$("#send").on("click", function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var body = $("#message").val();
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
}
else {
FB.login(function(){
}, {scope: 'publish_actions'});
}
});
});
});
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
I have prefered given answer of stackoverflow question
Like button will not fire edge.create or edge.remove .
But I am getting following error when see in developer tool console in crome browser
"Uncaught ReferenceError: FB is not defined fb.php:20
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains."
code is as follow
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<html xmlns:fb="http://ogp.me/ns/fb#">
<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=xxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
FB.Event.subscribe('edge.remove',
function(response) {
alert('You UNliked the URL: ' + response);
}
);
</script>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
</body>
</html>
How can resolve it please help me.
Thanking you.
You have not initialized the FB.init(), without which you can not make API calls-
window.fbAsyncInit = function() {
FB.init({
appId : '510509449056378',
status : true,
xfbml : true
});
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
FB.Event.subscribe('edge.remove',
function(response) {
alert('You UNliked the URL: ' + response);
}
);
};
(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=510509449056378";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
<!DOCTYPE html>
<head>
<title>
Like Box example
</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '{APP_ID}'
});
FB.Event.subscribe('edge.create', function(response) {
alert('You liked the URL: ' + response);
});
FB.Event.subscribe('edge.remove',function(response) {
alert('You UNliked the URL: ' + response);
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; //js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId={APP_ID}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!--Like BOX-->
<fb:like-box href="https://developers.facebook.com/docs/plugins/" colorscheme="light" show_faces="false" header="false" stream="false" show_border="false"></fb:like-box>
</body>
</html>
I have placed FB like button using iframe code...
Here is the code for Like Button:
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fmadamebridal.com%2Fdev%2Fcheckout%2Fonepage%2F&send=false&layout=standard&width=450&show_faces=true&font&colorscheme=light&action=like&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
And I am using this code to capture the FB like event...
Here is the code:
window.fbAsyncInit = function() {
(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'));
// Additional initialization code here
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked THISSS Yeaa');
}
);
};
But... it is not working.
Your question is not clear at all, when you go to the doctor you don't say, I feel pain and expect him to cure you. Are you loading javascript sdk properly?
This code should work for you, unless you have other scripts firing errors and prevent facebook sdk of working normally.
Put this code next to the your <body> tag
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
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
FB.Event.subscribe('edge.create', function(response) {alert('You liked THISSS Yeaa'); });
};
// 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>
I need to make sure my Facebook Connect code runs on a click event, but no matter how I try I cannot get it to work. It has to be something simple but I just cannot figure it out. This is my latest attempt, however if I put an alert into the code after FB.Event.subscribe it never reaches it. The code does run from within document.ready, but I need it to run on a click event. The live URL is lovelyjubbly.info/en-GB/Gameplan.
<div class="facebookconnect">
<div id="fb-root"></div>
<script language="javascript" type="text/javascript" src="http://connect.facebook.net/#Thread.CurrentThread.CurrentUICulture.Name.Replace('-', '_')/all.js"></script>
<script type="text/javascript">
$(document).ready(function () {
window.FB.init({ appId: 'abc', status: true, cookie: true, xfbml: true });
});
function fbclick()
{
FB.Event.subscribe('auth.login', function (response) {
alert("loggedin");
var isUserAuthenticated = #User.Identity.IsAuthenticated.ToString().ToLower();
if ((response.status == 'connected') && (isUserAuthenticated == false)){
window.location.href = '#Account.Urls.FacebookConnect()';
}
});
}
</script>
<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/" + #Thread.CurrentThread.CurrentUICulture.Name.Replace('-', '_') + "/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:login-button onclick="fbclick()" autologoutlink="false" perms="email" id="fbLogin">
</fb:login-button>
</div><br />
EDIT : Using live() method, still doesn't seem to work :
<div class="facebookconnect">
<div id="fb-root"></div>
<script language="javascript" type="text/javascript" src="http://connect.facebook.net/#Thread.CurrentThread.CurrentUICulture.Name.Replace('-', '_')/all.js"></script>
<script type="text/javascript">
$(document).ready(function () {
window.FB.init({ appId: 'abc', status: true, cookie: true, xfbml: true });
});
$("#fbLogin").live("click", function(){
FB.Event.subscribe('auth.login', function (response) {
alert("loggedin");
var isUserAuthenticated = #User.Identity.IsAuthenticated.ToString().ToLower();
if ((response.status == 'connected') && (isUserAuthenticated == false)){
window.location.href = '#Account.Urls.FacebookConnect()';
}
});
});
</script>
<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/" + #Thread.CurrentThread.CurrentUICulture.Name.Replace('-', '_') + "/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:login-button autologoutlink="false" perms="email" id="fbLogin">
</fb:login-button>
</div><br />
Use
$(yourselector).live('click', function() {
//fb stuff
});
I can't quite remember why this works, but it certainly seems to.