i'm having an issue with Facebook social plugins. The like & comment box in my website only appears after refreshing the browser. Does anyone know why is this happening and how i can fix it? I'm using Meteor to build my website and the page, where the social plugins are placed, are only accessible after the user is logged in. Thank you very much! :)
The test website is www.sgeasyaidtest.meteor.com and the social plugins are under the planner page.
This is the script for FB login & social plugins that i've placed under the tag:
<body>
{{#if currentUser}}
<!--FB login-->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1027408483945691',
xfbml : true,
version : 'v2.4'
});
};
(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>
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '692361547558190',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.2' // use version 2.2
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// Load the SDK asynchronously
(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'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
</div>
<!--FB 'like' -->
<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.4&appId=1027408483945691";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- FB comment plugins -->
<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.4&appId=1027408483945691";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
This is the code that i've placed inside the page that i want the social plugins to appear.
<!-- 'like & share' plugin -->
<div class="fb-like" data-href="http://www.facebook.com/sgeasyaid" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
<!-- "comment" plugins -->
<div class="fb-comments" data-href="https://www.facebook.com/sgeasyaid" data-width="500" data-numposts="2"></div>
Do not include <script> tags in your HTML body. Meteor uses a sophisticated templating system, which may modify the DOM, owing to Meteor's reactivity.
As a result, you should put external scripts in template events, for instance the Template.myTemplate.onRendered function. However, I recommend you to use biasport:facebook-sdk, which packages the Facebook SDK.
You can include social plugins in your Meteor application as follows:
Run meteor add biasport:facebook-sdk to install the mentioned package.
Initialise the SDK:
if(Meteor.isClient) {
window.fbAsyncInit = function() {
FB.init({
appId: 'your-app-id', // Specify your app id here
status: true,
xfbml: true,
version: 'v2.1' // Specify your version here
});
};
}
Include the desired social plugins in your Meteor templates, for example:
<template name="facebookLikeButton">
<div class="fb-like" data-href="http://www.facebook.com/sgeasyaid" data-layout="standard" data-action="like"
data-show-faces="true" data-share="true"></div>
</template>
You can also use the built-in template helpers for social plugins.
Related
In a process of hiding piece of content for people who didn't like our page yet. Using Facebook SDK for the first time. The idea is to have a call to action text and button. Once button is clicked, if user already likes our page- it shows a piece of content. If not- shows a like button and shows piece of content after it's clicked.
Here is connecting SDK
window.fbAsyncInit = function() {
FB.init({
appId : '348511868693215',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(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'));
And here is actual code for checking
FB.api({
method: "pages.isFan",
page_id: page_id,
}, function(response) {
console.log(response);
if(response){
//if liked
$(".show-poll").click(function(){
$(".actualpoll").show();
});
} else {
$(".show-poll").click(function(){
$(".likepage").show();
});
}
}
);
Your code "for checking" is executed before the SDK is loaded, i.e. before FB is available. Move the code inside the window.fbAsyncInit function. That function is called once the SDK is available.
This is facebook share button code from facebook
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your share button code -->
<div class="fb-share-button"
data-href="http://www.your-domain.com/your-page.html"
data-layout="button_count">
</div>
How can I get response of success or error from this?
I tried some examples but didn't got response after sharing via code.
Share button works and it also sharing the post.
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '1743496239724', // App ID from the App Dashboard
//channelUrl : 'http://exampb.com/plugins/', // Channel File for x-domain communication
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?
});
// Additional initialization code such as adding Event Listeners goes here
FB.ui(
{
method: 'feed',
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
};
// 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));
I tried this but its conflicting. With that share button obtained from FB.
You can use the Share Dialog, but it only responds with a proper callback if you authorize the User with the publish_actions permission: https://developers.facebook.com/docs/sharing/reference/share-dialog
I want to create a Facebook login button. Actually I did, but I need to get username, email and other information. How can I do this?
This is my code
<html>
<head></head>
<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/tr_TR/sdk.js#xfbml=1&version=v2.4&appId=168750412481****";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-max-rows="1" data-size="large" data-show-faces="false" data-auto-logout-link="true" data-scope="email"></div>
</body>
</html>
How can I get data-scope user email or other scope properties?
Accualy i need full code example. Because i think facebook documents are complicated. (Or for me) And I found a solution internet. Here you can see below;
FB Login Button:
<div class="fb-login-button" data-max-rows="1" data-size="large" data-show-faces="false" data-auto-logout-link="true" data-scope="email,user_hometown,user_birthday,user_education_history,user_website,user_work_history"></div>
FB Sdk initialize:
(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.4&appId=***********";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Getting other user information:
window.fbAsyncInit = function() {
FB.init({
appId : '************', // Set YOUR APP ID
channelUrl : 'http://hayageek.com/examples/oauth/facebook/oauth-javascript/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
version : 'v2.4',
oauth : true
});
FB.Event.subscribe('auth.authResponseChange', function(response)
{
if (response.status === 'connected')
{
console.log("<br>Connected to Facebook");
//SUCCESS
FB.api('/me', { locale: 'tr_TR', fields: 'name, email,birthday, hometown,education,gender,website,work' },
function(response) {
console.log(response.email);
console.log(response.name);
console.log(response.gender);
console.log(response.birthday);
console.log(response.hometown);
console.log(response.education);
console.log(response.website);
console.log(response.work);
}
);
}
else if (response.status === 'not_authorized')
{
console.log("Failed to Connect");
//FAILED
} else
{
console.log("Logged Out");
//UNKNOWN ERROR
}
});
};
Have a look at the docs at
https://developers.facebook.com/docs/javascript/examples#login
to see how you can do the Login and query the Graph API...
I'm trying to add the facebook login option to my website and i want to login to the parse account.
I've added the followed scripts:
1) after the tag inside index.html:
<script>
// Initialize Parse
Parse.initialize("**********************", "*****************************");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({ // this line replaces FB.init({
appId : '{******************}', // 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>
2)log in function inside login.js:
function LogInWithFacebook(){
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.");
}
});
}
and of course this two lines in the tag in index.html:
<script src="//www.parsecdn.com/js/parse-1.4.2.min.js"></script>
<script src='login.js'></script>
3) and than i have a simple a tag which have an onClick attribute:
Log In
However, when i click on it, nothing happens, none of the messages inside LogInWithFacebook function appears. In face, none of the messages inside Parse.FacebookUtils.logIn appears, cause when i alert a message before i call Parse.FacebookUtils.logIn it appears...
So I have the following code that implements a facebook button on a welcome page that redirects to a user page:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid',
xfbml : true,
version : 'v2.2'
});
FB.Event.subscribe('auth.statusChange', function(response) {
if (response.status === 'connected') {
window.top.location = 'user url';
}
});
};
(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>
<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true"></div>
The button works fine, and it redirects to the user page. My code for the user page is:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid',
xfbml : true,
version : 'v2.2'
});
FB.Event.subscribe('auth.logout', function(response) {
window.top.location = 'welcome page url';
});
};
(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>
<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true"></div>
Which shows me a log out button on the user page after successfully logging in, which is awesome. However, clicking the facebook log out button does not redirect me back to the welcome page; it just stays at the user page, except the button now changes back to a log in button. However if I use the fb log in button while in the user page, then use the fb button to log out, now it redirects me back to the welcome page.
I'm not sure why the fb log out button redirects me only if I logged in on the user page, and not when I log in through the welcome page. Is there a different way to do a redirection after using the fb log out button? Subscribing to auth.StatusChange and auth.authResponseChange doesn't work either. I'm using Ruby on Rails, if it matters, thanks!
Adding
FB.getLoginStatus(function(response) {
...
});
after
FB.Event.subscribe('auth.logout', function(response) {
...
});
in the user view works, now the logout button redirects back to the welcome page. I'm not sure why this works, since the FB.getLoginStatus part doesn't do anything right now. I'm thinking that the getLoginStatus somehow notifies/triggers/allows the FB.Event.subscribe('auth.logout') to run/notice that the user isn't logged in.