/
mail-share-button.html
57 lines (54 loc) · 4.01 KB
/
mail-share-button.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<!--
GitHub: HenriqueIni
https://www.blogcyberini.com/
-->
<html>
<head>
<meta charset="utf-8">
<title>Botão de e-mail</title>
<!--
A imagem do botão está em Base64 e foi obtida no IconFinder (https://www.iconfinder.com/icons/764976/mail_media_social_square_icon)
Se preferir, coloque este CSS num arquivo externo.
-->
<style>
.mail-share-button{
display: inline-block;
width: 40px;
height: 40px;
margin: 5px;
background-size: 100% 100%; /* ou 'contain' */
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA%2FPjxzdmcgaGVpZ2h0PSI2MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA2MCA2MCIgd2lkdGg9IjYwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8%2BPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0ic29pY2FsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI%2BPGcgaWQ9InNvY2lhbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTg3My4wMDAwMDAsIC02MzguMDAwMDAwKSI%2BPGcgaWQ9InNsaWNlcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTczLjAwMDAwMCwgMTM4LjAwMDAwMCkiLz48ZyBmaWxsPSIjMzQ5OERCIiBpZD0ic3F1YXJlLWZsYXQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE3My4wMDAwMDAsIDEzOC4wMDAwMDApIj48cGF0aCBkPSJNNzAyLjk5NTkzNyw1MDAgTDc1Ny4wMDQwNjMsNTAwIEM3NTguNjU4NjczLDUwMCA3NjAsNTAxLjMzNzMxIDc2MCw1MDIuOTk1OTM3IEw3NjAsNTU3LjAwNDA2MyBDNzYwLDU1OC42NTg2NzMgNzU4LjY2MjY5LDU2MCA3NTcuMDA0MDYzLDU2MCBMNzAyLjk5NTkzNyw1NjAgQzcwMS4zNDEzMjcsNTYwIDcwMCw1NTguNjYyNjkgNzAwLDU1Ny4wMDQwNjMgTDcwMCw1MDIuOTk1OTM3IEM3MDAsNTAxLjM0MTMyNyA3MDEuMzM3MzEsNTAwIDcwMi45OTU5MzcsNTAwIFoiIGlkPSJzcXVhcmUtNTgiLz48L2c%2BPGcgZmlsbD0iI0ZGRkZGRiIgaWQ9Imljb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4Mi4wMDAwMDAsIDE1MC4wMDAwMDApIj48cGF0aCBkPSJNNzIxLDUyMS40NjE1MzggTDczOC4zMDc2OTIsNTA2LjQ2MTUzOCBMNzAzLjY5MjMwOCw1MDYuNDYxNTM4IEw3MjEsNTIxLjQ2MTUzOCBaIE03MTYuMzI1MTc3LDUxOS44MDEwNTQgTDcyMSw1MjMuNjM4MjQgTDcyNS42MDE1ODEsNTE5LjgwMTA1NCBMNzM4LjMwNzY5Miw1MzAuNjkyMzA4IEw3MDMuNjkyMzA4LDUzMC42OTIzMDggTDcxNi4zMjUxNzcsNTE5LjgwMTA1NCBaIE03MDIuNTM4NDYyLDUyOS41Mzg0NjIgTDcwMi41Mzg0NjIsNTA3LjYxNTM4NSBMNzE1LjIzMDc2OSw1MTguNTc2OTIzIEw3MDIuNTM4NDYyLDUyOS41Mzg0NjIgWiBNNzM5LjQ2MTUzOCw1MjkuNTM4NDYyIEw3MzkuNDYxNTM4LDUwNy42MTUzODUgTDcyNi43NjkyMzEsNTE4LjU3NjkyMyBMNzM5LjQ2MTUzOCw1MjkuNTM4NDYyIFoiIGlkPSJtYWlsIi8%2BPC9nPjwvZz48L2c%2BPC9zdmc%2B"); /*Base 64 Icon by Xinh Studio*/
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<a href="" id="mail-share-btt" rel="nofollow" target="_blank" class="mail-share-button"></a>
<!-- Você pode colocar este script num arquivo externo -->
<script type="text/javascript">
//Constrói a URL depois que o DOM estiver pronto
document.addEventListener("DOMContentLoaded", function() {
var url = window.location.href; //url
var title = encodeURIComponent(document.title); //título
var mailToLink = "mailto:?subject="+title;
//tenta obter o conteúdo da meta tag description
var desc = document.querySelector("meta[name='description']");
desc = (!!desc)? desc.getAttribute("content") : null;
//se a meta tag description estiver ausente...
if(!desc){
//...tenta obter o conteúdo da meta tag og:description
desc = document.querySelector("meta[property='og:description']");
desc = (!!desc)? desc.getAttribute("content") : null;
}
//Se houver descrição, combina a descrição com a url
//senão o corpo da mensagem terá apenas a url
var body = (!!desc)? desc + " " + url : url;
//altera o link do botão
mailToLink = mailToLink + "&body=" + encodeURIComponent(body);
document.getElementById("mail-share-btt").href = mailToLink;
}, false);
</script>
</body>
</html>