Integrando seu site com o facebook

Hoje em dia, todo site que se preze precisa de algum tipo de integração com redes sociais, como havia prometido, hoje vou explicar como fazer a integração do seu site com o facebook, que pelo menos por enquanto é o que há em termos de rede social. :)

A primeira coisa que você deve fazer, é se cadastrar no facebook... Mas não da forma que está pensando, você deve se cadastrar como desenvolvedor.

Acesso o facebook developers, cadastre-se e comece a brincadeira cadastrando a sua aplicação:




Clique em 'Apps', e em seguida, clique no botão: 


1 - Cadastre os parametros acima, o facebook vai te presentear com :


Este código App ID, deverá ser utilizado na sua aplicação.

Se você precisar incluir um login do facebook, no seu site, (e você irá precisar), marque a opção abaixo e não esqueça de incluir a url completa do seu site ex http://www.bjbraz.com.br : 




2 - Inclua nessa url, uma página channel.html

exemplo : www.bjbraz.com.br/channel.html

O conteúdo dessa página channel.html é o seguinte : 

<script src="//connect.facebook.net/en_US/all.js"></script>

Apenas isso !





3 - Após isso, vamos ao código que faz o login no facebook : 

Na sua página após o <body>

<div id="fb-root"></div>

<script>

 window.fbAsyncInit = function() {
 FB.init({
   appId      : '', // AQUI VAI SUA APP ID
   channelUrl : '//URL CADASTRADA/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
 });
 // Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
 // for any authentication related change, such as login, logout or session refresh. This means that
 // whenever someone who was previously logged out tries to log in again, the correct case below 
 // will be handled. 
 FB.Event.subscribe('auth.authResponseChange', function(response) {
   // Here we specify what we do with the response anytime this event occurs. 
   if (response.status === 'connected') {
     // The response object is returned with a status field that lets the app know the current
     // login status of the person. In this case, we're handling the situation where they 
     // JÁ QUE O USUÁRIO DO FACEBOOK JÁ ESTÁ LOGADO FAÇA ALGUMA COISA
       


   } else if (response.status === 'not_authorized') {
     // In this case, the person is logged into Facebook, but not into the app, so we call
     // FB.login() to prompt them to do so. 
     // In real-life usage, you wouldn't want to immediately prompt someone to login 
     // like this, for two reasons:
     // (1) JavaScript created popup windows are blocked by most browsers unless they 
     // result from direct interaction from people using the app (such as a mouse click)
     // (2) it is a bad experience to be continually prompted to login upon page load.
     FB.login();
     
   } else {
     // In this case, the person is not logged into Facebook, so we call the login() 
     // function to prompt them to do so. Note that at this stage there is no indication
     // of whether they are logged into the app. If they aren't then they'll see the Login
     // dialog right after they log in to Facebook. 
     // The same caveats as above apply to the FB.login() call here.
     FB.login();
   }
 });
 };
 // 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>

<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>









É isso, você já terá um botão de login para o facebook, no próximo post, vamos explorar a api de gráficos, e baixar os álbuns de foto do usuário.

Até a próxima.

Comentários

  1. Cara parabéns pela iniciativa, estou passando por isso agora. Será que tinha como dar continuidade ao tutorial? Estou desenvolvendo uma aplicação em java e gostaria que meu cliente pudesse acessa-la usando sua conta do facebook.
    Obrigado.

    ResponderExcluir
  2. João obrigado pelas palavras, vou continuar sim, também estou precisando incluir esta funcionalidade no meu site. Até breve !

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Introdução ao Empreendedorismo

Economia - Princípio da Utilidade Marginal Decrescente

Redirecionando requisições http para https no tomcat