Caixa de fãs do facebook personalizada no blogger e wordpress

No ano passado o facebook começou a virar uma febre aqui no Brasil, muitas pessoas criaram seus perfis nesta rede social.Muitos não só criaram um perfil como também viram que não só as empresas podem fazer grandes negócios no facebook.

É 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.

[code]
<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>
[/code]

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.

[code]
.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;
}
[/code]

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!

Fontes: Wptotal, line25

  • Thiago Sabaia

    Fica igual do escolawp.com

    • http://cartaoprepagointernacional.net/ Rafael Avelino

      @Thiago,você tem a possibilidade de alterar o css,sendo assim cada um terá uma diferente.
      Dê uma olhada nas fontes que citei.

      Abraço e obrigado pelo comentário!

  • Eduardo Leandro

    Oi, Rafael!
    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. :)

    • http://cartaoprepagointernacional.net/ Rafael Avelino

      Olá Eduardo!

      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!

  • Eduardo Leandro

    Poxa, valeu aí pela ajuda.

    Abraço.

  • Diogo

    Artigo muito completo! Se tiverem procurando um serviço para aumentar em milhares de fãs no facebook visitem este site:
    pt.winningwebsolution.com

    • http://cartaoprepagointernacional.net/ Rafael Avelino

      Olá Diogo!

      Obrigado pelo comentário de dica!

      Abraço!

  • Pingback: Links da Semana - 24-06

  • http://paatin.blogspot.com Ramiro

    Gostei muito amigo, resolveu muito a minha vida, ótimo tutorial!

    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?

    • http://cartaoprepagointernacional.net/ Rafael Avelino

      @Ramiro tente colocar códigos de sites diferentes,ex:

      Addthis e de outro site qualquer.

      Abraço!

      • http://paatin.blogspot.com Ramiro

        Opa mano, muito obrigado pela rapida resposta, adorei seu Blog, já ta nos Favoritos… ;D

  • Isaias Kleberson

    Olá amigo! Gostaria de saber se é possível atualizar o ” pessoas curtiram ” no box de fecebook.

    Deseja Obrigado!!!

    • http://cartaoprepagointernacional.net/ Rafael Avelino

      @Isaias,não sei ao certo mas acredito que sim.

      Abraço!

      • Isaias Kleberson

        Eu que agradeço a resposta, mais no CSS ate tem lá
        “.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!!!

        • http://cartaoprepagointernacional.net/ Rafael Avelino

          @Isaias,sim é para alterar a fonte e por não mudar quando você altera pode ser o cache do facebook e do navegador,tente limpar o cache e testar em outros navegadores.

          Abraço!

          • Isaias Kleberson

            Deu certo Rafael !!!
            Obrigado pela ajuda!
            abração!

          • http://cartaoprepagointernacional.net/ Rafael Avelino

            @Isaias eu que agradeço!

            Abraço!

  • http://www.amorepazsemfronteiras.com Lucy Sem Fronteiras

    Olá Rafael, tudo bem com você?

    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!

    • http://cartaoprepagointernacional.net/ Rafael Avelino

      @Lucy Tudo Bem!

      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!

  • netolg

    ola tem como me ajudar em uma duvida com o index?

    • http://cartaoprepagointernacional.net/ Rafael Avelino

      @Netolg qual é a dúvida?