Pular para o conteúdo principal

Como personalizar sua Fan box Facebook com CSS



Como personalizar sua Fan box Facebook com CSS?

tutorial Fan Box Personalizada Facebook


A muito tempo procuro descobrir como personalizar minha fan box. E esse dias achei esse tutorial no DaddyDesigner e mesmo assim não entendi como funcionava. Mas acessando o mybloggertricks eu entendi. Vou tentar reproduzi-lo aqui. Qualquer duvida comente, ok?







Lembrando que eu não sou nenhum Expert em códigos. Quero apenas passar informação útil.
Sinta se a vontade para corrigir qualquer erro meu. Atualizarei o post. Muitas duvidas acessem o post original no fim da postagem. Fico agradecido!

Bom, Vamos lá?

----------------------------------------------------------------------------------------------------------------
1. Vamos criar  Stylesheet para a Fan Box:
----------------------------------------------------------------------------------------------------------------
1.Vamos começar criando nosso arquivo .CSS
Para isso você vai copiar esse código CSS e colar no Bloco de notas (Ctrl+R > Notepad)



/*---------------Fan Box Personalizada--------------*/




.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: #0080ff; 
  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: #0080ff !important; 
  padding-top: 1px !important; 
}


.fan_box .connect_widget{ 
position: absolute; 
bottom: 0; 
left: 0px; 
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; 
}


/*---------------Fan Box Personalizada--------------*/



2. Altere os valores Css que quiser, faça testes. Mas se for sua 1º vez aconselho seguir o tutorial.
ex. fáceis:
Mude a cor: #0080ff
Altere o tamanho da fonte: 11px;
Lembrando que isso é dentro do notepad;

3. E salve com a extensão .css






4. Vamos hospedar o arquivo.
Eu usei o Dropbox, mas você pode usar o site de hospedagem host de sua preferencia. Tutorial do DropBox http://www.conectadores.com.br/tutoriais/dropbox

----------------------------------------------------------------------------------------------------------------
2. Script para a Fan box personalizada.
----------------------------------------------------------------------------------------------------------------
1.Acesse o Painel do blogger > Layout > Adicionar Gadget > HTML/Java Script




<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("");</script>
<fb:fan profile_id="LIKE PAGE ID" stream="0" connections="10" width="300px" height="200px" header="0" logobar="0"   css="STYLE SHEET LINK"></fb:fan>


2. Substitua:

*LIKE PAGE ID = ID da sua pagina. Para saber a ID, acesse sua pagina > Gerenciar > Editar pagina:
Copie apenas os últimos números. Ex: id=5248545121545

*STYLE SHEET LINK = Substitua pelo arquivo link do arquivo stylesheet. Que geramos no passos anteriores.


Agora salve e veja como ficou.  
* Possível problema seja conflito, como aconteceu nesse blog. 






Veja o artigo original aqui:ww.mybloggertricks.com/2011/06/customize-facebook-like-box-with-css.html


Acesse a fonte aqui: http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/