12/07/2015

Facebook Open Graph | Imagem compartilhar no Facebook personalizada no seu site WebAcappella


TEMA: Redes Sociais
ARTIGO: Revisado e Melhorado
VERSÃO: WA RC  |  WA 4


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.webacappellashow.com.br/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.webacappellashow.com.br" />



Após tudo configurado é hora de inserirmos no nosso site WebAcappella


PARA O WA 4


 Então utilize a opção SITE>>PROPRIEDADES DO SITE clique na CATRACA e insira o código logo no início do campo CÓDIGO HTML:




PARA O WA RC

Após conectar no seu projeto no WA RC clique em Website settings.




Clique em Edit HTML Code e insira seu código. 




Agora publique seu site.

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



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. Você pode utilizar tantos botões personalizados por você ou seguir instruções das seguintes postagens; ou até mesmo digitar a url em uma postagem no Facebook.



Visite o a demonstração online e faça o teste clicando nos botões compartilhar do Facebook para ver como se procede.. 








Related Posts Plugin for WordPress, Blogger...