Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1490554592
Vida do cache: 1490813792
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Ferramentas Redes Sociais

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

criar aplicativos do facebook

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.

2

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.

3

4. Informe os dados para o seu aplicativo. Veja imagem abaixo:

4
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.

5

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:
1app

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 😉



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

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.

Sobre o autor | Website

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.

60 Comentários

  1. SERGIO VAGNER disse:

    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?

  2. william disse:

    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.

  3. Alexandrina disse:

    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

    • Luana Celine disse:

      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. 😉

  4. Donato disse:

    Não passo do passo 4, pois não aceita a url de jeito algum

  5. Alexandre disse:

    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 ?

    • Amanda disse:

      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. :)

  6. Ingrid disse:

    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?

  7. 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.

  8. Robson Farias disse:

    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

  9. 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!!!

  10. Muito, muito, muito obrigada pelo post!!!
    Deu tudo certo!!!!!!!!!!!!!!!!!!
    Finalmente consegui!!!
    rsrsrs
    obrigada mesmo!!!

  11. Adler disse:

    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;)

  12. Higor disse:

    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!

    • Vanessa disse:

      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.

  13. Lucas Pantoja disse:

    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.

  14. ZIDANEPASCOAL disse:

    olá estó a apreciar o seu blog a pouco tempo mais pelos vistos es uma mulher muito inteligent

  15. Gabriela disse:

    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!

  16. Elias disse:

    Ola tudo bom ?
    gostaria de saber se é possivel criar app id de uma fan page do face ?

  17. 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?

  18. Ajudou bastante muito obrigado :)

  19. 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

    • Vanessa disse:

      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.

  20. LSD disse:

    No meu template, não tem nem ou

    E agora como faço a modificação, desde já agradeço!

    • LSD disse:

      Me refiro a essas tags “<body
      Dependendo do modelo do seu template esta tag estará assim:
      ou

      Não existem no meu template

  21. Sarah Vivic disse:

    Adorei. Me ajudou pra caramba.
    Eu gostaria de pedir um tutorial sobre como personalizar a area dos comentários. Tem jeito ? Beijoos

  22. Vanessa disse:

    Atenção pessoal:Coloquei o código do 8º passo no Google Docs, peço que refaçam o passo.

  23. leny wata disse:

    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.

  24. natanael disse:

    eu não conssegui, quando chego no passo 8 da erro ao analisa o codigo?? por favor me ajude??

  25. Francieli disse:

    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?

  26. Samantha disse:

    …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?

    • Vanessa disse:

      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.

      • Samantha disse:

        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!!!

        • Vanessa disse:

          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.

  27. Felipe Dutra disse:

    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

  28. Vanessa disse:

    Nerdilhados:
    Vc tem que colar o código parseado após o fechamento da tag

  29. Guilherme M disse:

    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? =/

    • Vanessa disse:

      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.

      • João disse:

        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?

        • Vanessa disse:

          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.

      • João disse:

        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.

        • Nerdsilhados disse:

          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?

  30. Muito bem explicado, parabéns!

  31. schreiyarai ? disse:

    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!

  32. Carlos Gomes disse:

    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.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.