Related Posts Plugin for WordPress, Blogger...

Como criar e personalizar a LikeBox da página no blog

sexta-feira, 2 de maio de 2014

O Facebook disponibiliza uma ferramenta muito interessante para nós blogueiros que temos uma página dedicada ao blog nele. Esta ferramenta se chama LikeBox, que serve para mostrar quantos seguidores você tem na página e oferece a opção ao usuário para curtir sua página sem precisar sair do blog.
Likebox personalizadas: Como pôr imagens de fundo
LikeBox personalizadas

Por que ter uma fanpage (página) do blog no Facebook?
Se você não é de Marte, nem de Plutão, sabe que o Facebook é a maior rede social da atualidade. Além disso, é umas das redes sociais que mais se integrou aos sites. Prova disso é que em qualquer site que você entre, tem um botão para "curtir", "compartilhar" e etc.
A maioria das pessoas tem um perfil no Facebook. Agora, em relação ao blog, são poucos os que tem, comparado ao Face. Desta forma, tendo apenas o blog, praticamente limitamos nosso público apenas aos outros blogueiros. Criando uma página, os leitores do seu blog que não tem um pode curtir sua página e sempre ser avisado quando uma nova postagem estiver pronta para ser lida.

Como criar uma página e uma LikeBox

Para criar uma página, basta clicar nesse link https://www.facebook.com/pages/create e seguir os passos. Não tem segredo.
Para criar uma LikeBox, acesse esse link LikeBox e preencha o que se pede, como na imagem a seguir:
Criando uma likebox da sua página para o blog/site

Facebook Page URL: coloque o endereço completo da sua página.
Width: indica a largura em pixels da sua LikeBox.
Height: indica a altura em pixels.
Show Friends Faces: exibe a imagem dos usuários que curtiram a página.
Show Header: exibe o texto "Encontre-nos no Facebook".
Show Posts: exibe os últimos posts da página e ocupa muito espaço.
Show Border: exibe uma borda ao redor da LikeBox.

Depois de definidos esses parâmetros (que poderão ser editados posteriormente) clique em Get Code:
Criando uma likebox da sua página para o blog/site
HTML5: deixe nesta aba.
Initialize the JavaScript SDK: associe esta opção ao seu app. Se você ainda não tem um app, clique aqui que temos um tutorial passo-a-passo de como criar um.
Include the JavaSript SDK...: não é necessário incluir isso no seu template, pois isso já foi feito na criação do app.
Place the code for you plugin...: No painel do seu blog, clique em Layout, Adicionar um Gadget, selecione HTML/JavaScript e cole o código nele.


Finalmente sua LikeBox está pronta.

Como personalizar a LikeBox
O Facebook dá poucas opções para a personalização da LikeBox, mas podemos, através de alguns códigos simples adicionar umas personalizações a mais. É importante para um blogueiro que ele saiba um pouco de HTML e se aventure no mundo do CSS. Eu não sou expert no assunto, mas gosto de ficar fuçando até descobrir como fazer uma coisa.  O HTML é o esqueleto da página e o CSS é o que dá forma e estilo para ela.
Bom, vou passar o código e explicar pra que serve cada função, assim ficará mais fácil de entender:

<div id="boxface1" class="fb-like-box" data-href="https://www.facebook.com/masqueseyo" data-width="233" height="252" padding="0" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="false"></div>
<style>
#boxface1{
position:relative;
border:0px solid #000;
padding:0px;
background-image: url("http://www.coverbooth.com/uploads/covmg/white-flower-macro-blue-background-cool-facebook-timeline-covers.jpg");
background-color:transparent;
width:233px;
height:252px;
background-position:-500px 1px;
}
</style>

A <div> que está em azul é o código fornecido pelo Facebook. Note que acrescentamos em negrito a id="boxface1". Esse atribulo linka esta div com os códigos em CSS que estão entre as tags <style>.
Vamos explicar os atributos contidos na tag <style>:

<style> -- Indica que o que estiver dentro desta tag é estilo, código CSS
#boxface1{ --Indica o link deste código com a tag de id="boxface1"
position:relative; --Indica o posicionamento da LikeBox onde estiver inserido (relative, absolute, fixed)
border:0px solid #000; --ndica a ausência de borda (0px) ou presença e largura dele (1px, 12px)
padding:0px; -- Indica o espaçamento entre a borda e o conteúdo
background-image: url("http://LINK-IMAGEM.jpg");  --Imagem que aparecerá no fundo como background
background-color:transparent; --Na ausência do atributo anterior, você pode definir uma cor para o fundo (#345635, #122312) (Acesse essa paleta de cores)
width:233px; --Indica a largura da caixa (deixar o mesmo valor que pôs na LikeBox)
height:252px; --Indica a altura da caixa (deixar o mesmo valor que pôs na LikeBox)
background-position:-500px 1px; --Indica o posicionamento da imagem de fundo, -500px indica a posição de "X" w 1px indica a posição de "Y"
}
</style>

Pronto, essa é a nossa dica de hoje. Sabe de algum outro código para personalizar a LikeBox? Ficou com alguma dúvida? Deixe seu comentário.
Gostou do texto?! Então curta a página no facebook para receber novos textos quando eles forem publicados: https://www.facebook.com/masqueseyo
Comentário(s)
0 Comentário(s)
Nenhum comentário:
Postar um comentário