I am writing a custom module for login using social network websites like Facebook, Gmail, Twitter. I have started with facebook first. I have followed all facebook login Quick Start Steps to get the code js from facebook to integrate in my website.

I am using Drupal 8 for this, I have copied all the code to the TWIG template. I don't know if anything I missed here, I can't get the facebook login button on web page. Can any one highlight my mistakes? Am looking into Network tab of Chrome browser, I can see https://connect.facebook.net/en_US/sdk.js is getting loaded and there are no errors listed.

This is my html.twig file.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'MyappId',
      cookie     : true,
      xfbml      : true,
      version    : '3.3'
    });

    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 = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

       function checkLoginState() {
      FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
      });
    }

</script>

<h2><b>Choose login method</b></h2>

<ul>
    {% for methods in items %}
        {% if methods.id == 1 %}
            <li> 
                <fb:login-button 
                  scope="public_profile,email"
                  onlogin="checkLoginState();">
                </fb:login-button>
                 {{ methods.name }}
            </li>
        {% endif %}

        {% if methods.id == 2 %}
            <li> GMAIL image {{ methods.name }}</li>
        {% endif %}

        {% if methods.id == 3 %}
            <li> TWITTER image {{ methods.name }}</li>
        {% endif %}

    {% endfor %}
</ul>

0 Answers