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>
Related
I have this script to get users to share my website in return for a coupon code to use in the shop.
I'm sure it was working fine. Now on some pages it wont execute until the page is refreshed.
It may not even be a script issue but I can't work it out.
Any ideas?
Here is my code.
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready(function() {
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXX',
xfbml : true,
version : 'v2.5'
});
$('#ShareForcouponcode').on('click',function(e) {
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'XXX',
link: 'XXX'
},
function(response) {
if (response && response.post_id) {
// the download link will be activated
$('#ShareForcouponcode').fadeOut();
$('#infotext').fadeOut();
$('#couponcode').fadeIn();
} else {
// do nothing or ask the user to share it
}
}
);
});
};
});
// Load the SDK
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I am trying to integrate parse database with my website. It is almost one day I spent but I couldn't figure out the problem. Here is my code:
<div id="fb-root"></div>
<script>
Parse.initialize("**************************", "**********************");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : '*****************',
cookie : true,
xfbml : true
});
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
};
(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&appId=920929871279093";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-max-rows="3" data-size="medium" data-show-faces="true" data-auto-logout-link="true"></div>
My problem is that when I run this piece of code I get following error but login button appears and work fine.
As I search for this issue people are saying I change
//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=920929871279093";
To
//connect.facebook.net/en_US/sdk.js#xfbml;
or
//connect.facebook.net/en_US/sdk.all;
I do not understand how this really work. And appreciate if anyone say where I am calling init.FB twice and how to fix it.
I think you need to put version number in init function:
The following is the example from parse.com https://www.parse.com/docs/js/guide#users-setup
<script>
// Initialize Parse
Parse.initialize("$PARSE_APPLICATION_ID", "$PARSE_JAVASCRIPT_KEY");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({ // this line replaces FB.init({
appId : '{facebook-app-id}', // Facebook App ID
status : true, // check Facebook Login status
cookie : true, // enable cookies to allow Parse to access the session
xfbml : true, // initialize Facebook social plugins on the page
version : 'v2.3' // point to the latest Facebook Graph API version
});
// Run code after the Facebook SDK is loaded.
};
(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>
I am trying to display the feed into my console using a console.log however it is returning an error of no token.
message: "An active access token must be used to query information about the current user."
type: "OAuthException" error code : 2500;
the message above is what I am getting. I have followed the steps given by FB.
The code is bellow.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '',
xfbml : true,
version : 'v2.1',
});
FB.api('/me', {fields: 'last_name'}, function(response) {
console.log(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 = "http://connect.facebook.net/en_UK/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root">
</div>
You are trying to call the API without asking the user to login first. Instead, remove the FB.api line in your code and replace it with the below:
FB.login(function(){
FB.api('/me', 'get', {fields: 'last_name'}, function (response ) {
console.log(response);
});
});
Ideally, you should call the above login code when a "Login" button is pressed, e.g.:
<button type="button" onclick="doLogin();">Login to Facebook</button>
(Remember to wrap the FB.login() function in the doLogin() function.)
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>
UPDATE TO BELOW: I found this post
Facebook login via Parse & Javascript
Which I changed my code to reflect as so (below_. But throwing the following error from the webpage.
Given URL is not permitted 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.
Not sure if this is a mismatch with my App url actually in fb?
<div id="fb-root"></div>
<script type="text/javascript">
Parse.initialize("******", "********");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : '*******',
status : true,
cookie : true,
xfbml : true
});
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
};
(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'm trying to add the www.PARSE.com Facebook user login code to my site.
The guide I've followed is here https://www.parse.com/docs/js_guide#fbusers
My code looks like this. When I load the page, no login page appears. I'm unsure what I'm missing? When I look at parse it seems like "user" has been created in the data browser, indicating that the look up is working in some way.
Potential issues,
1/I'm unsure if the "channelUrl" is correct? do I include channel.html ?
2/Do I need to reference java script in the header? from what I read this was not needed?
<div data-role="page" id="main_page" data-theme="a">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding="false">
Menu
<h1>Slide Menu</h1>
</div>
<div data-role="content" class="ui-content" role="main">
<!--Parse initialize codes-->
<script type="text/javascript">
Parse.initialize("XXXXX", "XXXXX");
</script>
<!--Parse initialize code end here-->
<!--FB SDK code load for page starts here-->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : 'XXXXX',
channelUrl : 'WWW.kudosoo.com/channel.html',
status : true,
cookie : true,
xfbml : true
});
};
</script>
<!--FB SDK code load for page ends here-->
<!--FB login code for page starts here-->
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
</script>
<!--FB login code for page ends here-->
<p>Read the documentation and start building your JavaScript app:</p>
<ul>
<li>Parse JavaScript Guide</li>
<li>Parse JavaScript API Documentation</li>
</ul>
</div>
</div>
I have been able to work out an answer to the issue myself, through alot of trial and error. The code that works for me is as follows as below.
<div id="fb-root"></div>
<script type="text/javascript"> // Initialize the Parse object first.
Parse.initialize("XXXXX", "XXXXX");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : 'XXXXXXX',
channelUrl : 'http://www.example.com/channel.html',
status : true,
cookie : true,
xfbml : true
});
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
}, error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
} });
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>