Napoleon's Pixelated Mugshot

    vue-facebook-signin-button

    1.0.1 • Public • Published

    vue-facebook-signin-button

    A simple Vue plugin to include a custom Facebook sign-in button into your web app.

    Screenshot

    Install

    This plugin can be installed as a module

    $ npm install vue-facebook-signin-button

    or, 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).
    
    ``` js
    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

    Install

    npm i vue-facebook-signin-button

    DownloadsWeekly Downloads

    646

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • phanan