A pedido de alguns amigos e também de leitores do blog, desta vez vou tratar sobre a API do Facebook. Implementar a API do Facebook
no seu site, permite que você utilize as funções do mesmo, como autenticar um usuário, habilitar uma caixa de comentários
em alguma página do seu site, colocar o botão de curtir, compartilhar, e envia recomendações pelo Messenger, tudo diretamente
do seu site para a sua página do Facebook, entre muitas outras funcionalidades.
Trabalhar com a API do Facebook é ao mesmo tempo fácil e complicado, pois por mais que o Facebook ofereça um vasto suporte com guias e
explicações da sua API, você sempre vai ficar em dúvida de como fazer algo e vai passar um bom tempo pesquisando na internet como realizar
aquilo que você almeja, e é por isso que eu escrevo esse artigo. Se você nunca trabalhou com a API do Facebook, este artigo é um ótimo
começo, e se você já tem algumas noções ou já trabalha com o mesmo, tenho certeza que você descobrirá algumas coisas novas nesse artigo
que talvez queira implementar no seu projeto.
Como todos os artigos, este aqui também não poderia faltar o exemplo prático, então eu vou aproveitar que estamos estudando
sobre a API do Facebook e juntar o útil ao agradável. Sendo assim, o primeiro exemplo que podemos ter da API é o botão de curtir.
Clicando no botão abaixo, você irá curtir a minha página do Facebook, então agora é a hora de você testar a API e já dar aquela
força para o blog, aliás, curtindo a página você sempre será notificado de novos artigos como este.
Experimente o botão (clique nele para não ter 7 anos de azar):
Você também pode compartilhar a página do blog na sua linha do tempo ou em um grupo, da mesma forma que você também pode utilizar
o botão enviar para enviar a página a alguém pelo Messenger (inbox), veja os respectivos botões:
Compartilhar:
Enviar:
Habilitar os comentários do Facebook também é muito fácil e é uma das melhores maneiras de você colocar comentários de usuários em
seu site, pois basta o usuário está conectado com o Facebook que ele já pode realizar um comentário, além de você não precisar
perder tempo com banco de dados (se quiser), css, javascript e outros recursos para montar sua própria caixa de comentários.
Para testar a caixa de comentários, você pode ir até o final deste artigo onde eu tenho a minha própria caixa de comentários
instalado no blog. Faça um comentário de teste lá, não tem problema!
Outra coisa que podemos fazer, é verificar se o usuário que está navegando no seu site está logado no Facebook ou não, e através disso
realizar diversos eventos que veremos mais tarde.
Pois é, essas são algumas das funcionalidades que podemos implementar em qualquer site utilizando API do Facebook, e é tudo muito simples
e você aprenderá agora aqui no blog.
Desde já eu sugiro que você salve este artigo nos favoritos do seu navegador, pois assim você terá um acesso rápido aos códigos aqui
disponibilizados. Recomende este artigo aos seus amigos, pois pode ajudar a eles também (que tal utilizar o botão de compartilhar acima?
Hehehe).
Instalando a API no meu site
Vamos do começo. Primeiramente, para instalar a API do Facebook no seu site, você precisa logar com sua conta do Facebook na página
de desenvolvedores. Para isso acesse:
https://developers.facebook.com/
Entre com sua conta do Facebook e você poderá utilizar todas as ferramentas e serviços do Facebook Developers.
Agora você precisa procurar em algum canto a opção
Adicionar um novo aplicativo. Digo em algum canto porque a página
de developers está sempre mudando, mas atualmente, pelo menos, você encontra a opção de adicionar um novo aplicativo no
canto superior direito.
Ao selecionar esta opção, o Facebook vai lhe pedir o nome de exibição e seu email para contato. O nome de exibição é importante, pois
é o nome que será exibido aos usuários quando seu site for pedir as permissões de acesso do mesmo. Sabe quando aparece "A página
Conrado Saud Programador gostaria de acesso as suas informações de perfil público", é ali que o nome que você digitar aqui aparecerá.
Você pode alterar isso mais tarde, e pelo menos agora de inicio, crie algo só para testes, você pode criar outros aplicativos com outros
nomes depois.
Está quase tudo pronto, o que você precisa fazer agora é informar quais são os domínios permitidos pelo seu aplicativo. Para isto,
vá em
Configurações (menu esquerdo) e procurar pelo campo
Domínios do aplicativo. Neste campo você
pode inserir mais de um domínio onde as operações realizadas no ID do seu aplicativo poderão ser executadas.
Se você estiver fazendo testes no localhost, você pode inserir o domínio http://localhost.com.
Lembrando que operações como curtir e logar com o Facebook podem gerar erros estando localhost, então para testar cem por cento as funcionalidades
dos botões é recomendável que você utilize um domínio real para realizar os testes.
Uma vez criado seu aplicativo e inserido os domínios permitidos pelo seu aplicativo,
você já pode ter acesso aos serviços da API. Após criar seu aplicativo, você será direcionado ao painel
de aplicativos e lá também tem um passo a passo que você pode seguir para aprender um pouco mais sobre a API. Neste caso, eu vou lhe
passar os links diretos para você acessar e já inserir as funcionalidades da API sem você precisar seguir esses guias, que pelo menos
para mim não funcionou.
Uma coisa importante neste painel, é que no canto superior esquerdo você tem seu
ID do Aplicativo. Você precisa
desse ID para utilizar qualquer função oferecido pelo Facebook. Você também vai precisar da senha.
Para ter acesso a sua senha, vá até o menu principal do painel (clique em Painel no menu esquerdo) e sua senha estará no campo
Chave Secreta do Aplicativo. Clicando em mostrar você pode ver qual é a sua senha. Você sempre precisará da sua
senha junto do seu ID do aplicativo para realizar as funções da API, a junção da sua senha e do seu ID é chamado de Token, o famoso
token de acesso.
Sabendo disso, você já está pronto para começar a utilizar todas as funções da API do Facebook.
SDK do Facebook
Para executar os comandos javascript do Facebook você precisa inserir dentro da sua página a função que carregará o SDK do
Facebook no seu site. Recomendo que crie um arquivo .js separado para todas as funções do Facebook.
Insira estes códigos no seu arquivo .js onde irá rodar as funções do Facebook:
// Função chamada para iniciar o SDK do Facebook
window.fbAsyncInit = function() {
FB.init({
appId : seu ID do Aplicativo,
cookie : true,
status : true,
xfbml : true,
version : 'v2.8'
});
// * --------- Primeiras funções a serem chamadas após o SDK
console.log("SDK em funcionamento...");
};
// SDK do Facebook
(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 = "http://connect.facebook.net/pt_BR/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Você também precisa colocar uma div no seu html para tudo funcionar corretamente, insira de preferência após a tag body:
<div id="fb-root"></div>
Perceba que no javascript onde iniciamos o SDK do Facebook você precisa colocaro ID do seu aplicativo. Esse ID pode ser encontrado
no seu painel do Facebook Developers, fica no canto superior esquerdo.
Perceba as linhas de comentários que eu coloquei após a chamada o SDK, pois é lá que algumas funções devem ficar para serem
chamadas logo que sua aplicação começar a rodar, e veremos ela a seguir.
Um problema que você pode ter se tentar rodar a API no localhost, é se deparar com o erro
"Não é possível carregar a URL [...]" que aparecerá no console do navegador. Este erro significa que a url que você está executando
seu SDK não consta nos domínios cadastrados no painel do seu aplicativo.
Habilitando botões de curtir, compartilhar, seguir, salvar e outros...
Botão Curtir
Para inserir os botões que a API oferece é muito simples, basta inserir o html do botão que você deseja. Neste caso, o botão curtir.
Você pode personalizar seu botão curtir de acordo com alguns padrões do Facebook. Você também pode consultar toda a documetação do
botão no site oficial:
https://developers.facebook.com/docs/plugins/like-button?locale=pt_BR
Veja este botão mais genérico como exemplo:
<div class="fb-like"
data-href="http://www.facebook.com/sua-pagina/"
data-layout="standard"
data-action="like"
data-show-faces="true">
</div>
Pronto! O botão de curtidas já está implementado. No atributo
data-href você deve inserir a página na qual a curtida
será atribuida, pode ser tanto uma página que você administra quando qualquer página do Facebook ou algum domínio qualquer.
Esse botão você pode
personalizar de acordo com o permitido pelo Facebook, como por exemplo (neste botão),
mostrar ou não os rostos de todos os amigos daquela pessoa que também curte aquela página, o botão compartilhar ao lado do botão
curtir, alterar o botão do tamanho, entre outros. Para fazer essa personalização, você precisa entrar no endereço que eu passei e ir
até o meio da página, onde tem uma painel em que você pode personalizar este itens. Ao clicar em
Obter código você
recebe o html do botão de acordo com o que você personalizou.
Existe também uma curiosidade a parte, em que você pode atribuir nessa data-href qualquer dominio que você quiser, mesmo que não seja
uma página do Facebook. Neste caso, o botão de curtida apenas será um contador de curtidas naquele domínio, e isso é permanente! Ou seja,
mesmo que você remova o html da sua página, aquele domínio sempre terá aquele número de curtidas quando você resolver implementar ele novamente
no seu site ou em outro lugar.
Botão Seguir
O botão de seguir é muito parecido com o botão de curtidas.
Acesse:
https://developers.facebook.com/docs/plugins/follow-button
Neste link você pode gerar o botão de seguir da forma que quiser.
Neste caso, um exemplo simples é esse:
<div class="fb-follow" data-href="https://www.facebook.com/seu-perfil/" data-layout="standard" data-size="small" data-show-faces="true"></div>
Lembrando que a funcionalidade do botão seguir é que você insere apenas
perfis do Facebook. Quando a pessoa clicar
em seguir, o perfil que estiver referenciado no data-href a pessoa começará a segui-la, ou seja, poderá ver as publicações que este
perfil fizer na linha do tempo.
Botão de Compartilhar
O botão de compartilhar segue o mesmo raciocínio que os outros botões. Você pode personaliza-lo ele e edita-lo como achar melhor
no site de Developers:
https://developers.facebook.com/docs/plugins/share-button
Segue o código do botão de compartilhar tradicional:
<div class="fb-share-button"
data-href="http://www.facebook.com/sua-pagina/"
data-layout="button_count">
</div>
Mais abaixo eu explico como fazer aqueles esquemas que você vê em muitos sites onde para acessar algum conteúdo ou download você
precisa primeiramente curtir uma página ou compartilhar ela para que tal conteúdo seja liberado, e isso é bem simples de se
fazer.
Botões de salvar, enviar e outros
Da mesma forma que foi implementado os botões de curtir, compartilhar e seguir, você pode adicionar os demais botões que a API oferece
através do próprio site, basta navegar nas opções no menu esquerdo. Acesse
clicando aqui.
Habilitando caixa de comentários e incorporar publicações
Você também pode colocar uma caixa de comentário no seu site de uma forma bem simples, você só precisa adicionar este html no seu site:
<div class="fb-comments" data-href="https://facebook.com/sua-pagina" data-numposts="5"></div>
Lembre-se que tanto para a caixa de comentários quanto para os botões do Facebook você precisa implementar o javascript do SDK do Facebook em
sua página.
Assim como os outros botões, você também pode ver outras opções e personalizar a caixa de comentários
clicando aqui.
E assim como o botão de curtir, você não necessáriamente precisa colocar uma página do Facebook no data-href, se você colocar qualquer
outro domínio a caixa de comentários continuará funcionando do mesmo jeito, porém, somente para aquele domínio.
Incorporar comentários e publicações
Você também pode fazer citações de um comentário ou uma publicação de uma página do Facebook ou do perfil de alguém.
Para comentários incorporados:
<div class="fb-comment-embed"
data-href="https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185"
data-width="500">
</div>
A url que você precisa inserir no data-href é a url que corresponde ao comentário que você deseja incorporar. Para obter essa url
específica você precisa ir até o comentário que você quer incorporar e clicar na
data de publicação deste comentário.
Sabe aquela data junto das horas que fica ao lado do botão de responder o comentário? Pois é, clicando lá você será direcionado a uma
página específica daquela publicação e do comentário. Para ter certeza de que a url está correta, basta encontrar na url
comment_id=..., se houver esta variável na url, está tudo certo, basta colar no data-href.
Para publicações incorporadas:
<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"></div>
Para obter a url exata do post você pode fazer exatamente como dito na incorporação do comentário, basta clicar na data e hora da publicação
que fica embaixo do nome da pessoa, assim você será direcionado a página exclusiva da publicação, daí basta copiar a url.
Há uma outra maneira de incorporar publicações, você pode clicar naquela setinha que tem no canto da publicação (onde você vai pra editar) e
selecionar a opção
incorporar. É exatamente a mesma coisa, a diferença é que através deste método você não precisa do SDK
do Facebook, pois o mesmo é incorporado por um iframe.
Lembre-se que tanto os comentários incorporados quanto as publicações somente aparecerão se forem públicos, isto é, nada aparecerá no seu
html se o comentário que você está tentando citar é de uma publicação de um amigo que restringe suas publicações para amigos, da mesma
forma que grupo pode restringir suas publicações apenas para quem participa do mesmo (grupo privado ou secreto).
Verificando se o usuário está logado e pegar suas informações
Por diversos motivos você pode querer verificar se o usuário que está navegando no seu site está logado com o Facebook, ou então,
realizar o login dele, para por exemplo, criar um cadastro. Muitos sites hoje em dia dão opção de se cadastrar com Facebook invés de
criar um registro próprio na sua ferramenta.
Primeiramente vamos verificar se o usuário está logado com o Facebook. Se ele não estiver, o botão de logar ficará visível para
o usuário se autenticar, e caso esteja, o botão não irá aparecer.
Antes de mais nada, considere o código a seguir:
window.fbAsyncInit = function() {
FB.init({
appId : seu ID do Aplicativo,
cookie : true,
status : true,
xfbml : true,
version : 'v2.8'
});
// * --------- Primeiras funções a serem chamadas após o SDK ser carregado
// verifica se o usuário está logado
verificaLogado();
};
Esta é a função que chama o SDK do Facebook que vimos anteriormente.
Depois do comentário que fiz na função,
qualquer outra função ou código que você chamar será executado após o SDK ter sido carregado.
Neste código eu chamei a função
verificaLogado(), que irá verificar se o usuário está conectado ou não e emitir
uma mensagem ou uma ação.
Veja seu código abaixo:
// verifica se o usuário está logado e executa ações
function verificaLogado(){
FB.getLoginStatus(function(response) {
if(response.status === "connected"){
usuarioLogado();
}else{
usuarioDeslogado();
}
});
}
// executa ações se o usuário estiver logado
function usuarioLogado(){
console.log("Usuário conectado com o Facebook!");
$("#btnLogin").hide();
}
// executa ações se o usuário não estiver logado
function usuarioDeslogado(){
console.log("O usuário não está conectado com o Facebook.");
$("#btnLogin").show();
}
Veja que as funções
usuarioLogado() e
usuarioDeslogado() foram apenas uma questão de capricho meu, pois
o verdeiro código está no
verificaLogado() que chama a função
FB.getLoginStatus().
A partir do momento que você tem o SDK inicializado no seu javascript, você pode chamar as funções que começam com FB.
Essas são funções específicas do Facebook para você realizar diversas funcionalidades. A função
FB.getLoginStatus() em específico verifica se a pessoa que está navegando no momento está conectada com o Facebook através
de uma solicitação ajax, que retornará um arquivo json em
response. Recomendo usar o console.log no response para ver
o objeto que ele retorna. Neste objeto, temos
status que pode haver a string "connected" que seria um true para usuário
conectado.
Quando eu digo "usuário conectado", o usuário pode estar conectado com o Facebook mas não conectado com o seu site, ou seja, o seu aplicativo.
Através dos cookies que o Facebook armazena no dispositivo do usuário como o "lembrar-me", faz com que o Facebook saiba que aquele usuário
está com o login efetuado no Facebook mas não na sua plataforma. Para que o usuário esteja conectado com o Facebook e com a sua aplicação,
o usuário precisa executar a ação de login no seu site e conceder as permissões do perfil dela para o seu aplicativo.
Segue o html do botão de login do Facebook:
<div class="fb-login-button" scope="public_profile" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false"></div>
Assim como os outros botões anteriormente, você também pode customizar este botão,
clique aqui para ver.
Sempre que o usuário clica no botão de logar, automaticamenteo Facebook chama a função
FB.login(), mesmo que você não
tenha implementado ela no seu javascript, mas você pode modificá-la com o código a seguir:
// quando o usuário clicar no botão de logar
FB.login(function(response){
if(response.status === "connected"){
usuarioLogado();
}else{
usuarioDeslogado();
}
});
Isto é, se o usuário clicar no botão de logar com o Facebook essa função será chamada. Se o usuário autorizar seu aplicativo a pegar
as informações dele do
scope, ele retornará "connected" como true, e consequentemente, já deixará o usuário conectado.
Caso aconteça algum problema ou o usuário negue a solicitação das informações, ele cairá no else.
Algo importante para se notar no botão de login, é a propriedade
scope que eu adicionei no html acima já que ele
não aparece no código que você obtem pelo link que eu passei. No scope você pode definir quais são as informações que você
deseja solicitar ao usuário, que neste caso e como padrão, o scope vem com
public_profile, ou seja, as informações
do perfil público da pessoa como nome, sobrenome, sexo, link do Facebook dela, e outros dados como telefone e email caso essa
pessoa tenha deixado essas informações em aberto no perfil.
Você pode pegar várias outras informações e pedir vários tipos de acesso do perfil daquela pessoa, como por exemplo, o email e o telefone
caso sejam informações privadas do perfil dessa pessoa.
Você também pode ver quais são as páginas que essa pessoa administra e até mesmo
permissões do seu site publicar na página desta pessoa e inclusive no próprio perfil dela, isto claro, se a pessoa permitir.
Você pode ver a lista completa de permissões clicando
aqui.
Ok, o usuário está logado, e agora como pegar as informações dele?
Depois que o usuário estiver logado no seu aplicativo, você precisa fazer uma requisição ao graph do Facebook, que é como um ajax
que envia solicitações via url e te devolve em formato json.
Veja abaixo:
var campos = "id,email,first_name,gender,last_name,name,link,locale,timezone,updated_time,verified,accounts";
FB.api("/me?fields="+campos, function(response){
if(response.id.length > 1){
console.log("Olá, "+response.first_name+", seja bem vind"+(response.gender=="male"?"o":"a")+".");
}
});
Na variável campos eu inseri todas as informações que eu gostaria de obter do usuário. Veja que são apenas informações de perfil público, e neste
caso eu ainda pedi o email da pessoa, sendo assim, este campo estará vazio caso o email deste usuário seja privado. Este é um exemplo com
qualquer informação que você queira obter daquela pessoa, caso você peça a lista de amigos dela sem ter pedido a permissão anteriormente no login,
a variável de lista de amigos irá retornar vazio.
Agora com as informações do usuário você pode fazer diversas coisas como por exemplo, enviar as informações deste usuário para seu banco
de dados e assim ter uma tabela cheia de registro de usuários que logaram em seu site.
Da mesma forma, você pode utilizar este método para cadastrar um usuário em seu site através do Facebook, pois salvando essas informações
na sua tabela de usuários, quando o usuário estiver navegando basta verificar se ele está logado no Facebook e logá-lo na sua plataforma.
É claro que, o botão "Continuar com Facebook" não é muito chamativo, então seria interessante adaptar este botão. Não é possível alterar
a cor nem o texto do botão padrão do Facebook, contudo, você pode criar o seu próprio botão através dos eventos que é o próximo item
deste artigo.
Eventos dos botões
Os eventos dos botões são chamados sempre que o usuário clica em algum dos botões oferecidos pelo Facebook. Não há como alterar
a funcionalidade original de um botão, ou seja, se o usuário clicar no botão curtir, não tem como "cancelar" aquela operação e desvia-lo
para uma outra função ou coisa do tipo, contudo, você pode executar qualquer função após o evento do usuário sobre tal botão,
como por exemplo, desvia-lo para outro lugar do seu site
após o Facebook realizar a operação de curtida.
Uma funcionalidade que as pessoas utilizam muito hoje com as funções dos botões é a liberação de conteúdo ou download de um site
somente após o usuário curtir uma página ou compartilhar. E isso é muito simples de fazer.
Além dessas operações, é através dos eventos dos botões que podemos personalizar os botões que vem como padrão pelo Facebook, isto é,
se você gostaria de criar um botão bem grande com o titulo "Cadastre-se com o Facebook!", você pode fazer isso aqui.
Para isso vamos usar a função
FB.ui(), que é a função encarregada destes eventos. O primeiro evento
será quando o usuário clicar no botão de compartilhar a página. Veja:
FB.ui({
method: 'share',
href: 'https://facebook.com/sua-pagina/',
}, function(response){
console.log("Obrigado por compartilhar nossa página!");
});
Em method você pode determinar a ação do usuário, neste caso o share significa quando o usuário compartilhar sua página. Você também
pode alterar para send, que é quando o usuário envia sua página (inbox). Neste caso, no lugar do console.log, você poderia simplesmente mostrar
o elemento da sua página que só poderia ser visualizada se o usuário tivesse realizado a ação de compartilhar.
Para o botão de curtir, a função é
FB.Event.subscribe(), acompanhada dos parametros edge.create e edge.remove, que significam
se o usuário curtiu sua página ou descutiu ela, respectivamente. Veja:
FB.Event.subscribe('edge.create', function(response) {
console.log("Obrigado por curtir a nossa página!");
});
A questão da personalização dos botões é diferente para cada caso. O botão de curtir do Facebook não pode ser alterado, isto é, você
só pode utilizar os botões padrões que o Facebook lhe oferece para colocar em sua página. Isso se deve a segurança, pois caso o botão
curtir pudesse ser personalizado, qualquer pessoa poderia esconder este botão por trás de algum CSS e fazer vários usuários do site
curtir páginas sem saber.
É diferente quando se trata dos botões de compartilhar, enviar e até mesmo do botão logar, pois estes botões sempre que o usuário clica
neles abre um pop up do Facebook indicando que uma operação está sendo feita.
Veja um botão personalizado que você poderia fazer para compartilhar e cadastrar um usuário com o Facebook usando o Bootstrap e jQuery:
<button class="btn btn-lg btn-primary" onclick="cadastrarComFacebook();">
Cadastre-se agora com o Facebook!
</button>
<a href="#" id="btnCompartilhar">
Compartilhe com seus amigos e receba 10% de desconto!
</a>
<script>
// onclick do botão cadastrar com o facebook
function cadastrarComFacebook(){
FB.login(function(response){
if(response.status === "connected"){
// com o usuário conectado você já pode enviar
// as informações dele para o banco e cadastra-lo
enviaDadosBanco();
}
});
}
// quando o usuário clicar para compartilhar
$("#btnCompartilhar").click(function(e){
e.preventDefault();
// basta chamar agora a função FB.ui para compartilhamento
FB.ui({
method: 'share',
href: 'https://facebook.com/<strong>sua-pagina</strong>/',
}, function(response){
console.log("Parabéns, você ganhou 10% de desconto!");
});
});
</script>
Desta forma você tem total controle de todos os eventos dos botões do Facebook em sua página!
Dicas e considerações finais
Este foi um longo artigo e me rendeu boas horas escrevendo-o, eu realmente espero que tenha lhe ajudado de alguma forma, tentei resumir
neste artigo as principais funções que você provavelmente iria utilizar. Caso este artigo tenha lhe ajudado, deixe seu comentário
ao final deste artigo dizendo o que achou e recomende o blog para amigos, e também,
curta a página do blog e seja sempre notificado de novos artigos como este.
E para finalizar este artigo, eu deixo uma dica muito boa para a
renderização dos elementos do Facebook.
Ao estudar a API do Facebook, provavelmente você observou que os botões de curtir, compartilhar e etc
as vezes sempre demora bastante
para serem carregados, e quase sempre dentro do nosso site colocamos esses botões estratégicamente posicionados para que os usuários
interajam com eles, e muitas vezes também fazem parte do nosso CSS. Já tive projetos em que o layout ficava todo bagunçado enquanto os botões
não carregavam, e ficar fazendo gambiarra para consertar esses problemas é a pior coisa que existe.
Para isso, arrumei uma solução muito simples para melhorar a renderização dos elementos do Facebook e não bagunçar a sua página.
Então vamos considerar um html bem simples onde o texto da página só fará algum sentido se os botões de curtir e compartilhar estiverem
sendo exibidos na página:
<h1>Olá, seja bem-vindo ao meu site</h1>
<br>
<p>Não se esqueça de curtir nossa página no Facebook:</p>
<span class="fbCarregando"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></span>
<div class="fb-like fbCarregado" data-href="https://facebook.com/sua-pagina/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<br>
<p>E também compartilhe com seus amigos:</p>
<span class="fbCarregando"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></span>
<div class="fb-share-button fbCarregado"
data-href="http://www.facebook.com/sua-pagina/"
data-layout="button_count">
</div>
<br>
<p>Obrigado por nos visitar. Volte sempre!</p>
<style>
.fbCarregando{
display: none;
}
</style>
Perceba que esta página é completamente dependente dos botões do Facebook para que o usuário entenda o que está acontecendo, e
geralmente os botões do Facebook demoram cerca de três segundos ou mais para serem renderizados.
Para solucionar isto, para todos botões do Facebook eu adicionei a classe
fbCarregado e também adicionei
um elemento span para cada botão com a classe
fbCarregando, que inicialmente não será mostrado na tela. Este span
tem um gif de loading dentro dele que será exibido enquanto os botões do Facebook não forem renderizados.
Veja o código de como fazer isso:
$(".fbCarregando").show();
FB.Event.subscribe('xfbml.render', function(response) {
$(".fbCarregando").hide();
$(".fbCarregado").show();
});
Da mesma forma que usamos o FB.Event.subscribe para resgatar o callback do clique no botão curtir, utilizamos "xfbml.render" que será
chamado quando o botão de
curtir for renderizado por completo. Quando isso acontecer, os loaders serão escondidos
e os botões serão mostrados. Verificar apenas a renderização do botão curtir é o suficiente, pois todos os botões renderizam na mesma
velocidade, então uma vez que um botão estiver renderizado, todos estarão.
Lembrando que este código deve ser inserido dentro do bloco de códigos a serem executados após o SDK do Facebook ser carregado, caso
contrário ele nunca funcionará.
Como dito anteriormente, este artigo levou algumas horas para ser escrito e testado, então caso eu tenha lhe ajudado de alguma forma, peço
que compartilhe este conteúdo com seus amigos e também curta a
página do blog no Facebook, pois também me ajudaria bastante.
Deixe seu comentário abaixo a respeito do artigo, duvidas e informações estarei respondendo a todo o momento. Obrigado por sua presença!
