Skip to content

Instantly share code, notes, and snippets.

@kilonzi
Last active October 13, 2023 07:00
Show Gist options
  • Save kilonzi/aa939ac9a520e9aa803928062d62ddaa to your computer and use it in GitHub Desktop.
Save kilonzi/aa939ac9a520e9aa803928062d62ddaa to your computer and use it in GitHub Desktop.
A Facebook Login button Single File Component done in VueJS
<template>
<div>
<button class="button" @click="logInWithFacebook"> Login with Facebook</button>
</div>
</template>
<script>
export default {
name:"facebookLogin",
methods: {
async logInWithFacebook() {
await this.loadFacebookSDK(document, "script", "facebook-jssdk");
await this.initFacebook();
window.FB.login(function(response) {
if (response.authResponse) {
alert("You are logged in &amp; cookie set!");
// Now you can redirect the user or do an AJAX request to
// a PHP script that grabs the signed request from the cookie.
} else {
alert("User cancelled login or did not fully authorize.");
}
});
return false;
},
async initFacebook() {
window.fbAsyncInit = function() {
window.FB.init({
appId: "8220179XXXXXXXXX", //You will need to change this
cookie: true, // This is important, it's not enabled by default
version: "v13.0"
});
};
},
async loadFacebookSDK(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);
}
}
};
</script>
<style>
.button{
color:white;
min-width: 150px;
background-color: #000000a1;
height: 2.5rem;
border-radius: 2rem;
font-weight: 400;
font-size: 0.8rem;
}
</style>
@AlissonRS
Copy link

@derekjj the idea is to only load the sdk if the user clicks "Login with Facebook", hence the example is not using the mounted event.

@asadmmn
Copy link

asadmmn commented May 23, 2023

im gettting error when click button

Cannot read properties of undefined (reading 'login')
TypeError: Cannot read properties of undefined (reading 'login')
at Proxy.logInWithFacebook (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/FacebookLogin.vue?vue&type=script&lang=js:8:17)

@harithzainudin
Copy link

harithzainudin commented May 23, 2023

im having the same issue like @asadmmn . cannot read properties of undefined... etc

edited:
okay, found the issue
you will need to return the promises

async loadFacebookSDK(d, s, id) {
      return new Promise((resolve, reject) => {
        let 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);
        js.onload = resolve;
        js.onerror = reject;
      });
    },
async initFacebook() {
      return new Promise((resolve) => {
        window.fbAsyncInit = function () {
          window.FB.init({
            appId: "your-app-id",
            cookie: true, // enable cookies to allow the server to access
            xfbml: true, // parse social plugins on this page
            version: "v16.0",
          });
          resolve();
        };
      });
    },

@asadmmn
Copy link

asadmmn commented May 23, 2023

@harithzainudin have you solved it ?? any one please tell me how to solve

@harithzainudin
Copy link

yes, you can refer back to my edited answer above @asadmmn :)

im having the same issue like @asadmmn . cannot read properties of undefined... etc

edited: okay, found the issue you will need to return the promises

async loadFacebookSDK(d, s, id) {
      return new Promise((resolve, reject) => {
        let 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);
        js.onload = resolve;
        js.onerror = reject;
      });
    },
async initFacebook() {
      return new Promise((resolve) => {
        window.fbAsyncInit = function () {
          window.FB.init({
            appId: "your-app-id",
            cookie: true, // enable cookies to allow the server to access
            xfbml: true, // parse social plugins on this page
            version: "v16.0",
          });
          resolve();
        };
      });
    },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment