Como adicionar botões de compartilhamento sem plugins em seu site

Alguns webmaster ou blogueiros, preocupados com o tempo de carregamento de suas páginas podem buscar outra alternativa, digamos, mais “arcaica” mas que vai, além de deixar o site com a sua cara, pode beneficiar muito no tempo de carregamento.

A solução é usar janelas com códigos "window.open", um modelo muito utilizado na internet, bem antes das redes sociais darem as caras. Mas lembre-se, não são aqueles “Pop up” chatos que podem ser bloqueados pelo navegador, mas sim uma nova aba independente e personalizável.

Para que isso funcione um dos requisitos é o link de compartilhamento da rede social que você deseja colocar. Abaixo estarão listados os links do Facebook, Twitter e Google+. Só lembre-se de alterar as partes em vermelho para links do seu blog/site.
Facebook

<a href="https://www.facebook.com/sharer/sharer.php?u=LINK_COMPLETO_DA_POSTAGEM_DO_SEU_SITE" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" rel="nofollow"><img src="URL_DE_ICONE_DO_FACEBOOK"></a>

Twitter

<a href="http://twitter.com/share?text=trecho do texto ou descrição de sua postagem aqui&amp;url=LINK_ENCURTADO_DA_POSTAGEM_DO_SEU_SITE" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" rel="nofollow"><img src="URL_DE_ICONE_DO_TWITTER"></a>

Google+

<a href="https://plus.google.com/share?url=LINK_COMPLETO_DA_POSTAGEM_DO_SEU_SITE" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" rel="nofollow"><img src="URL_DE_ICONE_DO_GOOGLE+"></a>

Assim como nos exemplos você pode utilizar imagens (de 1 Kb no máximo, cada), mas você pode optar por ícones do Bootstrap, que é gratuito, mas que pode ser um pouquinho mais pesado se for utilizado apenas para esse fim. Para implementar você deve incluir os scripts font-awesome.min.css (CSS de 23Kbs) e o fontawesome-webfont .woff (Fonte de 44Kbs) corretamente no header do documento. Para utilizar o ícones Bootstrap de redes sociais ao invés de imagens, delete <img src=" URL_DE_ICONE_DO_GOOGLE+">. Alguns exemplos:

<i class="fa fa-facebook" title="Compartilhe no Facebook"></i>

<i class="fa fa-twitter" title="Compartilhe no Twitter"></i>

<i class="fa fa-google-plus" title="Compartilhe no Google+"></i>

Para os demais ícones veja no site do Boostrap.