Adicionando o Recurso 'Compartilhar por Email' em um Site HTML/CSS
Resumo Rápido
Se você deseja adicionar a capacidade de os usuários compartilharem conteúdo por email em seu site, pode usar o atributo mailto: no HTML.
Aqui está um exemplo de como esse código fica:
<a href="mailto:?subject=Página%20Interessante&body=Eu%20recomendo%20que%20você%20dê%20uma%20olhada%20nesta%20página:%20WEBSITE_URL">Compartilhar por Email</a>Não se esqueça de substituir WEBSITE_URL pelo endereço do seu site. Os atributos subject e body definem o assunto e o conteúdo do email.
Interação Aprimorada e Dicas Visuais
Para melhorar a interface, você pode adicionar um ícone de email, o que tornará a navegação mais fácil. Lembre-se de fornecer texto alternativo para acessibilidade:
<a href="mailto:?subject=Artigo%20Interessante&body=Eu%20recomendo%20a%20leitura:%20WEBSITE_URL">
<img src="email-icon.png" alt="Compartilhar por Email" />
</a>Escolha um ícone que se harmonize com o design do seu site e certifique-se de que ele tenha um tamanho adequado para uma visualização confortável.
SEO e Personalização
Elabore cuidadosamente o texto do título e o conteúdo do email para refletir com precisão a essência do seu conteúdo. Incluir o atributo rel="nofollow noreferrer" estará em conformidade com as melhores práticas de SEO:
<a href="mailto:?subject=Leitura%20Empolgante!&body=Eu%20acho%20que%20você%20vai%20gostar:%20WEBSITE_URL"
rel="nofollow noreferrer">Enviar Página por Email</a>Visualização
A opção "compartilhar por email" permite que seu site seja enviado instantaneamente para a caixa de entrada de outra pessoa.
Aproveite este método conveniente para divulgar seu site. Com esse mecanismo, um único clique pode levar seu conteúdo aos olhos dos amigos do usuário.
Verificação de Funcionalidade
Certifique-se de verificar a funcionalidade do seu link mailto:. Garanta que ele abra o cliente de email padrão do usuário e preencha automaticamente os campos necessários. Lembre-se de que diferentes clientes de email podem se comportar de maneiras diferentes, portanto, testar em vários navegadores é crucial para o sucesso da funcionalidade.
Experiência do Usuário e Acessibilidade
Garanta que seu site seja acessível a pessoas com deficiência visual, fornecendo texto alternativo para ícones. Instrua efetivamente os usuários sobre possíveis obstáculos, como bloqueadores de pop-ups que podem interferir no funcionamento da função mailto:.
Funcionalidade de Personalização Estendida
Usar entidades HTML para codificar caracteres especiais ajuda a evitar problemas na exibição correta do link:
<a href="mailto:?subject=Olha,%20o%20que%20eu%20encontrar!&body=Oi!%20Eu%20acho%20que%20você%20deveria%20ver%20isto:%20WEBSITE_URL">Compartilhar por Email</a>Sinta-se à vontade para ser criativo ao elaborar o conteúdo do email, aproveitando todas as oportunidades de personalização.
Recursos Úteis
- Links HTML - Hyperlinks – Revise seus conhecimentos sobre a criação de links.
- Criando hyperlinks - Aprenda desenvolvimento web | MDN – Mergulhe nos detalhes do uso de
mailto:. - Tag HTML a –
<a>não é apenas uma letra; é um mundo inteiro de mágica de hyperlink. - Links Mailto | CSS-Tricks – Adicione sofisticação aos seus links
mailto:. - Referência de Codificação de URL HTML – As regras de codificação são a chave para links confiáveis.
- Codificador/decodificador de entidade HTML – Uma ferramenta para o manejo preciso de entidades HTML.
- WebAIM: Links e Hipertexto - Links Hipertexto – Explore abordagens para garantir acessibilidade, que são importantes para quem se preocupa em tornar seu conteúdo acessível a todos os usuários.