Fazer uma página de fãs para seu blog no Facebook é comum nos dias de hoje, principalmente pra quem busca realmente formas de divulgação gratuitas.
O legal das páginas de fãs é que podemos ver quem gosta e aprova nosso blog e depois comparar com outros websites. E é por isso que usando um código que o próprio Facebook desenvolveu, criei um mecanismo que mostra o número de pessoas que aprovam e recomendam seu trabalho, podendo ser usado em qualquer plataforma (Blogger, WordPress, etc) ou sites.

O contador funciona mais ou menos como o contador de assinantes Feed e seguidores do Twitter que desenvolvi alguns meses atrás. Ele pega o valor da quantidade fãs e joga na tela em forma de texto, podendo modificar sua aparência da forma que você quiser… É só abusar da criatividade.

Exemplo:

Aprenda como fazer:
1 – Antes de tudo crie seu perfil no Facebook, depois uma página de fãs. (Siga o tutorial: Como criar uma página de fãs no Facebook por Dicas Blogger)

2 – Copie o código abaixo e cole onde você quiser usar o contador dentro do seu blog/site:

<script type=\"text/javascript\" src=\"http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=ID_DO_PERFIL\"></script>

3 – Acesse sua página de fãs no Facebook e clique sobre a imagem do perfil (caso a ID ainda não esteja aparecendo na barra de endereços), dessa forma será mostrado a id da página na barra de endereços. Veja o exemplo:

Link: http://www.facebook.com/pages/Codigos-Blog/157140557643201
Encontrando a ID:

ID: 157140557643201

4 – Copie a ID da sua página e coloque no lugar de ID_DO_PERFIL no código fornecido acima.
Exemplo Códigos Blog:

• Antes: <script type=\"text/javascript\" src=\"http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=ID_DO_PERFIL\"></script>
• Depois: <script type=\"text/javascript\" src=\"http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=157140557643201\"></script>

5 – Salve e Pronto!
O código vai mostrar apenas o número. Então agora escreva o que quiser depois, coloque imagens, jogue alguma cor, etc.

Alguns widgets prontos:

1)

Código:

<a style=\"text-decoration:none; padding: 0 0 0 20px; background: url(http://codigosblog.net/servidor/contadorfacebook/facebook_mini.png) no-repeat left center;\" href=\"LINK_PERFIL_FACEBOOK\" target=\"_blank\" title=\"Faça parte você também!\"><script type=\"text/javascript\" src=\"http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=ID_DO_PERFIL\"></script> Fãs no Facebook</a>

2)

Código:

<div style=\"padding: 0; margin: 0;\">
<img src=\"http://codigosblog.net/servidor/contadorfacebook/facebook_medio.png\" style=\"padding: 0 7px 0 0; float: left; border: 0;\"/>
<a style=\"text-decoration:none;\" href=\"LINK_PERFIL_FACEBOOK\" target=\"_blank\" title=\"Faça parte você também!\"><script type=\"text/javascript\" src=\"http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=ID_DO_PERFIL\"></script> 
Fãs no Facebook</a><br/><a style=\"text-decoration:none; font-size:small;\" href=\"LINK_PERFIL_FACEBOOK\" target=\"_blank\" title=\"Faça parte você também!\">participe você também</a>
</div>

3)

Código:

<div style=\"padding: 0; margin: 0; text-align: center;\">
<img src=\"http://codigosblog.net/servidor/contadorfacebook/facebook_big.png\" style=\"padding: 0 0 3px 0; border: 0;\"/><br/>
<a style=\"text-decoration:none;\" href=\"LINK_PERFIL_FACEBOOK\" target=\"_blank\" title=\"Faça parte você também!\"><script type=\"text/javascript\" src=\"http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=ID_DO_PERFIL\"></script> Fãs</a>
</div>

• Substitua LINK_PERFIL_FACEBOOK pelo link da sua página de fãs no Facebook

Seja fã da nossa página no Facebook! (Página nova! Não repare na organização por enquanto! =P)

Aproveite!
Abraços