Botão de Like no post

Aproveitando uma pauta recorrente na nossa comunidade do Entreblogs — ter ou não caixa de comentários em nossos blogs e as possibilidades de interação entre autor e leitor — resolvi trazer pra cá um breve tutorial de como colocar botão de like no seu post. 

Obrigada Gabi por ceder essa belezinha pra mim e me permitir compartilhar com a galera. 

No seu tema

1. adicionar o CSS

   1.1 procurar por ]]></b:skin>

   1.2 acima dessa linha, colar o código abaixo

/* like button
-------------------- */
.likebtn-wrapper {
  margin-bottom: 1em;
}

.lb-style-custom .likebtn-icon {
  color: #000;
}

.lb-style-custom .lb-a:hover .lb-fi,
.lb-style-custom .lb-voted .lb-a .lb-fi {
  color: #e3bfce !important;
}

.lb-style-custom .lb-count {
  color: #000;
  font: bold 12px arial, sans-serif !important;
  margin-top: .1em;
  margin-left: .1em;
}

.lb-tt.lb-share-tt {
  visibility: hidden;
}

2. adicionar o código do botão no post

    2.1 procurar por <span class='post-labels'> 

    2.2 acima dessa linha, colar o código:

<b:if cond='data:blog.pageType == "item"'>      
<!-- LikeBtn.com BEGIN Lovelogic Modified -->
<span class='likebtn-wrapper ld-heart-btn lovelogic-heart-btn'
data-bg_c='transparent'
data-bg_c_v='transparent'
data-brdr_c='transparent'
data-counter_frmt='km'
data-counter_zero_show='true'
data-dislike_enabled='false'
data-ef_voting='push'
data-icon_dislike_show='false'
data-icon_l='hrt5'
data-icon_size='15'
data-popup_disabled='true'
data-share_enabled='false'
data-show_like_label='false'
data-theme='custom'
data-tooltip_enabled='false'
expr:data-identifier='data:post.id'/>

<script>(function(d,e,s){
if(d.getElementById("likebtn_wjs"))return;
a=d.createElement(e);
m=d.getElementsByTagName(e)[0];
a.async=1;
a.id="likebtn_wjs";
a.src=s;
m.parentNode.insertBefore(a, m)
})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- LikeBtn.com END -->
</b:if>

Só vai aparecer dentro do post porque o site que gera o botão só permite 01 botão por página. 

Alterar ícone do botão

No trecho data-icon_l='hrt5' você pode alterar hrt5 por outros ícones disponíveis na biblioteca do LikeBtn. Exemplo: str2. 

Caso queira um ícone personalizado você precisa desativar o ícone padrão e inserir um pseudo-elemento CSS. 

Exemplo: 

.lb-style-custom .likebtn-icon::before {
  content: "★";
  font-size: 16px;
}

E ocultar o original com:

.lb-style-custom .likebtn-icon {
  font-size: 0 !important;
  display: flex;
  align-items: center;
}

Obs.: No meu tema (acredito que seja algo do Blogger) o ícone personalizado direto não funciona. Para funcionar eu preciso descobrir qual o Unicode do ícone. Por exemplo, quero o ícone ✶ então em content: coloco \2736 deixando assim: content: "\2736";

Enfim, dá pra fazer um bocado de coisa (alterar ícone, adicionar animação, etc) mas isso aqui já é um começo.