Creating Facebook Login Button Without plugins

I just dont like any other plugins that will have problems when not updated on my site is there a way to create facebook/twitter login without a plugin i have seen that this must be placed on my site but i know it must connect with my system and my database to show the user anybody has done this on their site can you help us out?

<div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
        appId      : 'XXXXXXXXXXXXX', // 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
      });
    };
    // 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>

  <div class="fb-login-button">Login with Facebook</div>