Como instalar botão flutuante de WhatsApp

Hoje vamos explicar como instalar um botão flutuante como este da imagem abaixo, usando um plugin do WordPress:

No Painel de Controle, vá em Adicionar novo Plugin, e pesquise pelo plugin chamado “Click to Chat“.

Clique para instalar o primeiro resultado, do logotipo verde (pode ser que mude com o tempo). Meu critério para instalar plugins é a frequência de atualização e a quantidade de avaliações positivas. Já havia tomado conhecimento deste através de outro site em que trabalhei. É um plugin simples de instalar e muito fácil de configurar. Depois de instalado, clique em Ativar. Localize o plugin no menu esquerdo do WordPress e clique em Settings. Será aberta a tela abaixo:

Logo de cara, a única coisa que precisa mesmo ser alterada é o número do WhatsApp. Digite seu número com DDD e código do país As demais configurações são padrões, e podem ser usadas do jeito que estão, mas vamos mudar algumas coisas:

Ative o checkbox mostrado na tela, ele será útil para economizar um clique do usuário. Desta forma, se o usuário estiver usando desktop, será direcionado para o WhatsApp Web, e se estiver usando celular, será direcionado para o App.

Logo abaixo tem configurações bem interessantes de layout, que determinam o formato e a posição do botão em relação à tela. Escolhi deixar no canto inferior direito.

Salve as alterações e pronto!

Em outro momento, vou mostrar como colocar um botão similar mas sem utilizar plugin, ou seja, no código do seu site.

Open Graph: dicas de compartilhamento em Redes Sociais

Se você é usuário do Facebook e do Twitter, já deve ter percebido que, quando compartilhamos um artigo de um site externo (normalmente site de notícias), muitas vezes aparece uma foto e uma breve descrição do artigo, deixando o post mais atrativo. Veja o exemplo abaixo:

Exemplo de post do Facebook

Isso se deve a uma informação na programação do site chamada Open Graph, representada pela tag <og>. Em HTML é relativamente simples de se fazer, mas hoje vamos ensinar como fazer isso no WordPress de modo ainda mais fácil do que no HTML. Existem diversos plugins que fazem bem esse tipo de tarefa, mas decidimos usar um dos mais populares, chamado Open Graph and Twitter Card Tags. Basta procurar na lista de Plugins, instalar e ativar. Não é necessário mudar nenhuma configuração. Assim que ativado, na página de edição de Posts ou Páginas, aparecerá esse novo formulário:

São dois novos campos, um para inserir a imagem de compartilhamento e outro para o resumo. O tamanho recomendado da imagem é 1200 x 630 pixels, e o texto pode ter até 300 caracteres. Caso fiquem em branco, será usada a primeira imagem do post e parte do conteúdo. Em nosso exemplo, editamos o post sobre Certificado SSL, incluímos uma imagem e um breve resumo.

Depois de Salvar e Publicar o post, experimente compartilhar o link da sua postagem no Facebook. O resultado será semelhante a este:

Assim que colar o digitar a URL do seu post, aparecerá o preview logo abaixo, para poder saber como ficará a postagem antes de publicar.

No Twitter, o resultado será esse:

Uma última dica: após publicar a imagem no Facebook, notamos que o texto no fundo chapado não fica uniforme, perde muita resolução. Então optamos por usar uma imagem de fundo. Por isso a imagem do Twitter ficou com fundo de madeira.

Continue nos acompanhando para mais dicas, na nossa jornada para construir um site completo no WordPress.