Facebook Connect, como conectar sua página com o facebook.

Para se conectar co Facebook, precisa-se seguir algunas passos básicos.

1º Quando você iniciar a tag HTML, você deveincluir nela uma sintaxe XML do Facebook. como o exemplo abaixo.

Antes

<html xmlns="http://www.w3.org/1999/xhtml">

Depois

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

2º Incluir ao final do documento, antes da tag </body> as linhas abaixo, onde 6f9a5e6aeeff75a6c5ef707dbc301e3f, é a Chave API que você cadastrou anteriormente.

&lt;script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
FB.init("6f9a5e6aeeff75a6c5ef707dbc301e3f","xd_receiver.htm");
&lt;/script&gt;

3º Você deve enviar um arquivo html receiver para a mesma pasta do app no sevidor. O código deve ser exatamente o abaixo, sempre.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
&lt;body&gt;
&lt;script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Pronto, você conectou seu aplicativo. Simples, não?

Mas, vamos melhorar um pouco.
Vamos incluir o botão Fconnect, para conectar.

Isso é mais complicado.
Você precisa incluir a tag abaixo onde você quiser que o botão apareça.

&lt;fb:login-button&gt;&lt;/fb:login-button&gt;

Brincadeira, é bem simples.

Com isso você se conecta, mas não obtem nenhuma informação sequer.

Vamos melhorar mais um pouco.
Vamos colocar o botão do Fconnect e uma div com um id (user)

&lt;div id="user"&gt;
Name: &lt;input name="name" size="27"&gt;&lt;br /&gt;
Ou você pode se conectar com &lt;fb:login-button lenght="long" onlogin="update_user_box();"&gt;&lt;/fb:login-button&gt;
&lt;/div&gt;

É nessa div, que mais tarde as informações serão incluídas via Javascript.

vamos cirar a fução em Js para receber e arrumar as informações.

function update_user_box(){
var user_box = document.getElementById("user");
user_box.innerHTML =
"&lt;span&gt;"
+ "&lt;fb:profile-pic uid=loggedinuser facebook-logo=true&gt;&lt;/fb:profile-pic&gt;"
+ "Bem-vindo, &lt;fb:name uid=loggedinuser useyou=false&gt;&lt;/fb:name&gt;. Voc&amp;amp;amp;amp;ecirc; est&amp;amp;amp;amp;aacute; conectado &amp;amp;amp;amp;agrave; sua conta do facebook."
+ "&lt;/span&gt;";
FB.XFBML.Host.parseDomTree();
}

Com essa função você recebe a imagem (avatar) do usuário e o nome dele e joga tudo naquela div que criamos anterormente (lembra?).

&lt;!-- essa é a imagem --&gt;
&lt;fb:profile-pic uid=loggedinuser facebook-logo=true&gt;&lt;/fb:profile-pic&gt;
&lt;!-- essa é o nome --&gt;
&lt;fb:name uid=loggedinuser useyou=false&gt;&lt;/fb:name&gt;

Pra finalizar, na última linha, onde incluimos A chave da API, nós fazemos uma pequena alteração.

FB.init("6f9a5e6aeeff75a6c5ef707dbc301e3f","xd_receiver.htm", {"ifUserConnected" : update_user_box});

Incluindo a sintaxe “{“ifUserConnected” : update_user_box}”, ao entrar na página, se o usuário estiver conectado ao facebook e ter permitido a página acessar seu perfil, não aparece o botão do connect, mas já as informações.

Em relação ao botão “Fconnect” não da pra alterar ao seu “bel prazer”, mas da pra usar alguns pré-confirgurados. Neste link você consegue visualizar as opções disponíveis.

É isso. Agora você já sabe como conectar ao facebook. No próximo post, vou ensira a postar alguma coisa no mural.

Para maiores informações sobre a API acesso o Wiki. http://wiki.developers.facebook.com/

Veja o vídeo explicativo


  • http://www.mosaicca.com.br Diego Onishi

    É o mesmo procedimento se eu quiser permitir o login de um usuário do facebook em meu site?

  • http://www.leandrogarcia.com Leandro Garcia

    Sim, você pode usar o mesmo.

  • http://www.afonsorom.blogspot.com alfonso

    Leandro…como faço para interligar um site qualquer a meu blog?…obrigado

  • http://www.leandrogarcia.com Leandro Garcia

    Como assim interligar? O Facebook disponibiliza essa ferramenta, outros sites depende.

  • Angela Maria Borcezi

    Gostaria de conectar o facebook ao incredimail, mas achei essas orientações muito complcadas, não entendi nada, há uma maneira mais simples?? obrigada. Angela

  • leandro garcia

    Olha Angela, eu não uso o incredimail, por isso não sei como fazer isso que você precisa. Esse post é para conectar o facebook à uma página de internet.

  • http://cakephp.tosystems.net/ Tylër Vortex

    Bom, tentei manter a sessão aberta, mas não fica, só se tiver parâmetros por get… ;/

  • solimar

    Oi Leandro boa noite, como faz para gerar o secure canvas url?
    segui todos os passos mas não cai direto na pagina de permissão, preciso que meu aplicativo cai primeiro em permissao, ta caindo no jogo direto com o botao de conect em cima do jogo. aguardo sua resposta, obrigada Solimar…

  • Alfredo Luis

    quero conetar o meu email ao facebook.

  • Diogo Leones

    Olá Leandro, sou novo por aqui, mas gostava de saber se com este código todos os comentários que eu colocar no facebook podem ser seguidos no meu site, se não for, como o faço?

  • leandro garcia

    Olha, não se é possível conectar seu e-mail ao facebook. Talvez existam algum software cleinte de e-mail que ofereça esta possibilidade, mas eu não conheço.

  • leandro garcia

    Diogo, eu conheço duas maneiras, a primeira é usar um código do facebook que criar uma área de comentários, onde você só precisa configurar algumas opções. link: http://developers.facebook.com/docs/reference/plugins/comments/ a outra que é a que eu uso com mais frequencia, eu salvo o comentário em um banco de dados e o submeto ao facebook, deste jeito eu consigo ter o histórico. Acredito que tem como usar a API do FB pra fazer isso, mas eu ainda não tive a oportunidade de fazer.

  • ana luiza
  • leandro garcia

    Já utilizei algumas vezes esse plugin, é muito bom e fácil de usar

  • deisy

    não entento porque não consigo entrar no meu face coloco a senha e logo em seguida pede a senha de novo torno colocar a senha e pede novamente.

  • than borges

    eu conectei meu msn no facebok mais nao posso ver eles disponivel

  • http://dicashot.blogspot.com/ Samuel

    Faz um totorial mostrando onde coloca cada um destes códigos no HTML do Blogspot, por que eu gostaria de colocar este sistema no meu blog mas só não sei onde coloca cada código.

    Pode me ajudar?

  • http://kbmusic.me Talles

    amigo tem jeito de você enviar esse código pra mim sem esses caracteres &&& airan.talles@gmail.com

  • tadeu kirnen

    Olá Leandro

    Com o Facebook Conect eu posso permitir acesso a área reservada do meu site?
    No caso, a uma pasta reservada a membros?
    Uso wordpress 3.5.1
    Obrigado

  • sara

    vc pode me ajudar

  • NEUZAOLIVEIRA

    ACHOQUE SUA AJUDA FOI VÁLIDA,OBRIGADA