Marketing DigitalRedes Sociais

Aplicativos para conectar seu site ao facebook

Como conectar os usuários do Facebook no seu site.

Todo mundo já reconhece (ou deveria) a importância que as redes sociais possuem hoje em dia, é difícil conhecer alguém que use a Internet e não tenha uma conta em alguma rede social. Pelo contrário, muitos “entram” na Internet apenas para usar as redes sociais.

Dentre as redes sociais que se destacam hoje temos o Facebook, que foi lançado em 2004 e que desde que chegou ao Brasil ganhou muitos usuários novos.

O Facebook tem uma Api para desenvolvedores muito bem documentada e foi nela que aprendi a como conectar os usuários do Facebook no meu site.

O primeiro para obter os dados do usuário é você criar uma nova aplicação do site de desenvolvimento do Facebook.

http://www.facebook.com/developers/

 

Captura_de_tela-1

Na criação do seu aplicativo você vai digitar o nome do seu aplicativo e concordar com os termos do Facebook, depois disso você verá a tela inicial do seu aplicativo com informações importantes como o id do aplicativo e a chave da api .

Captura_de_tela-2

No próximo passo você vai clicar no link “Editar Configurações”, nele vai ter várias áreas para configurar o aplicativo, mas você irá para o link  “Website” e coloque o endereço do seu site em “Site URL”.

Pronto você já criou um aplicativo no Facebook direcionando para seu site. Agora vamos fazer nossa aplicação no site receber os dados do usuário.

Primeiro crie uma página com o nome loginFacebook.html e coloque o código:

<fb:login-button></fb:login-button>
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
  FB.Event.subscribe('auth.sessionChange', function(response) {
    if (response.session) {
      // A user has logged in, and a new cookie has been saved
    } else {
      // The user has logged out, and the cookie has been cleared
    }
  });
</script>

Não esqueça de trocar a parte your app id pelo id da sua aplicação. Feito isso o código deve renderizar um botão feito esse: login-button

Agora vamos acrescentar o código php responsável por pegar o cookie que trará dados do usuário como o access_token e o uid:

<?php

define('FACEBOOK_APP_ID', 'your application id');
define('FACEBOOK_SECRET', 'your application secret');

function get_facebook_cookie($app_id, $application_secret) {
  $args = array();
  parse_str(trim($_COOKIE['fbs_' . $app_id], '\\"'), $args);
  ksort($args);
  $payload = '';
  foreach ($args as $key => $value) {
    if ($key != 'sig') {
      $payload .= $key . '=' . $value;
    }
  }
  if (md5($payload . $application_secret) != $args['sig']) {
    return null;
  }
  return $args;
}

$cookie = get_facebook_cookie(FACEBOOK_APP_ID, FACEBOOK_SECRET);

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://www.facebook.com/2008/fbml">
  <body>
    <?php if ($cookie) { ?>
      Your user ID is <?= $cookie['uid'] ?>
    <?php } else { ?>
      <fb:login-button></fb:login-button>
    <?php } ?>

    <div id="fb-root"></div>
    <script src="https://connect.facebook.net/en_US/all.js"></script>
    <script>
      FB.init({appId: '<?= FACEBOOK_APP_ID ?>', status: true,
               cookie: true, xfbml: true});
      FB.Event.subscribe('auth.login', function(response) {
        window.location.reload();
      });
    </script>
  </body>
</html>

Agora com os dados do cookie você pode pegar os dados do usuário com o seguinte código:

$user = json_decode(file_get_contents('https://graph.facebook.com/me?access_token='
.$cookie['access_token']))->id;

Pronto, agora você pode tratar essas informações da maneira que desejar no seu aplicativo.

Uma dica, se quiser pegar informações como email, data de aniversário e etc, você terá que passar como parâmetro na tag . Exemplo:

<fb:login-button perms="email,user_birthday"></fb:login-button>

Artigos relacionados

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Botão Voltar ao topo