from here i got that code and i placed in my website localhost but cannot able to see any change .Can anyone help me this
i got the code from here http://developers.facebook.com/docs/reference/plugins/like/
My code is like this
<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>
<div class="fb-like" data-href="http://www.facebook.com/anicrave.shows" data-send="true" data-width="450" data-show-faces="true"></div>
Please check this link and add the references to your page.
http://developers.facebook.com/docs/reference/javascript/
You're missing an essential part for FB-SDK in order to display the expected results.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/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>
Related
I just want to implement a Facebook customer chat feature with my vuejs application.
This is my full code in the index.html file.
<body>
<div id="app" page_id="PAGE_ID" minimized="false" class="fb-customerchat"></div>
<!-- Include after Vue (before closing body) -->
<script src="https://unpkg.com/vue-fullpage.js/dist/vue-fullpage.min.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id){
console.log('d',d,'s',s,'id',d)
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/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- built files will be auto injected -->
</body>
I am sure that my page_id and app_id is correct.
I don't know what's wrong with the code. I can't see any error in the console log also.
I implement exact same thing in a normal html file. It works 100%
<body>
<div
class="fb-customerchat"
page_id="PAGE_ID"
minimized="false"
></div>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: 'APP_ID',
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/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'facebook-jssdk');
</script>
</body>
I don't know why this is not working with the vue.js.
Is that something with webpack building or something else?
I have problem with adding a chat to the website. The code below works on one page, but doesn't work on another. The domain is added to the whitelist. Does anyone have any idea why this could happen?
Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v4.0'
});
};
(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/pl_PL/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="********"
theme_color="#000000"
logged_in_greeting="Lorem Ipsum"
logged_out_greeting="Lorem Ipsum"></div>
I am making a game for facebook, and i want them to be able to login and then go in the game.
I have the login button with the popup screen and permissions i need from them, but i cant get them to redirect back to my url.
i use this code :
<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/nl_NL/all.js#xfbml=1&appId=380841622050947";
fjs.parentNode.insertBefore(js, fjs);
window.navigate("www.google.com");
}(document, 'script', 'facebook-jssdk')); </script>
<div class="fb-login-button" data-max-rows="5" data-size="xlarge" data-show-faces="true" data-auto-logout-link="false" scope="email,publish_stream"></div>
What am i missing?
i tried using this :
window.navigate(”top.jsp”);
But i cant seem to catch the "player logged in" action, so i can redirect after that.
Thanks in advance!!
If you want to redirect the user after successful login, you can use FB.Event.subscribe-
Complete code would be-
<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/nl_NL/all.js#xfbml=1&appId=380841622050947";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId : '380841622050947',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.login', function(r){
console.log(r.status);
if ( r.status === 'connected'){
window.location.href = '{redirect-to-url}'
}
});
};
</script>
<div class="fb-login-button" data-max-rows="5" data-size="xlarge" data-show-faces="true" data-auto-logout-link="false" scope="email,publish_stream"></div>
Well, it seems that you're not using the complete code necessary to be able to login via JS SDK. Have a look at the guide under https://developers.facebook.com/docs/facebook-login/login-flow-for-web
window.fbAsyncInit = function(){
FB.init({
appID : 'my app id is here',
channelUrl : '//myappname.herokuapp.com/channel.php',
status : true,
cookie : true,
xfbml : true,
frictionlessRequests: true
});
// Additional auth
};
(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'));
Ok so, that's my scripts.js file, and I HAVE included fb-root to my pagebody, for some reason when loading the page, its logging:
FB.getLoginStatus() called before calling FB.init().
Twice, in the call to all.js line 52, any ideas whats going on?
This is how i make it:
window.fbAsyncInit = function () {
if (FB.init) return;
// init the FB JS SDK
FB.init({
appId: 'your app ID', // App ID from the App
//channelUrl: '//' + window.location.hostname + '/channel.html',
//This to get the user details back from Facebook
//scope: 'id,name,gender,user_birthday,email', etc
status: true, // check the login status upon init?
cookie: true, // set sessions cookies to allow your server to access the session?
xfbml: true // parse XFBML tags on this page?
});
}
At the end of HTML Body...
<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.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
...Or maybe you might use fb embeded iframe
Facebook Like Button Reference
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>