REDES SOCIAIS | Facebook Open Graph | Botão compartilhar no Facebook personalizado no seu site WebAcappella

Olá galera do bem!

Existem certos detalhes que nos tempos de hoje não podem faltar em um website. Um deles é a interação do seu site com redes sociais. O Facebook hoje é considerada a maior rede social de todos os tempos, e uma porta para atrair novos clientes.

Sabe aquele ícone "Compartilhar" do Facebook que se vê em vários sites? Pois então; se você clica nele o que acontece? Simplesmente você compartilha para todos seus amigos, ou todos de um grupo que você participa.

Imagina a importância que esse ícone (botão) tem; o visitante do seu site divulgando seu site pra você.

Porém uma vantagem pode se transformar em transtorno se não estiver bem trabalhada. Pois, se o site não estiver configurado com Facebook Open Graph, nem sempre as imagens e textos divulgados no Facebook causam boa impressão.

Este é o tema desse post: Aplicar o Facebook OpenGraph no seu site WebAcappella inserindo uma imagem personalizada. Existem métodos mais complexos que ao decorrer do tempo estarei postando aqui no blog.

Então o primeiro passo é incluir o código abaixo no head do seu site. Mas calma, não vá copiando e colando, vamos entender  e fazer as alterações devidas primeiro.

<meta property="og:locale" content="pt_BR" />
<meta property="og:type" content="website" />
<meta property="og:image" content="URLDAIMAGEM" />
<meta property="og:image:type" content="image/TIPOIMAGEM" />
<meta property="og:image:width" content="LARGURA">
<meta property="og:image:height" content="ALTURA">
<meta property="og:site_name" content="NOMEDOSEUSITE">
<meta property="og:title" content="TITULOASERPOSTADO" />
<meta property="og:description" content="DESCRIÇÃO" />
<meta property="og:url" content="URLSITE" />

ENTENDENDO O CÓDIGO E FAZENDO AS ALTERAÇÕES

<meta property="og:locale" content="pt_BR" />

Nessa tag definimos basicamente o local/idioma da publicação. A documentação do Open Graph recomenda optarmos pelo idioma em qual o site está escrito. Mas sei de muita gente que opta em usar "en_us"

<meta property="og:type" content="website" />

Nesta você define o tio do seu website. O valor padrão é "website", Mas pode ser alterada de acordo com o conteúdo; por exemplo, se for um artigo pode-se colocar a palavra "article". No nosso caso vamos manter "website"

<meta property="og:image" content="URLDAIMAGEM" />

Nesta você informa o caminho da imagem a aqual deseja ser compartilhada. Eu, particularmente gosto de utilizar imagens maiores (1200 x 628 px) Mas o Facebook também aceita imagens de 200 x 200 px.

Portanto com um programa da sua escolha crie uma imagem em uma das dimensões citadas acima.

Neste exemplo eu criei uma de 1200 x 628px . 

Após criado a imagem hospede a mesma em uma pasta dentro da hospedagem do seu site. O caminho da imagem será o local onde está postada seguido do nome da mesma. Eu salvei a imagem deste exemplo como compartilhaface.png dentro de uma pasta nomeada img.

<meta property="og:image:type" content="image/TIPOIMAGEM" />

Nesta você informa o tipo de imagem utilizada. No caso do exemplo é PNG.

<meta property="og:image:width" content="LARGURA">

<meta property="og:image:height" content="ALTURA">

Nestas duas se informa as dimensões da imagem. Portanto eu utilizei 1200 x 628, mas imagens nas dimensões 200 x 200px também são aceitas. Portanto na minha opinião não fica muito chamativo.

<meta property="og:site_name" content="NOMEDOSEUSITE">

Substitua o trecho em vermelho pelo nome do seu site.

<meta property="og:title" content="TITULOASERPOSTADO" />

 Substitua o trecho em vermelho pelo texto que deseja que apareça logo abaixo da imagem como o título principal da postagem no Facebook.  No exemplo eu coloquei "WEBACAPPELLA SHOW"

<meta property="og:description" content="DESCRIÇÃO" />

Nesta substitua o trecho em vermelho pelo texto que vai logo abaixo do título a ser postado. Pense neste texto como uma chamada para que desperte a atenção dos internautas. Como exemplo eu defini como "Sua biblioteca on line Webacappella | Dicas / Truques /Tutoriais "

<meta property="og:url" content="URLSITE" />

Para finalizar o código substitua o trecho em vermelho pela url completa do seu website , com http:// .

Então para este exemplo meu código ficou como o abaixo:

<meta property="og:locale" content="pt_BR" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.bhinf.com.br/blog_webshow/bannerconefeitogif/img/compartilhaface.png" />
<meta property="og:image:type" content="image/PNG" />
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="628">
<meta property="og:site_name" content="WEB ACAPPELLA SHOW">
<meta property="og:title" content="WEBACAPPELLA SHOW" />
<meta property="og:description" content="Sua biblioteca on line Webacappella | Dicas / Truques /Tutoriais" />
<meta property="og:url" content="http://www.bhinf.com.br/blog_webshow/bannerconefeitogif" />



Após tudo configurado é hora de inserirmos no nosso site WebAcappella. Então utilize a opção SITE>>PROPRIEDADES DO SITE clique na CATRACA e insiria o código logo no início do campo CÓDIGO HTML:

Publique seu site.

Após publicado é hora de conferirmos se ficou tudo certinho:

Acesse então este link: https://developers.facebook.com/tools/debug/

IMPORTANTE: Toda vez que alterar a imagem acesse esse link e faça o procedimento de verificação.

Agora no campo disponível digite a URL DO SITE informado e clique em Debug. Será dado um relatório (em inglês) .

Repare que se tiver algum erro será mostrado para as devidas correções.

Depois de feita as devidas correções eu aconselho testar também postando o url informado diretamente no facebook e vendo o resultado.

Agora que está pronto. Falta somente inserir o botão nas páginas desejadas

INSERINDO O BOTÃO COMPARTILHAR NAS PÁGINA DO SEU SITE

MÉTODO 1 - UTILIZANDO FACEBOOK DEVELOPERS

Acesse este link: https://developers.facebook.com/docs/plugins/share-button

Em URL to share informe a url do site. 

Layout escolha a forma que você deseja o botão

E clique em GET CODE  para a geração do código.

No Webacappella , na página em que deseja incluir o botão utilize a opção PÁGINAS / MATRIZES clique na CATRACA  e inclua o código fornecido no ítem 1.:

Agora continuando na págian que deseja incluir o botão vai na opção INSERIR>> CÓDIGO HTML  e cole o código fornecidos no item 2.

MÉTODO 2 - UTILIZANDO BOTÃO DO WEBACAPPELLA

Existem casos que desejamos fugir da imagem padrão que o Facebook nos fornece para o botão Compartilhar como mostrado no Método1. Então existe uma forma de você utilizar os próprios botões do Webacappella. 

Para isso faça todos os procedimentos do MÉTODO 1 insira o botão e publique o site. Após o site publicado clique no botão como fosse compartilhar no facebook:

Ao abrir a tela de publicação copie todo o conteúdo da barra de endereço. 

No Webacappella na págian que deseja o botão compartilhar insira um botão com a opção INSERIR >> BOTÃO. 

Personalize o botão da sua maneira, e na hora de definir um link para o botão defina para "Link para um endereço na internet" , "Nova Janela", e no campo abaixo cole o que você copiou da barra de endereços conforme mostrado na imagem acima.

Este método dispensa a inclusão do código no head de cada pagina como mostrado no MÉTODO 1

Agora você tem um botão mais personalizado de compartilhar no Facebook. 

MÉTODO 3 - UTILIZANDO CÓDIGO HTML PARA O BOTÃO

Para este método faça upload de uma imagem em algum lugar na hospedagem do site. Então eu peguei a imagem abaixo e postei no seguinte endereço:  http://www.bhinf.com.br/img com o nome da imagem a url ficou http://www.bhinf.com.br/img/compartilhar-no-facebook.png

CÓDIGO:

<a href="#"
onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;">
<img title="comaprtilhaface" src="urlimagem">
</a>

Agora simplismente substitua o trecho em vermelho pela url da imagem: 

No exemplo o código ficou assim:

<a href="#"
onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;">
<img title="comaprtilhaface" src="http://www.bhinf.com.br/img/compartilhar-no-facebook.png">
</a>

No Webacappella pela opção INSERIR >> CÓDIGO HTML insira o código já adaptado. e posicione na página no local de sua escolha.

Agora visite o a demonstração online e faça o teste clicando nos botões compartilhar para verem como se procedem. 

ATENÇÃO: CLIQUE AQUI e veja o artigo de fornecer a administração da imagem pelo seu cliente.

Abraços a todos .

BOTÕES VOLTAR | ATUALIZAR | AVANÇAR no seu site WebAcappella

Olá turma do bem!!


Hoje vamos passar uma dica muito simples porém muito útil.

Vamos colocar em nosso site uma forma agradável de incluir um botão voltar, e ou atualizar e ou avançar em nosso site.

Daí é opcional quais botões quer incluir no site.

1) Para isto crie 3 imagens para os botões (lembre de criar as imagens exatamente nas dimensões que você vai usar no site):

1 para voltar
1 para atualizar
1 para avançar

Neste exemplo eu criei:

Para o Voltar:

Para o  Atualizar :

Para avançar:

2) Crie uma pasta na sua hospedagem onde irá fazer upload das imagens.

No exemplo criei a pasta "img"

3) Faça upload das imagens para esta pasta.

Agora no WebAcappella com a opção INSERIR>>CÓDIGO HTML inclua os código de acordo com o botão que você desejar: (Você pode ter a opção só de usar o botão voltar ; use conforme sua necessidade)

Ative a caixa de verificação "Ativar a pré visualização" para que tenha referência do posicionamento do botão no seu site.

Para o botão voltar inclua este código:

Substitua o texto em vermelho pelo caminho de sua imagem:

<a href="javascript:history.go(-1)"><img src="http://www.bhinf.com.br/img/voltar.png" /></a>

_________________________________________________________________________

Para o botão avançar inclua este código:

Substitua o texto em vermelho pelo caminho de sua imagem:

<a href="javascript:history.go(+1)"><img src="http://www.bhinf.com.br/img/avancar.png" /></a>

_________________________________________________________________________

Para o botão atualizar inclua este código:
Substitua o texto em vermelho pelo caminho de sua imagem:

<a href="javascript:history.go(0)"><img src="http://www.bhinf.com.br/img/atualizar.png" /></a>


Na demonstração ON LINE na página principal eu utilizei os 3 botões, já se entrar na área restrita eu utilizei apenas o botão voltar.

Dica de efeito animado em imagens e botões no WebAcappella.

Hoje vou passar um macete que fica muito legal em sites de eventos noturnos, balada, cantores, djs.

Um site desta categoria eu preferencialmente prefiro fazer um site em tons escuros.

Sempre é bom colocarmos no lugar de quem está visitando um site.  Por exemplo: se visito um site sobre uma boate e o site é todo branco meu subconsciente não assimila aquele site com o que ele propõe. .....Mas se eu entro num site escuro, com refletores, um musica de fundo. As chances de querer ir aquele local são muito maiores.

O macete de hoje é muito simples, causa uma aparência bacana, com movimentos e não pesa o site.

O interessante que pode ser usado tanto como uma imagem fixa quanto em botões.

Se trata de utilizar gifs animados com o fundo transparente.

1) Em nosso primeiro exemplo, supomos um site de uma boate que fica aberta 24 horas. Primeiramente não vou dizer "Aberto 24 horas" pois soa como farmácia ou casa de conveniência. Vou usar o termo "24 horas no ar". E para causar uma chamada em que chama a atenção do visitante do site. Vou fazer algo tipo um neon.

Utilizando um programa da sua escolha crie todas as figuras que farão parte da sua animação:

Criei as seguintes imagens e as exportei como png com fundo transparente. Nem precisa dizer que são 3 imagens cada qual com seu nome... rs. .

Depois é acessar o site: http://gifmaker.me/ . (Adorei essa ferramenta on line) e fazer o upload das Imagens.

O que eu achei muito interessante nesta ferramenta é que você possui inúmeras opções de configurar como seu gif animado vai proceder. Velocidade entre os frames, velocidade da animação, Quantos loops terá o gif ou se vai ter infinitos loops e até mesmo inserir uma url de uma música a tocar e até em quantos segundos ela deve começar a tocar. Sem dizer que ele mantém seu gif transparente.

Após ter feitos todo os ajustes basta clicar em CREAT GIF ANIMATION  que logo abaixo será listado uma série de opções sendo uma a do download do seu gif.

No do exemplo ficou assim:

 Tudo bem que não ficou igual um neon, pois não fiz a edição muito bacana. Só mesmo para dar um exemplo.

Agora basta inserir a imagem de gif no site que e ver o efeito mantendo o fundo do gif transparente. Faça você um de exemplo e veja como pode ser útil.



2) Em nosso segundo exemplo, o que eu acho ainda mais interessante, é utilizar este recurso com botões no Webacappella.

Vamos criar então um botão em que redireciona o visitante do site para um canal do Youtube. Este botão ficará piscando e quando passar o mouse por cima ele vai parar em uma cor desejada. 

Neste caso vou trabalhar com um gif animado e uma imagem. Lembrando que todas as imagens utilizadas tanto para a criação do gif quanto a imagem separada devem possuir as mesmas medidas: altura x largura.

Então criei e exportei como png transparente as seguintes imagens: 

As duas primeiras (amarela e verde) será usada para o guif animado, e a terceira com vermelho será usada como a imagem fixa ao passar o mouse.

Como já dito anteriormente criarei meu gif animado.

Agora no Webacappella insiro um botão definindo a largura e altura conforme a do gif.

O tipo do botão será uniforme
O canto será sem arredondamento


Na opção Botão > Aparência do botão e na aba normal . Removo todas as cores tanto do fundo quanto borda e etc e insiro a imagem do arquivo gif.

Na opção Botão > Aparência do botão e na aba mouseover. Removo também todas as cores tanto do fundo quanto borda e etc e insiro a imagem do logo original em png do youtube. A terceira imagem citada acima

.

Na opção Botão > Aparência do botão e na aba ativo. Desmarcamos a opção Mostrar estado "ativo"

Ainda na ferramenta Botão , na opção de Texto eu deixo o texto em branco.

Insira agora a url para o redirecionamento e pronto. Tá pronto um botão diferente, animado e que não pesa o seu site.

Faça você mesmo e veja pelo WebAcappella como ficou muito bacana


Pois bem caro leitor. Estarei sempre postando algumas dicas. Seria muito legal se fizesse algum comentário ou até mesmo críticas e idéias novas.. Um Grande abraço.