Arquivos de 11/2009:
26/11/2009 - 14:40
Acreditando eu que os dois posts anteriores foram seguidos, agora vamos postar o item no mural.
Para postar, a primeira coisa que precisamos é criar um “template feed data”. Vá até http://developers.facebook.com/tools.php?feed.
Procure o nome do seu aplicativo e clique em Proxima.
Neste ponto você começa a desenvolver ou criar o seu “template feed data”.
O template nada mais é do que umaforma com que o facebook recebe informações em JSON e exibe no perfil do usuário com sua prévia autorização.
O primeiro é o de uma linha, algumas variáveis são exclusivvas como actor e images. As variáveis são exibidas na forma de {*variável*}. Ex. {*actor*} escreveu um post. Sairia: Leandro escreveu um post.
Há o campo onde você desenvolve o template e abaixo, um onde você desenvolve o JSON, por padrão vem:
{“images”:[{"src":"http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg", "href":"http://www.facebook.com"}, {"src": "http://pad.thedigitalmovement.com/_blaise/2007-06-13-roger-waters.jpg", "href":"http://www.facebook.com"}]}
Apenas imagens, mas você pode e deve acrescentar de acordo com sua necessidade.
Vamos criar um que envie o resultado de um jogo, o nome dos times, o escudo de cada time e o texto que você escreveu.
{“time1″:”Atlético-GO”,”time2″:”palmeiras”,”gols1″:”2″,”gols2″:”0″, {“images”:[{"src":"http://images.ig.com.br/placarus/escudos/atletico_goianiense_go.gif", "href":"http://images.ig.com.br/placarus/escudos/atletico_goianiense_go.gif"}, {"src": "http://images.ig.com.br/placarus/escudos/atletico_goianiense_go.gif", "href":"http://images.ig.com.br/placarus/escudos/atletico_goianiense_go.gif"}]},”comentario”:”vai corinthians”}
Com este JSON, ocê pode desenvolver seu template.
{*actor*} Comentou sobre {*time1*} {*gols1*} x {*gols2*} {*time1*} -> Leandro Garcia comentou sobre Corinthians 2 x 0 palmeiras
Ao clicar em próxima, você desenvolve o template maior, o que é mais comulmente usado.
Colocaremos o título da mesma maneira, embora não necessite ser igual.
{*actor*} Comentou sobre {*time1*} {*gols1*} x {*gols2*} {*time1*} -> Leandro Garcia comentou sobre Corinthians 2 x 0 palmeiras
Abaix no Histórico curto, colocaremos apenas o comentário digitado:
{*comentario*} -> Vai Corinthians
depois Próxima.
No próximo item você cria um link de retorno, no Texto do link da ação, por exemplo: Veja mais sobre o Jogo
no Link da ação ex. http://esporte.ig.com.br
Pronto, em todo post do mural vai haver um link para http://esporte.ig.com.br, você pode alterar da maneira como preferir, inclusive utilizar o JSON, como o número do jogo por exemplo. Vai da sua necessidade.
Clique em próxima e depois em registar coleção de modelo.
Será aberto um pop com o identificador do template. Copie-o e reserve pra mais tarde.
Bom agora você tem um template elaborado, hora de criar o código propriamente dito.
Criamos uma função em JS para publicar.
** O facebook alterou a forma de se publicar. Neste poste você consegue ver.
function publish($comentario){
{"time1":"Corinthians","time2":"palmeiras","gols1":"2","gols2":"0", "images":[{"src":"http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg", "href":"http://www.facebook.com"}, {"src": "http://pad.thedigitalmovement.com/_blaise/2007-06-13-roger-waters.jpg", "href":"http://www.facebook.com"}],"comentario":"vai corinthians"}
facebook_publish_feed_story(141837730762, $template_data);
}
Onde 141837730762 é o id do template que você criou;
O código abaixo, faz a permissão;
function facebook_prompt_permission(permission) {
FB.ensureInit(function() {
FB.Connect.showPermissionDialog(permission);
});
}
O código abaixo faz a publicação própriamenst dita.
function facebook_publish_feed_story(form_bundle_id, template_data) {
FB.ensureInit(function() {
FB.Connect.showFeedDialog(form_bundle_id, template_data);
});
}
Criamod um botão para enviar a mensagem.
<input onclick="publish('Vai Corinthians')" type="button" value="Submit Comment" />
ao clicar vai abrir um pop com a mensagem.
Clicando e Publish, estará publicado no Mural d Usuário no Facebook.
Vídeo de como publicar um Feed com Facebook Connect.
Mo próximo Post como crar uma página de comentários
** Atualização dia 10/03/2010
Enviado por: leandro garcia - Categoria(s): API, Connect, facebook
Tags relacionadas: api, facebook, facebook connect
25/11/2009 - 16:39
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.
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<script type="text/javascript">
FB.init("6f9a5e6aeeff75a6c5ef707dbc301e3f","xd_receiver.htm");
</script>
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>
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.
<fb:login-button></fb:login-button>
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)
<div id="user">
Name: <input name="name" size="27"><br />
Ou você pode se conectar com <fb:login-button lenght="long" onlogin="update_user_box();"></fb:login-button>
</div>
É 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 =
"<span>"
+ "<fb:profile-pic uid=loggedinuser facebook-logo=true></fb:profile-pic>"
+ "Bem-vindo, <fb:name uid=loggedinuser useyou=false></fb:name>. Voc&amp;amp;amp;ecirc; est&amp;amp;amp;aacute; conectado &amp;amp;amp;agrave; sua conta do facebook."
+ "</span>";
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?).
<!-- essa é a imagem -->
<fb:profile-pic uid=loggedinuser facebook-logo=true></fb:profile-pic>
<!-- essa é o nome -->
<fb:name uid=loggedinuser useyou=false></fb:name>
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
Enviado por: leandro garcia - Categoria(s): API, Connect, facebook
Tags relacionadas: facebookn connect
24/11/2009 - 18:24
O facebook connect é uma API do Facebook que permite que você desenvolva suas aplicações, tais como comentários de blogs, utilizando informações da conta do usuário do Facebook, ou , também, permite que você poste mensagens no mural do usuário do facebook.
Veja o exemplo abaixo da utilização do Facebook Connect. O site utilizado é o www.techcrunch.com
Neste ponto abaixo, o usuário permite a conexão do site/aplicação com a conta dele no facebook.
Neste ponto ele digita o usuário e senha dele no Facebook.
Após validação da conta no facebook, o fconnect traz alguma informações de volta.
Uma vez postado o comentário, o facebook connect traz um pop para a confirmação da inclusão da mensagem no mural do usuário dentro do facebook.
Depois de confirmada, a mensagem é postada no Mural do usuário dentro do Facebook,
Este foi um exemplo da utilização do Facebook Connect em um blog, no caso o http://www.techcrunch.com/
Legal, já vi em funcionamento, mas como eu faço isso?
Em princípio parece difícil mas na verdade é bem fácil. Vamos lá.
A primeira coisa que você precisa é de uma conta no facebook. Acesse www.facebook.com e crie sua conta.
Após a criação da conta, deve-se adicionar ao menos um amigo para validar a conta (parece mentira, mas apanhamos muito até descobrir isso)
Após criar a conta e ter uma amigo adiconado, podemos criar um app.
Primeiro passo, acesse www.facebook.com/developers.
Permita o acesso ao developers.
Clique em set up a new application (do lado direito superior).
Preencha o Nome do APP e concorde com os termos de responsabilidade.
A partir deste ponto você começa a preencher os dados do APP.
Aqui você escolhe as imagens do app. A imagem(icone) que será exibido em cada postagem no mural e a imagem do app. (não é necessário incluir para funcionar, mas a utilização deixa o App mais completo)
Vamos usar o 
Par o ícone (Meu Primeiro App)
Faça o mesmo processo para a imagem maior.
Não altere mais nada nesta tela.
Clique em Conectar.
Nesta tela preencha o campo “Conectar URL” com a URL de onde a página que utilizará o Fconnect vai acessar, exemplo, se o endereço da página for, por exemplo, “http://www.meuprimeiroappnofacebook.com/mpa.php?id=1″, no campo você deve preencher “http://www.meuprimeiroappnofacebook.com”, nada mais.
Clique em Salvar alterações.
Pronto, você configurou seu primeiro App.
A chave de API, será utilizada posteriormente na página.
Enviado por: leandro garcia - Categoria(s): API, Connect, facebook, midia social
Tags relacionadas: Connect, facebook, redes sociais