Ferramentas Redes Sociais Vanessa S.
Criar aplicativos do Facebook para usar no blog
Criar aplicativos do facebook. Em outro artigo, eu listei uma série de widgets plugins Sociais do facebook.
Para usar os Plugins sociais é necessário que você já possua uma página do seu blog no facebook.
Caso não tenha, siga o tutorial e veja como Criar uma página no facebook.
E para que alguns plugins funcionem corretamente, é necessário a criação de uma ID App/Chave API.
Neste tutorial veremos como criar uma APP Key para os plugins sociais do facebook,utilizados pelo seu blog.
Esta API Key é um código único e exclusivo, que será usado especificamente para gerenciar todos os plugins sociais do facebook que você instalou no seu blog, no blogger.
Criar aplicativos do Facebook
1. Acesse o seu perfil do facebook, o mesmo que você utiliza para administrar a sua página.
2. Acesse o link https://developers.facebook.com/apps
Importante saber que, antes de criar um aplicativo do facebook você precisa verificar sua conta no facebook.
Para isso você deverá cadastrar um numero do seu telefone celular, e confirmar o número cadastrado através de sms.
O facebook irá enviar um SMS para o seu número com um código de verificação. Informe esse código de verificação na próximo passo. Feito isso, você já pode avançar na criação do seu aplicativo.
3. Criando o aplicativo:
Coloque o nome do aplicativo e clique em continuar. Na próxima janela digite o código de verificação (captcha) para prosseguir.
4. Informe os dados para o seu aplicativo. Veja imagem abaixo:
Após o término do preenchimento, clique em “Salvar alterações”
5. Copie o número da App ID e da App Secret e cole em um bloco de notas. Salve-o e guarde-o, pois iremos precisar dele logo adiante.
Configurar o código do aplicativo no html do blogger
6. Acesse o painel do blogger, clique no menu “modelo” e entre em “editar html”.
No início do html do seu template, localize o seguinte trecho do código HTML:
http://www.google.com/2005/gml/expr'SUBTITUA por:
http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'
7. Agora localize a tag <head> e cole ANTES dela, os seguintes códigos:
<meta content='NOME-DE-USUÁRIO-DO-SEU-FACEBOOK' property='fb:admins'/>
<meta content='ID-DO-APP/CHAVE-API' property='fb:app_id'/>
Altere os campos destacados:
– NOME-DE-USUÁRIO-DO-SEU-FACEBOOK: coloque o seu nome de usuário do perfil, não é a url ou nome da sua página e sim, o username do seu perfil.
Caso ainda não tenha, crie um: https://www.facebook.com/username
– ID-DO-APP/CHAVE-API: coloque a ID do aplicativo que você copiou e guardou no bloco de notas (conforme passo 5).
Incluir o SDK JavaScript do facebook no blogger
8. Volte no menu “modelo”, clique no botão “editar html” e procure pela tag <body
Dependendo do modelo do seu template esta tag estará assim: <body>
ou
<body expr:class=’"loading" + data:blog.mobileClass’>
Você deverá colar o código SDK javascript, logo APÓS o fechamento da tag.
Veja imagem:
Clique no link abaixo para copiar o código SDK javascript que você deverá colar:
? Pegar código SDK javascript
Mais uma vez, você deverá sustituir ID-DO-APP/CHAVE-API pela numeração da ID do seu aplicativo que você salvou no bloco de notas (conforme passo 5)
Informações importantes:
Uma vez incluido o SDK javascript no seu template, todo e qualquer plugin social do facebook que você usar será carregado de maneira correta.
Se você quiser instalar o plugin de comentário do facebook no seu blog, leia este tutorial ? Como instalar sistema de comentários do Facebook no Blogger e siga todos os passos.
Bom, é isso ai!
Até a próxima 😉
Vanessa S.
Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.
AMIGOS, a minha situacao eh curiosa pra mim, pois talvez nao domine esse caso de gerenciamento de comentarios. Eh o seguinte: tenho um site e nele coloquei um espaco para comentarios usando o social facebook, a linha eh apenas essa: “” nada mais. E agora eu nao consigo gerenciar as mensagens postadas. Descobri que o link dos comentarios eh https://www.facebook.com/plugins/comments.php?api_key=122852761200059. De qualquer forma continuo sem saber onde ir para gerenciar os cometarios. Alguem pode me ajudar?
https://developers.facebook.com/tools/comments
pra que em está com erro:
This must be derived from URL, Secure Canvas URL, Site URL, Mobile Site URL, Page Tab URL ou Secure Page Tab URL. Check and correct the following
fazer o seguinte:
Facebook changed their user interface for developer apps, so this can be tricky to find. For future people visiting:
1 Click Apps and then select your app.
2 Click the Settings button on the left side of the screen.
3 In the Basic settings, click the Add Platform button below the settings configuration.
4 Select Website in the platform dialog.
5 Enter your URL (localhost works here).
6 In the App Domains text input, add your domain that matches the one in the URL.
Save your settings.
Tirem o / do link no passo 4:
Ex: http://www.blogger.com/ (errado)
http://www.blogger.com (correto)
Cara, você me salvou! Obrigada!
Não aceita a URL do blog que jeito nenhum: This must be derived from URL, Secure Canvas URL, Unity Binary URL, Site URL, Mobile Site URL, Page Tab URL ou Secure Page Tab URL. Check and correct the following domains: adororomancesfortaleza.blogspot.com
Oi! O meu também tava com esse problema. Você deve colocar assim por exemplo: adororomancesfortaleza.blogspot.com
Sem o http:// no começo do link e sem a barra( / ) no final. 😉
Não passo do passo 4, pois não aceita a url de jeito algum
Verifique se vc está colocando de forma correta. Releia o passo e veja as informações pra ver se vc não está fazendo nada de errado.
Vanessa preciso fazer uma enquete em que o internauta vote somente uma vez,mesmo no modo anonimo.Você pode me ajudar ou indicar alguém. Meu e-mail marcioarayos@yahoo.com
Estou com o problema tambem de inserir no APP DOMAINS meu blog
da o seguinte erro :
This must be derived from URL, Secure Canvas URL, Site URL, Mobile Site URL, Page Tab URL ou Secure Page Tab URL. Check and correct the following
tentei tirar o “http:” e sem o “br” no final e outras formas e nao consigo de jeito algum. que estou fazendo de errado ?
Por acaso a conta do facebook tem que ser a mesma do blog ?
Oi, Alexandre. Eu tive o mesmo problema, passei o dia sem conseguir resolver isso, e hoje finalmente consegui, precisa tirar “http://” e também a barra do final. Depois que fiz isso, consegui conclui essa etapa, mas ainda estou com problemas para finalizar as últimas. Espero que tenha ajudado. 🙂
Vanessa, sempre usei esse código e ele é perfeito. Atualmente, instalei outro template e ele não tem nenhum código do passo 8. O “”
Ele é da plataforma blogger mesmo. Se você puder ajudar eu agradeço muito!!
Baixei ele aqui enjoythelittllethings.blogspot.com.br/2013/07/layout-5-blemish
Não tem outro lugar que eu possa inserir o código ou até mesmo colocar ele no html?
Eai Pessoal , Eu descobri o que estava acontecendo com a maioria dos usuários então vamos lá vou matar a duvida de vocês.
Primeiramente vocês tem que achar a http://www.google.com/2005/gml/expr‘ e substitua por http://www.google.com/2005/gml/expr‘ xmlns:fb=’http://www.facebook.com/2008/fbml’ , então aqui está o detalhe , a vanessa esqueceu de acrescentar a Tag > no final da frase acima.
Então esse Codigo aqui é o certo:
http://www.google.com/2005/gml/expr‘ xmlns:fb=’http://www.facebook.com/2008/fbml’>
Mais um Detalhe cuidado para Não deixar Junto essa parte aqui onde diz expr’ xmlns:fb ,
vou dar um Exemplo:
expr’AQUI VOCÊ DEIXA UM ESPAÇO xmlns:fb
Agora vou falar de outro erro que Muitos estavam do codigo:
Agora vou falar sobre o Codigo ID do aplicativo SDK javascript:
Esse Codigo: deve ser colado apos a Tag <head
<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=AQUI É O ID DO APLICATIVO";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Nota: Cuidem as Tags sempre e respeitem as Regras e espaços das Tags que vocês não terão erros.
Funcionou perfeitamente, valeu: Lucas Montteiro e Vanessa S.
Funcionou perfeitamente, valeu: Lucas Montteiro e Vanessa S. A do lucas funciona com , já odo exemplo funcionou com (sem necessidade de fazer nada).
Estou com o seguinte problema, quando digito o link do meu blog no app domains ele ele não aceita dizendo o seguinte: This must be derived from URL, Secure Canvas URL, Site URL, Mobile Site URL, Page Tab URL ou Secure Page Tab URL
no topo do meu blog esta aparecendo isso “http://www.google.com/2005/gml/expr’ xmlns:fb=’http://www.facebook.com/2008/fbml'”
Como faço para isso não parecer tá difícil de tirar ele de lá me ajuda!!!
Muito, muito, muito obrigada pelo post!!!
Deu tudo certo!!!!!!!!!!!!!!!!!!
Finalmente consegui!!!
rsrsrs
obrigada mesmo!!!
Ótimo post.
Mesmo problema do João e do Guilherme:
“The reference to entity “appId” must end with the ‘;’ delimiter.”
Mesmo com o código convertido, mesmo logo abaixo da </body
Em qualquer lugar que eu coloque esse código dá esse erro.
Estava pensando, tem como parsear o algarismo "&" pois talvez o programa esteja lendo ele como se fosse o início de um parseamento (e.x. &appId;)
Fiz todos os passos, não deu erro na hora de salvar o modelo, tudo certinho.. mas não apareceu nada no blog, continua ainda com o sistema de comentários do blogspot!
Para que os comentários do facebook apareçam, é necessário que vc instale o plugin de comentários do facebook no seu blog. O link para o tutorial está ao final deste artigo.
Oi vanessa fiz tudo certo mais não apareceu nada, não sei porque mais já refiz várias vezes e não aparecer nenhum comentário do facebook o que será que está acontecendo?
Obs: fiz tudo correto todas as vezes e persistiu no mesmo.
Isso também está acontecendo comigo :/
olá estó a apreciar o seu blog a pouco tempo mais pelos vistos es uma mulher muito inteligent
Quando você diz pra substituir “ID-DO-APP/CHAVE-API” pela numeração da ID do aplicativo, isso quer dizer pra eu colocar os códigos da App ID e da App Secret nesse formato: “App ID/App Secret” OU pra eu simplesmente substituir “ID-DO-APP/CHAVE-API” pela App ID?!
Fiquei meio confusa nessa parte porque em outros tutoriais a App Secret não é usada. Mas como eu confio mais no Mundo Blogger, queria tirar essa dúvida!
Obrigada!
É a App ID.
Ola tudo bom ?
gostaria de saber se é possivel criar app id de uma fan page do face ?
Eu acho que não.
Oi, boa postagem essa de como criar um aplicativo para o Facebook. Fiz tudo e deu certo muito obrigado, mas eu queria colocar o Feed Dialog no meu blog para enviar status na linha do tempo do meu Facebook e não consegui, aqui neste endereço está o script https://developers.facebook.com/docs/reference/dialogs/feed/ como faço para instalar no meu blog?
Ajudou bastante muito obrigado 🙂
gostaria de saber se devo colocar na parte do username o link junto com o username ou apenas o username..
por ex. no face meu usarname é mazzui (facebook.com/mazzui) .. então eu devo colocar no codigo o “mazzui” sem link ? ou devo colocar o username da page
coloque o seu nome de usuário do perfil, não é a url ou nome da sua página e sim, o username do seu perfil.
No meu template, não tem nem ou
E agora como faço a modificação, desde já agradeço!
Me refiro a essas tags “<body
Dependendo do modelo do seu template esta tag estará assim:
ou
”
Não existem no meu template
Não tem body no seu template? Vc não usa plataforma blogger?
Adorei. Me ajudou pra caramba.
Eu gostaria de pedir um tutorial sobre como personalizar a area dos comentários. Tem jeito ? Beijoos
Atenção pessoal:Coloquei o código do 8º passo no Google Docs, peço que refaçam o passo.
Não tem uma dica mais fácil não? não consegui entender nada.
tenho uma página de meu blog no Facebook, achei a dica muito
complicada,sucesso beijo.
eu não conssegui, quando chego no passo 8 da erro ao analisa o codigo?? por favor me ajude??
Oi, eu estou com o msm problema do Joao e do Guilherme. Ja tentei converter o codigo e não deu certo. tem alguma outra solução?
…estou com o mesmo problema do Guilherme e do João, mas mesmo com todos os passos, ainda assim não funciona.. alguém tem uma sugestão?
Eu já havia informado a eles nos comentários que o código javascript tem que ser “parseado” antes de inclui-lo no html do template. Igual temos que fazer com o código do adsense. Vc tem que parsear o código, senão dará erro mesmo.
Aqui tem uma ferramenta para vc parsear/converter o script:
Ferramenta para converter código do adsense.
Então, Vanessa.. comigo não funcionou nem parseando o código… a unica forma que deu certo pra mim foi ter ido diretamente ao Facebook copiar o código SDK direto de lá. Digitei no Google “facebook fdk javascript” e achei lá um código que dizia ser isso, colei no lugar do passo 8, e funcionou ok! Ele é um pouco maior que o daqui, tecnicamente não sei a diferença.. mas funcionou então tá valendo. O restante do tutorial é maravilhoso e atendeu perfeitamente. Muito obrigada pela sua boa vontade em ajudar-nos. Já me aproveitando da sua boa vontade, gostaria de te perguntar se tem tutorial (ou mesmo se existe jeito) de deixar a caixa de comentários do face aberta na capa do blog? Pois eu só consegui deixar ela aparecendo quando clico no titulo do post e abro a pagina especifica da postagem, não achei forma ou tutorial de colocar na capa, logo abaixo de cada post. Será que existe ou já posso desistir de achar? Obrigada mais uma vez!!!
Samantha, pelos testes que andei fazendo, o código fornecido pelo facebook fazia com que os comentários se repetissem em todos os posts, ou seja, o leitor comentava em 1 post e o seu comentário aparecia em todos os outros post. E esse código que eu disponibilizei aqui, faz com que os comentários não se dupliquem. A única coisa que eu não estou conseguindo entender é o porque algumas pessoas não estão conseguindo usar este código do passo 8. Eu usei e uso ele no blog Universo Sombrio e funcionou normal e não deu erro nenhum.
Inclusive ontem testei novamente e não deu erro. Inclui o código no google docs já parseado, pronto para copiar e alterar somente a parte destacada em vermelho.
Infelizmente aqui não deu certo, pois nao aparece as mesmas janelas que aparece no seu tutorial, tb nao teem aonde colocar o nome do aplicativo aonde vai o nome do blog… é totalmente diferente depois da terceira etapa
Nerdilhados:
Vc tem que colar o código parseado após o fechamento da tag
Então, fiz todas as etapas e foi tudo bem, mas ultima não deu certo. Fiz o teste para ver se tinha dado certo e apareceu essa menssagem: “Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente. Mensagem de erro em XML: The reference to entity “appId” must end with the ‘;’ delimiter.
Error 500″ Se é em relação a ‘;’ eu não retirei, eu apenas coloquei minha ID do app. Sabe como posso resolver isso? =/
Oi Guilherme, é que o código javascript tem que ser “parseado” antes de inclui-lo no html do template. Igual temos que fazer com o código do adsense. Aqui tem uma ferramenta para vc parsear/converter o script:
Ferramenta para converter código do adsense.
Olá Vanessa, comecei a montar meu blog, e estou tentando adicionar esse aplicativo do facebook.
Utilizer a ferramenta apara converter o código, porém o erro continua.
Pode me ajudar?
Guilherme e João:
Eu andei refazendo os passos para verificar se havia algo errado no código para dar esse erro. Então verifiquei que é melhor colar o código SDK javascript logo depois do fechamento da tag <body
Releiam o passo 8 do tutorial e refaçam conforme minha explicação, que agora dará certo.
Obrigado Vanessa.
Eu achei essa dica de por depois da tag em outro site e estava vindo compartilhar, aí vi sua resposta.
Desse jeito funciona sim, mas tem q ser parseado, se não, não vai.
Tentei o passo 8 do tutorial depois da tag <body deu errado.
Lendo os comentario vi que o Guilherme e o João tava tendo o mesmo erro, ai você os corrigiu falando que deve ser convertidos/parseados, porem deu o mesmo erro. Vi que voce pediu para jogar o script depois da tag </body também deu errado aqui!
Queria ver se tem alguma soluçao?
Muito bem explicado, parabéns!
Artigo sensacional! 😀
Não tenho a menor ideia do que eu posso fazer para usá-lo nos meus blogs, mas eu adorei. Hahahaha
Comentando só mesmo para, como sempre, agradecer o conteúdo de ótima qualidade.
Valeu, Nessa!
Desculpa comentar algo não relacionado ao post, mas, você poderia me dizer qual esse efeito que estão utilizando como visualizador de imagens? tem algum tutorial no Mundo Blogger sobre ele? eu estive procurando por algumas horas e não encontrei…
Obrigado.
Este visualizador que uso aqui no MB é um plugin do wordpress. Mas eu já públiquei um artigo ensinando a instalar um visualizador bem parecido, o Shadowbox. Se quiser veja o artigo: Efeito ShadowBox em Videos e Imagens
Puts, imaginei que fosse do WP mesmo. ;/