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




20 Comentários »

  1. Comentário por Diego Onishi — 30/12/2009 @ 12:50 pm

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

  2. Comentário por Leandro Garcia — 06/01/2010 @ 5:54 pm

    Sim, você pode usar o mesmo.

  3. Comentário por alfonso — 14/02/2010 @ 8:05 pm

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

  4. Comentário por Leandro Garcia — 04/03/2010 @ 1:33 pm

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

  5. Comentário por Angela Maria Borcezi — 03/12/2010 @ 7:09 pm

    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

  6. Comentário por leandro garcia — 06/12/2010 @ 2:46 pm

    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.

  7. Comentário por Tylër Vortex — 04/01/2011 @ 6:48 pm

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

  8. Comentário por solimar — 26/01/2011 @ 10:57 pm

    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…

  9. Comentário por Alfredo Luis — 17/05/2011 @ 10:53 am

    quero conetar o meu email ao facebook.

  10. Comentário por Diogo Leones — 20/05/2011 @ 8:22 am

    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?

  11. Comentário por leandro garcia — 20/05/2011 @ 1:42 pm

    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.

  12. Comentário por leandro garcia — 20/05/2011 @ 1:47 pm

    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.

  13. Comentário por leandro garcia — 21/11/2011 @ 6:23 pm

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

  14. Comentário por deisy — 15/03/2012 @ 5:18 pm

    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.

  15. Comentário por than borges — 19/03/2012 @ 7:36 pm

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

  16. Comentário por Samuel — 05/10/2012 @ 4:47 pm

    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?

  17. Comentário por Talles — 04/01/2013 @ 12:30 am

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

  18. Comentário por tadeu kirnen — 10/02/2013 @ 12:11 pm

    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

  19. Comentário por sara — 23/03/2013 @ 6:34 pm

    vc pode me ajudar

Rss dos comentários TrackBack URL

Deixe um comentário