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

Ao planejar seu site, pense de forma simples. Páginas de Web rebuscadas e cheias de movimento já deram o que tinham que dar, mostrar ícones se mexendo e animações complexas não vão levar a nada, no máximo à perda de foco para o que realmente deve ser destacado em seu site.

As animações na abertura do site foram também foram tendência durante um bom tempo, mas aqui também se encaixa a pergunta da real necessidade desta animação. Ela agregará informações substanciais ao conteúdo do site? Ou está lá só para “fazer uma gracinha”? Se a resposta for a segunda opção, por que não tirar essa animação e proporcionar um acesso mais rápido ao site?  Caso for de suma importância e precise ser feito, nunca deixe de incluir a opção de pular a abertura do site e ir direto ao conteúdo.

Havia expectativa sobre a adoção do Flash no iPad, no iPhone e no iPod Touch, dispositivos responsáveis por boa parte do acesso móvel à internet no planeta. A Apple, contudo, acabou de vez com qualquer esperança. Ao apontar os motivos da decisão, Steve Jobs afirmou que o Flash tornou-se dispensável.

A chegada do HTML 5 e sua combinação com CSS 3, SVG e JavaScript permite desenvolver muitas das coisas que apenas a plataforma da Adobe era capaz de fazer.

A presença na Internet é atualmente uma das mais indispensáveis ferramentas de marketing para o sucesso futuro de qualquer empresa ou instituição, pensando nisso desenvolvo um trabalho de longa data com o desenvolvimento de sites elegantes, atraentes e facílimos de usar.

Desenvolvimento de portais, sites institucionais, lojas virtuais, blogs pessoais ou corporativos, hotsites, aplicativos web, ofereço gestão de mídias sociais para empresas, registros de domínios nacionais e internacionais.

Minha principal plataforma de trabalho são os softwares livres de Sistemas de Gerenciamento de Conteúdo, conhecidos como CMS (Content Management System, em Inglês), com experiência nos sistemas WordPress, Joomla, Drupal e Magento.

Estes sistemas são seguros, robustos e permitem que você atualize todo o conteúdo de seu site através de uma interface web. Grandes organizações como ONU, Casa Branca, governo francês, Greenpeace UK, Universal Music, Sony Music, Harvard, Porsche e Unicamp utilizam estas plataformas. Venha juntar seu site a essa lista!

Para entrar em contato comigo, você pode visitar a minha página de contato e enviar uma mensagem. Você pode também ligar para (19) 9190.5027 ou (19) 3896.2817.

Solicite uma proposta e garanta já sua bem-sucedida presença no mundo da internet!

Nunca contrate uma empresa de hospedagem de sites sem testar o suporte antes. Procure saber os horários de funcionamento, entre no Chat e envie um e-mail ao suporte. Enviar e-mails para o departamento de vendas não funciona.

Muitas empresas têm ótimos tempos de resposta no departamento de vendas e péssimos tempos no departamento de suporte. Afinal, eles pensam que não fazem dinheiro dando suporte, mas sim vendendo o plano a você.

Todos os meus sites estão hospedados na TecnoWEB Consultoria onde posso contar com um suporte técnico incrível e de extrema agilidade, possuem diversos planos e servidores seguros e estáveis. Uma empresa com verdadeiro espírito de parceira e comprometimento com o cliente.

Fica aqui a dica do site nederveld.wordpress.com que explicou a fundo a função que causa o bug, você pode baixar os arquivos corrigidos que resolvem o problema do efeito no Internet Explorer 8 clicando aqui.

Se mesmo depois de você ter atualizado os arquivos e o problema persistir, verifique o doctype usado em sua página.

Faça o download do Ffdshow e MatroskaSplitter.

.

Lembrando que travamentos podem acontecer caso seu computador não tiver uma boa placa de vídeo, a memória seja baixa e sua velocidade de conexão com a internet seja abaixo 1 mega.

Leia Mais »