I'm having an issue here when trying to display data or get the data to work or at least be displayed in the console - I currently have a TypeScript React project where I want to display a Facebook page posts, which include the pictures and message/description.
By following other resources and else, I've found that Ad blocker blocks the API on loca host at least, thus I added js.src to the connect Facebook link, that has been the most noticeable change I've done to the code given by Facebook in https://developers.facebook.com/docs/javascript/quickstart and I've replaced some of the appId digits with **** just in case.
And this is line of code in the index.html:
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script>
function init() {
FB.api(
"/me",
"GET",
{ fields: "id,name,about,posts{full_picture,message}" },
function (response) {
console.log(response.name);
}
);
}
window.fbAsyncInit = function () {
FB.init({
appId: "713461583720****",
autoLogAppEvents: true,
xfbml: true,
version: "v16.0",
});
init();
};
</script>
<script
async
defer
crossorigin="anonymous"
js.src="https://connect.facebook.net/en_US/sdk.js"
></script>
</body>
I'm open to answering any questions, I'm super thankful for any respond this thread gets, thanks!
Related
I am integrating Postpay payment system with my web application by adding JS code to the HTML page, but nothing works.
Here is the code I need to integrate:
<script>
window.postpayAsyncInit = function() {
postpay.init({
merchantId: '{merchantId}',
sandbox: true,
theme: 'light',
locale: 'en'
});
};
</script>
<script async src="https://cdn.postpay.io/v1/js/postpay.js"></script>
I used this tutorial.
I'm a backender and don't know JS, nothing works for me. How can I get this to work?
This is the console output, there are 2 exceptions:
If the first script relies on the script from the cdn link, the latter should be placed first in order like below:
<script async src="https://cdn.postpay.io/v1/js/postpay.js"></script>
<script>
window.postpayAsyncInit = function() {
postpay.init({
merchantId: '{merchantId}',
sandbox: false,
theme: 'light',
locale: 'en'
});
};
</script>
The following codes have worked before but not now. Since FB added the confirm box when liking a page, the edge.create was no more fired after confirming.
<div class="fb-page" data-href="{{ $fbPageUrl }}" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div>
<script>
$(document).ready(function() {
$.getScript('//connect.facebook.net/en_US/sdk.js', function(){
FB.init({
appId : 'xxxxxxxxxxxxxx',
xfbml : true,
version : 'v2.9'
});
FB.Event.subscribe('edge.create', function(response) {
alert('Fired!');
});
});
});
</script>
You can no longer subscribe to edge.create. At this time (04/2018) it is still in the documentation, but it is deprecated and to be fully removed in the near future.
By design, there is no way for a third party application to know when the Like button is clicked.
You will need to design your app in a way that does not require you to know when the Facebook Like button provided in the iframe is clicked.
Referencing this bug report:
The edge.create event is deprecated (https://developers.facebook.com/docs/plugins/faqs/), so the engineers have decided not to fix it for this case since it will be taken out completely in the future api release.
And from this one:
I understand that it's important to you, but unfortunately we did the deprecate on purpose due to policy issue.
Developers are not supposed to check the user press any more.
I suspect this is a bug from the new Facebook's update. You can search for the issue here https://developers.facebook.com/bugs, also can post a new bug if it hasn't been reported yet
These Events will no longer be accessible. As an alternative, you can use our Webhooks and be notified every time someone likes one of your Facebook Pages.
This is the webhooks endpoint
Source
Working solution until now:
<!doctype html>
<html lang="en" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta charset="utf-8">
<title>Facebook Like Button</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
FB.init({appId: '1906177386133148', status: true, cookie: true, xfbml: true});
FB.Event.subscribe("edge.create", function (targetUrl) {
console.log('edge.create');
});
FB.Event.subscribe("edge.remove", function (targetUrl) {
console.log('edge.remove');
});
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/es_ES/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:like></fb:like>
</body>
</html>
I'm trying to get the user to login using their Facebook account on the page but for some reason the button on the page does nothing. What the heck am I doing wrong? Link: http://friendsconnect.org/Main.php.
Pasting the FB.init call into my JavaScript console and then hitting the "connect" button got me the usual Facebook Connect window so you're probably having timing issues. Try changing your FB.init call to this:
<script type="text/javascript">
$(document).ready(function() {
FB.init({appId: '168032083219061', status: true, cookie: true, xfbml: true});
});
</script>
That way it won't be called until everything is all set up. Also, you don't need all three of these:
<script src="http://friendsconnect.org/jquery_custom/jquery.curvycorners.source.js" type="text/javascript"></script>
<script src="http://friendsconnect.org/jquery_custom/jquery.curvycorners.packed.js" type="text/javascript"></script>
<script src="http://friendsconnect.org/jquery_custom/jquery.curvycorners.min.js" type="text/javascript"></script>
You only need one of them, probably the jquery.curvycorners.min.js version.
I got a Facebook canvas apps that already works for authentification on server side and client side. I can post on the wall of my user, and run my app in the canvas fine.
I wanted to add a 'invite your friends' page, and followed the doc by creating a xFBML form:
[...]
<div id='invite-friends-form'>
<fb:serverfbml style="width: 650px;">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action="http://www.myapp.com:8080//invite/"
method="POST"
invite="true"
type="Name of my app"
content="My app description
<fb:req-choice url='http://apps.facebook.com/myapp/'
label='Accept'
/>
" >
<fb:multi-friend-selector
showborder="false"
actiontext="Invite your friends to my app"
rows="4"
> <fb:multi-friend-selector />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
</div>
<div id='fb-root'></div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://connect.facebook.net/fr_FR/all.js"></script>
<!-- This does nothing so I commented it out. Can't find a way to debug
<script src="http://static.ak.fbcdn.net/connect/en_US/core.debug.js"></script> -->
<script src="http://myapp.com:8080/js/my_app_js.js"></script>
</html>
This xFBML renders fine when tested in their test page.
Now, in my iframe, I got nothing but the facebook loading animation displaying forever.
Here is my Javascript. I use jQuery to run the code once DOM is ready:
$(function(){
FB.init({
appId : 'my_app_id',
status : true,
cookie : true,
xfbml : true,
level : "debug"
});
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
alert('logged in'); // this always show up
FB.XFBML.parse(document.getElementById('invite-friends-form'),
function(e) {alert(e)}
);
alert('after xfmbl parsing'); // this sometime show up
}
});
[...]
I got no error showing up, and can't find anyway to debug this. I feel stuck.
Help warmly welcome :-)
Found it:
You need to fill "url" and "domain name" in the internet site section of your app settings with url being the full web url (not the canvas one) and domain should be something like "mysite.com".
I hava a Facebook Canvas Application and I need to use FQL in it.
I try to use FQL by using the following code (Facebook JavaScript SDK)
Output-<span id='temp'></span>
<script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
document.getElementById('temp').setTextValue('First');
FB.init({ apiKey: 'my api key' });
document.getElementById('temp').setTextValue('Second');
FB.api(
{
method: 'fql.query',
query: 'SELECT name FROM profile WHERE id=me()'
},
function (response) {
document.getElementById('temp').setTextValue(response[0]);
}
);
</script>
But it doesn't work! It makes an error after document.getElementById('temp').setTextValue('First');
What's wrong with this code?
I have solved this one. You can't use Facebook JavaScript SDK inside of FBML Canvas pages, it is possible only for iFrame Canvas pages.