O Facebook mudou novamente a apresentação da caixa de obter o código para a Like box, mostrando em uma única janela, as opções de código em HTML5, XFBML e IFRAME, no menu horizontal. Veja neste post, mais detalhes sobre esses códigos e suas implementações no seu site. Saiba mais…
Uma ‘Like box’ é uma caixa com perfis de usuários da rede social Facebook, que se atualiza constantemente ao ser implementada em um site ou blog, através de uma URL exclusiva, fornecida pela Página de fãs do Facebook (Fan Page).
3 opções códigos para a Like box
A seguir, os três exemplos de códigos disponibilizados pelo Facebook para a Like box (caixa de fãs), sendo que, o mais usado é o terceiro exemplo, o IFRAME.
Likebox com HTML 5
A primeira opção é para o código na linguagem HTML 5, que é a evolução do HTML 4.1, que traz dois ‘snippets’ para ser introduzidos no blog, um vai após a abertura da tag “body”, e o outro trecho vai no local onde você deseja que apareça sua Like box no blog. Veja a ilustração logo acima.
Código HTML5
- O primeiro trecho do código da likebox na opção HTML5, utiliza a SDK JavaScript, que é um rico conjunto de funcionalidades do lado do cliente, usada para acessar a API do lado do servidordo Facebook. Isso vai após a tag body… ou seja, o corpo de um documento HTML é estruturado basicamente assim:
<html>
<head></head>
<body>… aqui vai o primeiro trecho … </body>
</html> - O segundo trecho de código do modelo em HTML 5, vai no local do HTML do site, onde você deseja que apareça a caixa de fãs. Exemplo: <div id=”sidebar”>… aqui vai o segundo trecho…</div> Este exemplo, é típico do uso da Like box no WordPress. No entanto, muitos a inserem utilizando o gerenciador de widgets da própria plataforma WordPress. Acompanhe na figura acima. Consome mais tempo, por requisitar DNSs e recursos do lado do servidor, etc.
Likebox com XFBML
A linguagem XFBML é a linguagem HTML modificada, ou adaptada, pelo Facebook, que funciona com suporte a XML.
Código XBML
- Essa opção de código da Like box também trabalha como no exemplo HTML 5, fazendo uso do framework SDK Javascript. Consome mais tempo, por requisitar DNSs e recursos do lado do servidor, processamento do browser, etc. Observe a figura ilustrativa.
- O trecho de código do ‘NameSpace XML’ deve ser acrescentado junto a tag HTML. Isso permite que versões de navegadores Internet Explorer mais antigos reconhecem a Like Box;
- Aqui, é o trecho do XFBML que você irá colocar no local exato do seu HTML do blog onde quer que apareça a caixa de fãs.
Likebox com IFRAME
Este modelo é o mais utilizado por blogueiros e webmasters, que implementam plugins de Like boxes em seus sites e blogs.
- Por fim, e a mais utilizada, a opção de IFRAME que é um recurso do próprio HTML. O carregamento é mais rápido e é interpretado pelo navegador. É gerado apenas um trecho de código, e ele é inserido diretamente no local onde deseja que apareça a Like box. No caso do WordPress você utiliza a forma mais simples, que é adicionando uma caixa de texto como widget, e cola o snnipet de código e salva. Eu utilizo essa opção aqui no NuvemSEO. Note na figura acima, o comando “SRC” chama o arquivo likebox.php e seus parâmetros.
8 Comentários recebido(s)
março 26th, 2012 @16:23
Obrigadão, valeu muito. Pesquisei em muitos blogs e sites mas nunca encontrei esse novo plugin do facebook
março 27th, 2012 @17:00
Olá, Rafael Paranhos, obrigado pelo comentário!
abril 14th, 2012 @17:35
No meu blog eu utilizei o iframe porque HTML 5 o Blogger não está aceitando o código da um erro referente ao appID que eu não consigo entender. Com o iframe funciona corretamente só no Google Chrome e no Opera, porém, no IE, no Firefox e no Safari não aparece a foto das pessoas que curtiram a nossa página, fica um campo vazio.
Se tiver alguma idéia do que pode ser eu agradeço.
abril 16th, 2012 @16:48
Olá, Robson, veja a dica do usuário “MinhaCozinha” entre outras, o modelo em HTML5 leva dois códigos, o FBML leva 3 códigos e o iFrame leva 1 código apenas. O modelo em HTML5 ainda é suportado somente em browsers mais novos, e o iFrame é mais fácil de implementar devido sua única inclusão de código. Os outros modelos devem ser seguidos à risca, quanto ao local de cada trecho de código, senão não dá certo. Quanto ao Blogger, no meu utilizei foi iFrame e tá normal. Obrigado pelo comentário!
abril 24th, 2012 @15:22
Boa tarde amigo, estou criando meu novo site em HTML5, e estou com problemas para colocar a Like Box nele…
Tentei usar o modelo iFrame, mas ele da erro de validação.
Resolvi inserir o modelo de HTML5 mesmo, e no Firefox foi beleza… mas no Chrome, IE, Safari e Opera ela simplesmente não aparece… sabe como posso resolver isso? D:
Desde já agradeço!
abril 25th, 2012 @10:01
Olá, Henrique, bom, esses dias muitos usuários reclamaram desse não aparecimento da likebox ao implementá-la, mas creio voltará ao normal. Tenta repetir o processo, se já não o fez, gerando o código novamente, inserindo e testando, pois tem que funcionar com tanto com uma linguagem com com a outra. O Chrome tá preparado para HTML5, o problema não é com ele. Agora versões mais antigas do IE e outros browsers, não entenderão a 5. Se não resolveu ainda, deixe outro comentário, obrigado!
abril 25th, 2012 @14:16
Olá, escolhi o código em HTML5 seguindo a risca sua implementação, porém as vezes renderiza e as vezes não.
Tem ideia do por que disso?
Obrigado.
abril 25th, 2012 @16:43
Olá, Diego, confere as Divs se estão corretamente fechadas, por perto do trecho do código da likebox do Facebook! Em qual navegador está testando? Tente deixar mesmo com problema para que depois de vencidos os cookies, ou dando um prazo bom para atualizar melhor, visualisar novamente para ver se continua dando problemas! Obrigado!
Participe comentando!