vue-facebook-signin-button
A simple Vue plugin to include a custom Facebook sign-in button into your web app.
Install
This plugin can be installed as a module
$ npm install vue-facebook-signin-buttonor, if you're not in a modular environment, just include it as a <script>.
Usage
Important: The Facebook SDK must first be loaded asynchronously for the plugin to work. Something like this will do:
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.8
});
};
(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'));Step 1: import and use the plugin if you're in a modular environment (you don't need this step otherwise, as the plugin will register itself).
import FBSignInButton from 'vue-facebook-signin-button'
Vue.use(FBSignInButton)Step 2: Now you have a fb-signin-button global component, ready for use. It's best to demonstrate the usage with an example:
<template>
<fb-signin-button
:params="fbSignInParams"
@success="onSignInSuccess"
@error="onSignInError">
Sign in with Facebook
</fb-signin-button>
</template>
<script>
export default {
data () {
return {
fbSignInParams: {
scope: 'email,user_likes',
return_scopes: true
}
}
},
methods: {
onSignInSuccess (response) {
FB.api('/me', dude => {
console.log(`Good to see you, ${dude.name}.`)
})
},
onSignInError (error) {
console.log('OH NOES', error)
}
}
}
</script>
<style>
.fb-signin-button {
/* This is where you control how the button looks. Be creative! */
display: inline-block;
padding: 4px 8px;
border-radius: 3px;
background-color: #4267b2;
color: #fff;
}
</style>That's it!
Looking for the Google counterpart?
License
MIT © Phan An