Como adicionar a Like Box do facebook ao seu site – Web Acappella

Como adicionar a Like Box do facebook ao seu site - Web Acappella

Olá pessoal,

Muitos usuários tem questionado sobre como inserir a likebox do facebook em seu site desenvolvido no Web Acappella, pensando nisto resolvemos criar este tutorial para lhe auxiliar.

Vamos lá!

Em primeira vista parece ser uma tarefa um pouco difícil, mas é bem simples basta seguir os seguintes passos:

O facebook oferece uma área destinada a desenvolvedores onde existem diversas soluções para a integração do facebook ao seu site, neste post vamos vamos falar sobre a likebox então acesse: http://developers.facebook.com/docs/reference/plugins/like-box/

Você será direcionado(a) a seguinte página:  

1- Para que o plugin possa fazer a leitura dos usuários que já curtiram a sua página (ou dos que ainda vão curtir) é necessário que você preencha corretamente o campo Facebook Page URL neste campo você deve inserir a URL da sua página no facebook como no exemplo:

2 – Agora vamos definir o tamanho do plugin, em Width insira a largura desejada (em pixels) e se desejar em Height a altura ( também em pixels) no entanto é opcional. Em Color Schemedefina a cor da sua likebox em light ou dark.

3 – Este plugin possui duas funções uma é mostrar os usuários que curtiram a sua página  e a segunda é exibir as postagens da sua página no facebook (definida no passo 1), neste caso você pode optar por exibi-los ou não.

Show Faces – Exibe as fotos dos perfis os usuários que já curtiram a sua página

Stream – Exibe as postagens da sua página no facebook

E ainda escolhe se o seu plugin vai exibir o cabeçalho:

Caso queira exibir o mesmo deixe a opção Show header marcada caso contrário desmarque-a.

4 – Agora vamos gerar o código que será incorporado ao seu site desenvolvido no Web Acappella, clique em Get Code, você será direcionado a seguinte janela:

Nela vão constar dois quadros e quatro opção de integração, vamos utilizar a HTML5, copie o código gerado no quadro 1.

5 – Agora vamos inserir este código na seção HEAD do seu site. No seu Web Acappella no menu superior vá em Site > Propriedades do Web Site (ou através do atalho Ctrl + Shift + P). Agora clique no 4° ícone representado por uma engrenagem (Avançado).

6 – Cole o código que você copiou no quadro 1. na (4° passo)  e clique em Ok.

 

7 – Agora volte ao facebook e copie o código gerado na segunda caixa.

 

8 – Feito isso vá até o seu Web Acappella clique em Código HTML e posicione onde você gostaria que a sua likebox fosse exibida no seu site. Dê um clique sobre o elemento e em Propriedades do Código HTML insira o código copiado no 7° passo.

 

9 – Agora feche a janela de Propriedades do Código HTML e pronto, é só publicar o seu site normalmente!   Caso tenha dificuldades e/ou ainda não saiba como  configurar os parâmetros de publicação do seu Web Acappella clique aqui e confira um tutorial completo.

 

Extras.

O facebook oferece uma área destinada a desenvolvedores onde existem diversas soluções para a integração do facebook ao seu site, como botão curtir, botão enviar, comentários, dentre outros. Para ter acesso completo a esta área acesse: http://developers.facebook.com/docs/plugins/

Aproveitando curta a nossa página no facebook!

Gostou? Comente e compartilhe!


Comments

  1. show….muito legal. Mais uma vez obrigado por dividir conosco conhecimentos.

  2. sera que não da certo em site gratuito,no meu não deu certo,
    se tiver como me ajudar ficarei grato

    • Olá Leandro,

      Não existe esta restrição. Onde você instalou o plugin aponta alguma mensagem de erro?

      • Caro77!Host, infelizmente meu site ainda não apareceu onde o Like Box do facebook, sera que eu estou usando uma versão do Webacappella antiga?, porque faz algun tempo que eu não o atualizo.

        • Olá Leandro,

          Desde que você faça todos os passos corretamente a versão do programa é indiferente.

          • Se eu te contar 77!Host, eu quase me descabelei aqui agora kkkk, eu não tinha prestado atenção direito onde era pra colocar os cadigos, e eu etava colocanso na propriedade da pagina e não na propriedade do Web Site, vai me descupando a minha pequena burrice, agora esta atualizando e vamo ver no que vai dar, ..

            grato..

          • Sem problemas Leandro, ficamos felizes que tenha funcionado.
            Depois poste como ficou aqui 🙂

            Abraços!

          • Meu caro amigo77!Host, com certeza deu tudo certo no meu site, mais não consegui colocar meu Facebook no meu site, consegui com o do Facebook Developers, me ajuda ai por favor se tiver jeito,,,

            Obrigado…

          • Olá,

            Provavelmente é o seu usuário que não está correto, copie somente o que está após a ”/” na sua página do facebook no momento da configuração no developers.

          • Caro 77!Host. acho que estou começando a torrar sua paciência, mais vamos tentar mais uma vez, meu perfil do fb, é esse https://www.facebook.com/leandro.campos.5059

            e o meu site é esse http://www.vilhenaclassificado.hd1.com.br
            repare ai no site que funcionou legal com Facebook Developers, sera que devo alterar alguma coisa no fb para funcionar, se puder tente colocar meu fb e ve se funciona na criação do Lick box por favor, se não vou desistir ,,,,

            obrigado..

          • Já consegui meu Caro 77!Host, olhando seu comentario em resposta ao Ettore, vi que eu tinha criar uma pagina no fb agora funcionou bacana, muito obrigado por ter paciência comigo e aproveita e parabenizar por nos ajudar a sempre melhorar nosso conhecimentos com websites…

            grande abraços;;;…

          • Olá Lenandro,

            Ficamos felizes em ajudar, boa sorte no seu projeto!

  3. afff fiz todo direitinho do jeito que esta aki mais não funcionou sera que precisa habilitar algo no fb ? obrigado

  4. ha mais um detalho ele funcionou mais com URL http://www.facebook.com/plataform

  5. Valeeeu… adorei sua explicação…. Consegui… arigatoo

  6. òtima dica, funciona certinho.

  7. no meu webacapella gratis não me dar opção de colocar o codigo para o like box… ele esta inativo qual o motivo?

  8. Amigão 77! Host, gostaria de saber se a forma de publicar filmes no web acapella, como no blogger

  9. Olá amigo… primeiramente gostaria de te parabenizar pela boa vontade, e segundo tirar uma dúvida contigo.
    Como faço pra escolher a miniatura da foto que vai aparecer no compartilhamento do FB?

    Desde já muito agradecido!!!

    • Marcelo,

      No momento do compartilhamento o facebook oferece algumas opções de pré-viasualização, em todo caso também é possível selecionar uma imagem diretamente do seu computador.

  10. ola 77!host fiz tudo certinho tal so que tem um problema caso vc clica em visualizar outros comentários ele empurra tudo pra baixo atravessando o rodapé… como eu faço para visualizar outros comentários ele empurra-se o roda pé junto?

    • Guilherme,

      Neste caso você pode definir a altura (height) nas configurações da sua like box, deste modo ao exceder o espaço estipulado a barra de rolagem é apresentada.

  11. Olá amigo!
    Não funcionou , fiz hoje 25/03/15 por 5x e após publicar não aparece o like buttom.
    Será Webacapella bloqueou ?

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *