Para ter um blog de sucesso além de produzir uma boa quantidade de conteúdo de qualidade é importante ter uma identidade visual, que de preferência seja visualmente atrativa, isso ajuda a fixar sua marca na mente dos leitores.

Entre inúmeros elementos que podem ser customizados temos o like Box do Facebook, inclusive este posto está sendo feito por sugestão de Jackson Soares que bloga no Desenvolvendo Web.

É realmente um elemento interessante para ser customizado por inúmeros fatores, mas vou listar alguns dos benefícios de fazer alterações em sua Like Box:

• Diferenciar seu blog, afinal poucos blogueiros sabem como fazer esta alteração (que na verdade é simples)
• Integrar melhor o widget a seu template, afinal não é em todos os templates que fica bom com as opções padrão.
• Chamar mais a atenção de seus leitores, pois com a possibilidade de fazer alterações no visual do Like Box poderá o tornar mais atrativo.
• Poder optar quais e como os elementos irão ser mostrados com uma quantidade muito maior do que a oferecida diretamente no Facebook.

Implementando o Widget do Facebook

O primeiro passo deverá ser implementar o widget em seu blog, se está em busca de como customizar seu Like Box possivelmente já possui um e não há necessidade de implementar o Javascript, poderá ir direto ao código do Like Box, que poderá utilizar este:

<fb:fan profile_id=”191249697558429″ stream=”0″ connections=”8″ logobar=”0″ width=”300″ height=”200″ css=”http://www.seublog.com/wp-content/themes/seutheme/css/fb.css?1“></fb:fan>

Terá que fazer algumas alterações no código para que ele funcione perfeitamente, sendo:

• Profile_id= ”coloque o número de id de sua página no facebook” (caso não saiba poderá pegar no código de sua antiga Like Box)
• Stream= ”número de últimas publicações a exibir, para nenhuma “0”.
• Connections=”número de avatares a exibir”
• Width e height= resectivamente são a largura e altura do Like Box.

Uma primeira alteração poderá notar em “css=http://www.seublog.com/wp-content/themes/seutheme/css/fb.css?1″, que é um comando chamando sua própria folha de estilos CSS, é nela que estarão todas as alterações a serem feitas.

Caso esteja utilizando um blog WordPress e pretenda implementar seu Like Box diretamente no Template poderá utilizar php para isso, então a linha para CSS ficará assim:

css="<?php bloginfo('url_do_seu_css'); ?>?1"

Algo importante de observar no link para o css neste caso é que sempre há um “?1”, isto é para indicar o nível do cachê e a cada alteração que for feita no css o número deve ser alterado, assim sabendo sobre a alteração que foi feita.

Trabalhando com CSS no widget do Facebook

Assim que criar uma folha de estilos CSS para seu Like Box as alterações presentes na folha já serão aplicadas, basta que ela esteja exatamente no url indicado no código do Like Box

Deste ponto em diante cabe a você editar o CSS para deixar seu Like Box exatamente como desejar, para facilitar este trabalho já deixo aqui um exemplo de CSS que poderá utilizar em seu blog, neste exemplo está tudo muito simples, mas basta trabalhar um pouco o CSS e certamente terá um ótimo resultado! Para fazer o download do CSS basta clicar com o botão direto do mouse no botão “FB-Sample.css logo a seguir e escolher “salvar link como”.

 FB-Sample.css

Assine o Feed do Dinheiro Web por e-mail e Receba as Novidades Gratuitamente em seu e-mail!

Vinicius Horta

Blogueiro e Web Designer com Formação nas ferramentas Adobe- SENAC – SP e curso de Comunicação e Comunicação Institucional - FGV. Adoro esta vida de blogs e internet. Escrevo sobre desenvolvimento e monetização de Blogs, Sites, Programas de Afiliados e Carreira Freelancer.

Vinicius Horta já escreveu 393 posts.