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