Como colocar Botão Compartilhar do WhatsApp no Blogger

Aprenda como criar um botão de compartilhamento de posts do seu blog ou site hospedados no Blogger pelo WhatsApp sem plugins de terceiros como o AddThis ou o ShareThis.
Os temas mais recentes do Blogger (Contempo, Soho, Empório, Notável e Essencial), vem com um ícone de compartilhamento de post (que funciona muito bem), mas a maioria dos usuários não o acessam. E porque? É uma questão lógica: quando vemos, tocamos. Se não há um estímulo visual de cor ou da palavra, os usuários passam despercebidos pelo botão. E esse ícone de compartilhamento dos novos temas é bem limpo.
O código de compartilhamento no WhatsApp que veremos a seguir é simples e fácil de implementar. O melhor disso é que o link compartilhado funcionará tanto no desktop, quanto em dispositivos móveis. Assim você obtêm um melhor engajamento e atrai mais visitas para o seu blog. 😉

Vamos começar pelo código HTML. Você pode decidir se esse botão ficarão no cabeçalho do post ou no final do post.
Abra o editor html do Blogger.
Para isso, procure no painel, ao lado esquerdo a opção TEMA > Clique nos três pontinhos > Editar HTML.
Feito isso, clique em qualquer área do código do tema, aperte as teclas CTRL + F, que te permitirá pesquisar as seções do template. Dentro da pesquisa, digite:

<data:post.body/>

Nessa área aparecerá todo o conteúdo das postagens do seu blog.
Acima do código, fica o cabeçalho da postagem, depois do título.
Abaixo, é onde fica o rodapé da postagem, antes dos comentários.

Escolha onde o botão ficará melhor posicionado. Copie e cole o código abaixo:

<b:if cond='data:blog.isMobileRequest'>                
<a class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/> Compartilhe</a>
<b:else/>
<a class='whatsapp' expr:href='&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=900, height=550, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='noopener' target='_blank'><i class='fa fa-whatsapp'/> Compartilhe</a>
</b:if>

Como estilizar o Compartilhar no WhatsApp com CSS.

Neste exemplo, estamos trabalhando com o ícone do WhatsApp que não está instalado no Blogger, para isso, precisaremos importar a biblioteca de ícones Font Awesome e instalá-la antes da tag de fechamento </head> do nosso código:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Escolha qualquer modelo abaixo, depois copie e cole o código CSS do botão.

Botão WhatsApp Modelo Flat

Compartilhe

Aperte as teclas CTRL + F novamente, e dentro da barra de pesquisa, digite:

]]></b:skin>

Acima desse código, copie e cole o seguinte:

.whatsapp {
background-color:#25D366;
color:#ffffff;
font-size: 14px;
font-family: "Roboto", sans-serif;
display: initial; 
padding: 05px 15px;
border-radius: 04px;
text-align:center;
position:absolute
}
.whatsapp a{
color:#ffffff;
text-decoration: none
}
		

Botão WhatsApp Modelo Arredondado

Compartilhe

Aperte as teclas CTRL + F novamente, e dentro da barra de pesquisa, digite:

]]></b:skin>

Acima desse código, copie e cole o seguinte:

.whatsapp {
background-color:#25D366;
color:#ffffff;
font-size: 14px;
font-family: "Roboto", sans-serif;
display: initial; 
padding: 05px 15px;
border-radius: 25px;
text-align:center;
position:absolute
}
.whatsapp a{
color:#ffffff;
text-decoration: none
}
		

Botão WhatsApp ícone redondo

Aperte as teclas CTRL + F novamente, e dentro da barra de pesquisa, digite:

]]></b:skin>

Acima desse código, copie e cole o seguinte:

.whatsapp {
background-color:#25D366;
color:#ffffff;
width: 15px;
height: 15px;
display: initial; 
padding: 0.5em;
border-radius: 50%;
text-align:center;
position:absolute
}
.whatsapp a{
color:#ffffff;
text-decoration: none
}
	  

Botão WhatsApp ícone redondo grande

Aperte as teclas CTRL + F novamente, e dentro da barra de pesquisa, digite:

]]></b:skin>

Acima desse código, copie e cole o seguinte:

.whatsapp {
background-color:#25D366;
color:#ffffff;
width: 30px;
height: 30px;
display: initial; 
padding: 0.7em;
border-radius: 50%;
text-align:center;
position:absolute
}
.whatsapp a{
color:#ffffff;
text-decoration: none
}
		

Botão WhatsApp ícone Quadrado

Aperte as teclas CTRL + F novamente, e dentro da barra de pesquisa, digite:

]]></b:skin>

Acima desse código, copie e cole o seguinte:

.whatsapp {
background-color:#25D366;
color:#ffffff;
font-size: 15px;
display: initial; 
padding: 8px;
border-radius: 04px;
text-align:center;
position:absolute
}
.whatsapp a{
color:#ffffff;
text-decoration: none
}

Botão WhatsApp ícone quadrado grande

Aperte as teclas CTRL + F novamente, e dentro da barra de pesquisa, digite:

]]></b:skin>

Acima desse código, copie e cole o seguinte:

.whatsapp {
background-color:#25D366;
color:#ffffff;
font-size: 15px;
display: initial; 
padding: 8px;
border-radius: 04px;
text-align:center;
position:absolute
}
.whatsapp a{
color:#ffffff;
text-decoration: none
}