Exemplo de Estilo Padrão do Like Box

É muito comum atualmente ver em sites (blogs e outros), um widget do Facebook (conhecido por Facebook Like Box ou “caixa de fãs”) que permite aos visitantes “Curtir” páginas sem terem de ir à página respectiva no Facebook.

A primeira coisa para adicionar essa caixa em seu blog é ter uma Página no Facebook com endereço personalizado, de preferência. Não funciona com endereço de perfil pessoal.

O procedimento para criar e configurar o “Like Box Padrão“, gerando o código para colocar no seu blog, pode ser feito diretamente na página de Desenvolvedores do Facebook.

Ao colocar o Like Box pela primeira vez em minhas páginas, senti a necessidade de personalizá-lo e dar um toque mais profissional à caixa. O visual padrão oferece apenas duas cores (Light e Dark), possui uma borda desnecessária para alguns layouts, usa a imagem da página e deixa links de outros plugins na parte inferior.

No tutorial abaixo vou explicar os detalhes para conseguir personalizar este widget.

1º Passo – Localizando o ID de sua página
A primeira coisa que você precisa é o ID de sua página do Facebook. Você pode encontrar isso verificando o URL da maioria dos links em sua página. Caso você tenha atribuído uma URL personalizada, o verdadeiro ID aparece quando você edita as configurações da página.

2º Passo – Criando Aplicativo + Chave API
Faça login na Área de Desenvolvedores e clique em “Create New App”, defina o nome do aplicativo e escolha a linguagem usada no site. Após criar o aplicativo você pode salvar e conferir o resumo das configurações. Nesta tela encontraremos as chaves App ID/API Key e App Secret.

3º Passo – Somando ID + API ao JavaScript SDK
Utilize o código abaixo em sua página do site/blog fazendo as alterações nas linhas que exigem ID e API que você criou anteriormente para seu widget.

<div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("SEU-CODIGO-API");</script>
<fb:fan profile_id="ID-DA-SUA-PAGINA" connections="10" stream="0" logobar="0" width="403" height="360" ></fb:fan>

Neste código acima você pode personalizar a largura/altura e o número de conexões (fotinhas) que irão ser exibidas. Lembre-se de copiar e colar este código no local que você quer que o widget apareça. Nesta etapa seu Like Box já pode ser visualizado com estilo padrão, como foi indicado no começo desta postagem.

4º Passo – Incorporando CSS Personalizado
Crie uma folha de estilos CSS para seu Facebook Like Box e cole o código abaixo:

.fan_box a:hover{
text-decoration: none;
}
.fan_box .full_widget{
height: 200px;
border: 0 !important;
background: none !important;
position: relative;
}
.fan_box .connect_top{
background: none !important;
padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
display: none;
}
.fan_box .connect_action{
padding: 0 !important;
}
.fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}
span.total{
color: #FF6600;
font-weight: bold;
}
.fan_box .connections .connections_grid {
padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #666 !important;
padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0;
right: 10px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}

Envie o arquivo para seu site e adicione seu endereço completo ao javascript na última linha <fb>, logo após height. Exemplo:

<fb:fan profile_id="ID-DA-SUA-PAGINA" connections="10" stream="0" logobar="0" width="403" height="360" css="http://enderecodoseusite/enderecodoarquivo.css?1"></fb:fan>

5º Passo – Finalizando
Nesta etapa seu widget Like Box está pronto para ser exibido incorporando o CSS personalizado. Customize a folha de estilos CSS conforme sua necessidade, através dela você poderá atribuir diversos tipos de exibição como cores, tamanhos e espaçamentos.

Um detalhe importante é que o Facebook mantém cache de cada CSS enviado, portanto, cada alteração que fizer no CSS é necessário alterar o número (?1) que ficou logo após o endereço da folha de estilos. A cada alteração você sobe o número para ?2 ?3 ?4 e assim por diante!