Integrar o WordPress com o Facebook, assim como com qualquer outro serviço que possa ser relevante ao seu projeto, é um grande diferencial que você pode vir a trabalhar. O uso de API’s externas de outros serviços aliado a comunicação feita com base na HTTP API do WordPress permite uma fácil integração do CMS com esses sites.

Antes de iniciar o trabalho de integração do WordPress com uma rede social, alguma ferramenta ou serviço remoto, procure sempre estudar a documentação oferecida por essa outra parte e entender bem como funciona o fluxo da informação entre seu projeto e o servidor remoto.

Criação de um Aplicativo no Facebook

A integração com o Facebook começa com a criação de um Aplicativo dentro da plataforma de desenvolvedores da rede social. Os aplicativos fornecem a seus desenvolvedores chaves secretas para que esses possam solicitar as informações da base de dados do Facebook de modo autenticado.

A plataforma também oferece relatórios e uma série de funcionalidades para o aplicativo interagir e requisitar informações do site. No entanto para o nosso plugin, precisaremos apenas das chaves a fim de autorizar a obtenção dos dados daqueles que desejam se logar usando seu perfil do Facebook.

Caso você ainda não tenha uma conta no Facebook Developers, basta acessar o endereço acima informado e clicar sobre o botão Cadastrar. É preciso estar logado com o Facebook e fazer a autorização para o novo sistema ter acesso a suas informações. O requisito para ter uma conta de desenvolvedor é possuir um número de telefone cadastrado a sua conta do Facebook.

Criada sua conta de desenvolvedor, para criar um aplicativo, ao acessar esse ambiente, você verá seu dados de perfil no canto superior direito da página. Clique sobre ele e em seguia em “Adicionar um novo aplicativo”.

Defina brevemente um nome para identificar seu aplicativo, um email de contato que será usado pelo Facebook para enviar notificações sobre o seu aplicativo e uma categoria, a fim de classificar qual a finalidade do seu projeto.

Feito isso o seu aplicativo está devidamente criado. Acessando a tela com todos os aplicativos você já conseguirá ver o novo aplicativo listado. Clique sobre ele para acessar suas configurações.

Logo na primeira tela com o resumo das informações do aplicativo você já tem acesso ao ID do Aplicativo e a Chave Secreta do Aplicativo. Copie esses dois valores em um local seguro e de fácil acesso pois você precisará deles logo mais.

Antes ainda de dar início a codificação do plugin, uma configuração adicional é importante de ser feita. Acesse no menu lateral das opções do seu aplicativo, o item Configurações. Novamente você terá acesso ao ID e a Chave Secreta do Aplicativo. No entanto, trate aqui de definir o domínio onde seu aplicativo será aplicado. Supondo que o aplicativo fosse destinado ao WordPress Developer, o domínio deveria ser wpdeveloper.com.br.

As demais informações dessa tela são opcionais, mas caso venha a utilizar o aplicativo em seu site, dê uma atenção a esses campos. Informe as URL’s solicitadas de privacidade, termos de uso, um ícone para o aplicativo; enfim cuide dessas informações pois serão também exibidas as pessoas que vierem a utilizar esse aplicativo no futuro.

Para finalizar o trabalho dentro da plataforma de desenvolvedores no Facebook, acesse o item Revisão do Aplicativo no menu lateral e torne seu aplicativo público. Com isso você define que o aplicativo pode ser usado remotamente pelo seu site.

Processo de login com Facebook

Nesse tutorial você verá a requisição de dados básicos dos usuários, no entanto saiba que é possível estender esse uso para obter mais informações do perfil e também permissões maiores como publicar na timeline, fan pages, obter as curtidas, entre outras.

O funcionamento do processo de login começa com o visitante do seu site em WordPress acessando um link que irá levá-lo ao Facebook. Esse link serve para solicitar autorização do Facebook para obter as informações desejadas. O usuário concedendo ou não a permissão ele retorna ao site.

A diferença é que ao não permitir o uso de suas informações o código interrompe o processamento das informações e exibe um erro em tela, ou seja, ele não consegue logar usando o Facebook. Por outro lado caso a permissão seja concedida, um novo usuário é criado no WordPress com as informações obtidas e em seguida o login é feito. Se já existir um usuário com o mesmo email, o login é feito de modo direto, sem que para isso seja criado um novo usuário no WordPress.

Pedido de autorização do Aplicativo para acessar dados do perfil do usuário

 

Usuário pode escolher quais informações compartilhar com o aplicativo

Arquivos e estrutura do plugin

O plugin a ser criado será composto apenas por um único arquivo PHP responsável por todo o trabalho de comunicação com Facebook e integração com o WordPress. Essa medida foi tomada para simplificar o trabalho a ser feito, no entanto, caso você queira dividir o código em dois arquivos (sendo um responsável por tratar da comunicação com Facebook e outro da integração com o WordPress), essa pode ser uma boa escolha. Essa divisão é interessante de ser feita em especial se no futuro você pensar em mais recursos para o plugin.

Esse único arquivo .php será uma classe com métodos estáticos. Começando a codificar o Plugin, crie a classe e defina um método para receber as configurações iniciais do plugin logo após o seu carregamento:

class FB_Login {
    public static function setup() {
    }
}
add_action( 'plugins_loaded', array( 'FB_Login', 'setup' ) );

Como foi visto no começo do tutorial o funcionamento do plugin passa pelo uso do identificador e da chave secreta do aplicativo criado na plataforma de desenvolvedores do Facebook. Por isso você terá em sua classe esses dois valores armazenados em variáveis privadas para serem usados quando necessário. Do mesmo modo, crie uma variável para armazenar a URL do site, pois será preciso utilizá-la para solicitar e verificar as permissões do aplicativo também.

    private static $app_id, $app_key, $site_url;

    public static function setup()
    {
        self::$app_id = 'ID DO APP';
        self::$app_key = 'CHAVE SECRETA DO APP';
        self::$site_url = get_home_url() . '/';
    }

Defina os valores das variáveis de acordo com os valores obtidos no Facebook Developers. Em seguida você precisa criar a URL que irá enviar o visitante do seu site WordPress para o Facebook a fim de solicitar a autorização para compartilhamento de suas informações.

    public static function get_login_url()
    {
        return sprintf(
            'https://www.facebook.com/dialog/oauth?client_id=%s&redirect_uri=%s&scope=%s',
            self::$app_id,
            self::$site_url . '?login=facebook',
            'email'
        );
    }

A estrutura da URL gerada, assim como o funcionamento completo do processo interno do Facebook pode ser visto em mais detalhes na documentação do próprio sistema.

Em resumo, estamos enviando uma solicitação para obter principalmente o email do usuário, uma vez que para uso dentro do WordPress essa será a informação que distinguirá um utilizador dos demais. E também informamos ao Facebook o endereço de retorno sendo a URL do site acrescida da query ?login=facebook.

Obtendo informações do Facebook com WordPress

Agora que você acabou de definir que a URL de retorno terá essa configuração, você precisará tratar devidamente a informação recebida. Inicialmente crie uma nova ação a ser executada logo após o carregamento do WordPress a fim de identificar o acesso como vindo ou não do Facebook. Para isso, dentro do método setup, inclua a seguinte instrução:

add_action( 'wp', array( 'FB_Login', 'check' ) );

Crie na sequência o método check solicitado para verificação das informações recebidas.

    public static function check()
    {
        if ( isset( $_GET[ 'login' ] ) && ( $_GET[ 'login' ] == 'facebook' ) ) {
            if ( isset( $_GET[ 'code' ] )  ){
                $user = self::get_user( $_GET[ 'code' ] );
                self::login( $user );
            } else if ( isset( $_GET[ 'error_code' ] ) && $_GET[ 'error_code' ] ) {
                wp_die( 'Não foi possível logar com o Facebook...' );
            }
        }
    }

O código acima trata de verificar se a varíavel login está definida como “facebook”, tal como você propôs anteriormente. Estando definida desse modo, verifica-se o retorno dado pela rede social que pode ser a varíavel code em caso de sucesso ou error_code em caso de erro.

A partir daqui, caso alguma coisa não ocorra do modo esperado pelo plugin, o código será interrompido e uma mensagem de erro mostrada ao usuário com wp_die. Perceba que em caso de erro, isso é feito de imediato.

Por outro lado, se a requisação estiver com os valores devidamente preenchidos iniciam-se os trabalhos para realização do login. O primeiro passo é recuperar as informações do usuário que estão no Facebook. Isso é feito com o método privado get_user.

    private static function get_user( $code )
    {
        $token_url = sprintf(
            'https://graph.facebook.com/oauth/access_token?client_id=%s&redirect_uri=%s&client_secret=%s&code=%s',
            self::$app_id,
            self::$site_url . '?login=facebook',
            self::$app_key,
            $code
        );

        $data = self::call( $token_url );
        if( !isset( $data[ 'access_token' ] ) || !$data[ 'access_token' ] )
            wp_die( 'Falha ao logar no Facebook...' );

        $user = self::call( 'https://graph.facebook.com/me?fields=first_name,last_name,gender,locale,email&access_token=' . $data[ 'access_token' ], false );
        if ( !isset( $user->email ) )
            wp_die( 'Não foi possível encontrar o usuário' );

        return $user;
    }

Uma nova URL (de acordo com a documentação do Facebook vista anteriormente) é criada a fim de validar o código recebido e gerar um token de acesso. Seguindo o comportamento de falha, caso algo não retorne o valor previsto os processos são interrompidos.

Com o token de acesso em mãos, obtido pelo retorno da requisição a primeira URL, é preciso agora fazer a consulta dos valores pretendidos (primeiro e último nome, gênero, idioma local, email) a uma nova URL.

Note que ambas as consultas aos endereços remotos do Facebook estão sendo feitas pelo método call da classe do plugin. Esse método irá realizar uma requisição remota com WordPress usando a HTTP API (se você for aluno wpdev clique aqui e aqui para mais detalhes sobre essa API).

    private static function call( $url, $parse_str = true )
    {
        $params = null;
        $r = wp_remote_get(
            $url,
            array( 'sslverify' => false )
        );

        if( $r[ 'response' ][ 'code' ] !== 200 )
            wp_die( 'Erro de comunicação com o Facebook...' );

        if ( $parse_str )
            parse_str( $r[ 'body' ], $params );
        else
            $params = json_decode( $r[ 'body' ] );

        return $params;
    }

Fazer login no WordPress com Facebook

Com o retorno das informações do Facebook você iniciou as requisições a partir do método check, recuperou os dados do usuário no Facebook com o método get_user e agora, de posse desses valores fará o login dentro do método privado login.

Esse método receberá como parâmetro os valores obtidos da API do Facebook. A variável $user será um objeto com os valores solicitados.

/*
object(stdClass) {
  "first_name"  => ""
  "last_name"   => ""
  "gender"      => "male"
  "locale"      => "pt_BR"
  "email"       => ""
  "id"          => ""
} */

Relembrando o funcionamento do plugin que está sendo desenvolvido, com os dados obtidos será criado um novo usuário dentro do WordPress. Isso será feito se não existir um outro usuário com o mesmo email recebido pelo Facebook.

    private static function login( $user )
    {
        $user_wp = get_user_by( 'email', $user->email );
        if ( !$user_wp ) {
            $args = array(
                'user_login'    => $user->email,
                'display_name'  => $user->first_name,
                'first_name'    => $user->first_name,
                'last_name'     => $user->last_name,
                'user_email'    => $user->email,
                'user_pass'     => uniqid()
            );

            $user_id = wp_insert_user( $args );

            if ( !is_int( $user_id ) || !$user_id )
                wp_die( 'Não foi possível vincular sua conta do Facebook ao site' );
        } else {
            $user_id = $user_wp->ID;
        }

        if ( !is_int( $user_id ) )
            wp_die( 'Não foi possível fazer o login com o Facebook...' );

Todas as informações do Facebook são repassadas ao usuário do WordPress. A senha criada foi qualquer uma apenas para que fosse possível a criação do novo usuário. No futuro, caso o usuário queira fazer login de modo direto pelo WordPress ele poderá, basta que para isso ele faça uso do recurso recuperar senha. O login funcionará das duas formas, pelo Facebook ou pelo WordPress de modo direto.

Criado o usuário ou não, as instruções evidenciam o identificador desse utilizador para que em seguida você possa finalizar o código de login autenticando esse usuário e fazendo o redirecionamento do mesmo a uma URL que você queira (no exemplo, a tela inicial).

        // … códigos do método login
        wp_set_auth_cookie( $user_id );
        wp_redirect( self::$site_url );
        exit;
    }

Integração Facebook e WordPress

O recurso para fazer login no WordPress com Facebook está pronto. O único detalhe que falta agora é você fazer a chamada da URL gerada pelo plugin com seu Tema. No começo do desenvolvimento do plugin você criou o método get_login_url, agora você precisa referenciá-lo no local onde deseja exibir o link de login com Facebook.

<?php
if ( class_exists( 'FB_Login' ) ) {
    printf(
        '<a href="%1$s" title="%2$s">%2$s</a>',
        FB_Login::get_login_url(),
        'Entrar com Facebook'
    );
} ?>

O código acima verifica se o plugin está ativo com a existência da classe FB_Login. Caso esteja ativo, insere um link HTML na página onde foi inserido. Ao optar por retornar apenas a URL de login, o plugin permite a você maior liberdade para criar sua tag <a> com as classes e especificações que melhor se adptarão ao seu Tema.

Como foi dito anteriormente esse é um exemplo básico porém prático de como integrar o Facebook ao WordPress. No entanto esse trabalho é um bom começo para que você, a partir dessas orientações, consiga evoluir e desenvolver integrações mais complexas.

Clique aqui para fazer o download da classe FB_Login