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.. 








2 comentários:

  1. Vou testar pra ver se funciona.. valeu amigo

    ResponderExcluir
    Respostas
    1. Opa amigo.. beleza..testa aí. Qualquer dúvida pode contar comigo..abraços.

      Excluir

Olá pessoas do bem!!! Se gostou do post deixa um comentário. Os comentários é bom para aumentar a estima de quem ta postando. Valeu.

Related Posts Plugin for WordPress, Blogger...