I am using ng-Facebook service in my angular web app. I want to include a Facebook comments plugin. So, I have copied the code in the Facebook plugin with the Javascript SDK. I can see the comments in my page but the ng-Facebook service is not working.
I am getting this error:
FB.init has already been called - this could indicate a problem sdk.js:54
Uncaught Error: invalid version specified sdk.js:85
The code is in a plunkerlink
How is the service not working but I can still see the comments?
I don't know did you solved your issue but facebook changed their javascript-sdk code. I got same error with you and my javascript code was like this;
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: 'xxxxxxxxxxx',
status: true,
cookie: true,
oauth: true,
xfbml: true
});
};
(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/tr_TR/sdk.js#xfbml=1&version=v2.1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And I changed it like this. Then error gone.
<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/tr_TR/sdk.js#xfbml=1&appId=xxxxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Hope this will help
You can tell the ngFacebook service what Graph api version you want to use:
app.config(function($facebookProvider) {
$facebookProvider.setCustomInit({
version : 'v1.0'
});
});
Related
Working solution
Found the answer on this article by Simoa Hava
Problem
We have implemented the Facebook customer chat using GTM. While version 2.11 worked fine, v2.12 doesn't work as it doesn't allow me to add the code below
Implementation guidelines
<!-- Load Facebook SDK for JavaScript -->
<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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
page_id="xxxxxxxxxxxxxx"
theme_color="#921710"
logged_in_greeting="Hi! Got any questions? Ask us anything, or get stuck in for more inspiration!"
logged_out_greeting="Hi! Got any questions? Ask us anything, or get stuck in for more inspiration!">
</div>
The error I get is
Invalid HTML, CSS or JavaScript found in template.
Previous working code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxx',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
jQuery('body').append('<div class="fb-customerchat" page_id="xxxxxxxxxx" minimized="false"> </div>');
</script>
Updated code with jQuery - Still shows error
<!-- Load Facebook SDK for JavaScript -->
<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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
jQuery('body').append('<div class="fb-customerchat" page_id="xxxxxxxxxxx" theme_color="#921710" logged_in_greeting="Hi! Got any questions? Ask us anything, or get stuck in for more inspiration!" logged_out_greeting="Hi! Got any questions? Ask us anything, or get stuck in for more inspiration!" minimized="true"></div>');
Any help will be much appreciated :)
Right now I am having trouble with my facebook login in js for my website.
This is all of the code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '3',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
FB.getLoginStatus(function(response) {
alert('whoo hoo!!! getLoginStatus called the callback');
});
};
(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>
And I am getting this error:
cxx.faceboo…:1 Application Error: There was a problem getting data for
the application you requested. The application may not be valid, or
there may be a temporary glitch. Please try again later.
I even edited my hosts file so that the domain points to my local machine.
Does anyone have any idea what could be causing this?
Thank you!
I want to show facebook like button. When a user clicks on the button it should make a callback after a user successfully likes that page.
Here is my code:
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-layout="box_count" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '510679165797120',
xfbml : true,
version : 'v2.6'
});
FB.Event.subscribe('edge.create', function(response) {
console.log('hello');
});
};
</script>
But it is not working. When you click on the like button it shows an error.
Can someone please tell me how to solve this issue?
It could be worth changing the js.src line. To me I see it as though this line is looking for a local file.
js.src = "https://connect.facebook.net/en_US/sdk.js";
I previously used the following line, but I'm not sure of the difference to be truthful:
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1"
You can get the code to like a Facebook page built for you directly by Facebook at this site --> https://developers.facebook.com/docs/plugins/like-button
That way you avoid deprecation issues, etc.
Just go there, enter the pertinent info, grab the code they spit out and place it on your site.
good luck!
demo : http://so.devilmaycode.it/facebook-like-button-showing-error-when-clicked/
The error happen because you are on localhost or not in the same domain you specidied in the app settings
also in order to work, your callback function should be at the top like below
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '#############',
xfbml : true,
version : 'v2.6'
});
FB.Event.subscribe('edge.create', function(response) {
console.log('hello');
});
};
(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 added Facebook Comment on my site.
window.fbAsyncInit = function() {
FB.init({
appId : appId,
xfbml : true,
version : 'v2.5'
});
FB.Event.subscribe('comment.create', addedComment);
};
(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/ru_RU/sdk.js#xfbml=1&version=v2.5appId=appId;
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
appId - number my application on facebook.
On page add next code:
echo "\n<div class=\"fb-comments\" data-href=".the_permalink()." data-num-posts=\"7\" data-width=\"470\"></div>";
(I using Wordpress) Commentbox show on site, comments show in moderation tools, but on refresh page commentbox is empty.Why?
(sorry for my English)
I am trying to redirect to an URL if the Facebook Like button has been pressed, but it doesn't work, and results having an error in the source view saying "FB is not defined"
Here's my redirect code:
FB.Event.subscribe('edge.create',
function(response) {
location.href = 'censored';
}
);
and here's the FB like button
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<center><fb:like href="http://www.siriforall.net" send="true" width="450" show_faces="false"></fb:like></center>
Anyone help please? I am a noob sorry.
Ensure your FB.Event is inside of the fbAsyncInit function so you assured that the JS SDK framework has been loaded into the browser. Also be sure to call FB.init() first before calling FB.Event.
window.fbAsyncInit=function() {
// YOUR CODE HERE THAT USES FB.anythin
}