Caixa de fãs do facebook personalizada no blogger e wordpress
É possível ter um grande retorno divulgando seu blog e site e o melhor é criar uma página de fãs do seu blog para quem gostar “curtir” e receber as atualizações em sua timeline.
A dica que vou passar só é possível para quem tem uma página criada no facebook,se ainda não criou a sua veja alguns artigos que ensinam passo a passo de como fazer:
Como criar a página do seu blog no Facebook :: Com tutorial do RSS Graffiti
Como criar uma página no Facebook
Vamos para o tutorial de como personalizar sua caixa de fãs do Facebook
Primeiramente precisaremos de uma API KEY (ou Chave de API) e também do ID de sua página no facebook,veja como pegar a sua nas imagens abaixo:
Para pegar sua API Key clique aqui e copie-a como na imagem abaixo:
O ID é bem simples, clique em editar na sua Página e faça como na imagem abaixo:
Agora copie o código abaixo e altere onde está escrito API-KEY-AQUI,coloque sua Chave de Api e em ID-PAGINA o id que você copiou de sua página de fãs,em width você escolha a largura e no height a altura.
<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("API-KEY-AQUI");
</script>
<fb:fan profile_id="ID-PAGINA"
connections="18" width="403" height="360"
css="http://seublog/wp-content/themes/nomedotema/style.css?1">
</fb:fan>
Abaixo deixo o código em css para que você cole onde tem a chamada do seu css,se for no wordpress geralmente fica em: endereço-do-blog/wp-content/themes/nomedotema/style.css.
.fan_box .full_widget {
background: none; border: none;
}
.fan_box .connections_grid .grid_item {
padding: 0 8px 10px 8px;
}
.fan_box .connections_grid .grid_item a img {
box-shadow: 0px 0px 10px #333;
-moz-box-shadow: 0px 0px 10px #333;
-webkit-box-shadow: 0px 0px 10px #333;
}
.fan_box .connections_grid .grid_item a:hover img {
box-shadow: 0px 3px 10px #333;
-moz-box-shadow: 0px 3px 10px #333;
-webkit-box-shadow: 0px 3px 10px #333;
}
.fan_box .full_widget .connect_top {
background: none;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.fan_box .connections .connections_grid {
padding-top:16px;
}
.fan_box .connections {
border-top: none;
padding:15px 0 0;
color: #000;
font: italic 21px Georgia;
text-align: center;
text-shadow: 0px 1px 4px #000;
}
.fan_box .connections span.total {
color: #000;
}
.fan_box .connections_grid .grid_item .name {
color: #000;
font-size: 11px;
}
.fan_box .profileimage {
margin: 0;
}
Se decidir colocar o código css no style.css do seu template,copie o link que indica esta folha de estilo e cole onde está o link http://seublog/wp-content/themes/nomedotema/style.css (deixando o ?1) do primeiro código indicado no artigo .
Toda vez que você precisar alterar o css ou algum outro código também é necessário alterar este numero que vem depois da ? , pois o facebook armazena em cachê a última alteração e se for feita alguma outra sem alterar o numero você não conseguirá ver a modificação (foi o que entendi rs).
Também é possível personalizar sua caixa de fãs no blogger, simplesmente siga todos os passos e como não é possível armazenar nenhum arquivo no blogspot você terá que procurar um site que faça isso para hospedar o CSS e fazer uma chamada como foi dito no artigo.
Artigos que explicam como hospedar arquivos,scripts fora do blogger:
Hospedar JavaScript no Google Site
SkyDrive-a solução para o fim do Google Pages?
Você pode ver o resultado de como ficou no meu blog de teste.
É isso pessoal qualquer dúvida é só deixar um comentário que ajudarei no que estiver ao meu alcance!
Leia também...
Como queimar seu feed pelo feedburner
O que é feed?
Meus objetivos com o blog para 2011
Como criar uma conta no facebook
Como criar um email no yahoo
Promoção 1 ano de Gothic Darkness template exclusivo+ domínio grátis
18 comentários 
Deixe um comentário 
Dê uma olhada nas fontes que citei.
Abraço e obrigado pelo comentário!
Quero te explicar alguns erros que ocorreram comigo aqui, e vê se você pode me ajudar.
1 – Não consegui o código API-KEY.
Quando eu clico no link, o site diz que eu não tenho aplicativos.
Tentei criar um, coloquei o telefone mas o código de verificação nunca chega. É possível fazer sem esse código?
2. Não conseguir modificar o widget no meu template. Uso o blogger e me parece que esse link (http://seublog/wp-content/themes/nomedotema/style.css?1) que aparece no código é do WordPress. Queria saber como posso colocar pra funcionar no blogger, fazendo com que as modificações que eu faço no CSS se apliquem no widget.
Aguardando a resposta.
Desde já, obrigado.
Para o blogspot no final do artigo você vê até um exemplo em meu blog de teste,para gerar api não sei porque ocorre isso que vocêw citou,mas tente fazer pela explicação deste artigo do ferramentas blog.
Abraço!
Abraço.
pt.winningwebsolution.com
Obrigado pelo comentário de dica!
Abraço!
Pode me responder uma coisa, eu quero usar o botão “Curtir” dentro de cada post e por fora, mas quando coloco um o outro automaticamente se desativa, o que posso fazer para usar os dois?
Addthis e de outro site qualquer.
Abraço!
Deseja Obrigado!!!
Abraço!
“.fan_box .connections {
border-top: none;
padding:15px 0 0;
color: #fff;
font: italic 21px Georgia;
text-align: center;
text-shadow: 0px 1px 4px #fff;”
Creio eu que seja pra alterar a fonte e o tamanho, mais eu altero e eles não mudam.
Sabe o que pode ser??? Obrigado!!!
Abraço!
Obrigado pela ajuda!
abração!
Abraço!
Encontrei este tutorial que há tempos queria, mas desculpe, não entendi muito bem. Será que você poderia dar uma ”clareada”?
Quero aplicar em minha Fã Page, que tenho no blog / Blogger.
Conseguir a ApI e ID consigo, normal, mas a dúvida é:
- posso pegar a ID e chave de algum aplicativo que já tenho, ou devo criar um novo só para isso? (por ex. eu já tenho para o sistema de comentários em meu blog com facebook)
- onde copiar e colar o código que vc deu, pois acima não está muito claro, principalmente a quem tem blog no Blogger.
Vc poderia me ajudar?
Desde já agradeço a atenção
Um abraço a ti!
Acredito que não,eu aconselho a você criar outro app no facebook.
Quanto a caixa para blogger o procedimento é o mesmo só que como eu escrevi no artigo você terá que hospedar o arquivo css em algum site externo,tem até um exemplo que eu fiz em um blog de teste no blogspot,o link está no artigo logo abaixo dos 2 links que indiquei de outros blogs sobre armazenar arquivos.
Abraço!