Botões Sociais Lazy Loading para Blogger

Botões Sociais que ultiliza Lazy Loading, ajudando no carregamento do seu blog

Botões de compartilhamento social são conhecidos por seus maus efeitos sobre a velocidade de carregamento da página. Por algum tempo eu estava tentando encontrar uma solução para este problema nas linhas do Lazy Load Plugin para imagens, eu estava inspirado pela forma como Blogger lidou com o problema nas Visualizões Dinâmicas, carregando os estilos dos botões e os scripts em mouse-hover. Então me deparei com a solução de Taylor Fausak e fiz alguns ajustes para fazê-los trabalhar no Blogger.

DEMO

Tutorial
Passo 1:

A primeira coisa a fazer é entrar no Modelo | Editar Html e marcar a opção Expandir modelos de widgets.

Passo 2: Css

Procure por ]]></b:skin> e adicione antes dele o CSS abaixo.

.fb-like {display:inline !important;}
#facebook-widget, .twitter-widget, .google-widget, .facebook-widget,#google-widget,#twitter-widget { color: #ffffff !important; display: inline-block;line-height: 22px;text-align: center;text-decoration: none;width: 55px;}
#facebook-widget, .facebook-widget { background: #3b5b99; }
#google-widget, .google-widget { background: #dd4b39; }
#twitter-widget ,.twitter-widget {background: #33ccff;}

Passo 3: Script

Agora faça uma busca pela tag </body> e adicione acima dele o seguinte JavaScript:

<script type='text/javascript'>
//<![CDATA[
var element, script ;
element = document.getElementById('google-widget');
element.onmouseover = function () {
this.onmouseover = null;
this.parentNode.removeChild(this);
script = document.createElement('script');
script.async = true;
window.___gcfg = {lang: 'pt-BR'};
script.src = '//apis.google.com/js/plusone.js';
document.body.appendChild(script);
};
element = document.getElementById('facebook-widget');
element.onmouseover = function () {
this.onmouseover = null;
this.parentNode.removeChild(this);
script = document.createElement('script');
script.async = true;
script.src="//connect.facebook.net/pt_BR/all.js#xfbml=1";
document.body.appendChild(script);
};
element = document.getElementById('twitter-widget');
element.onmouseover = function () {
this.onmouseover = null;
this.parentNode.removeChild(this);
script = document.createElement('script');
script.async = true;
script.src = '//platform.twitter.com/widgets.js';
document.body.appendChild(script);
};
//]]>
</script>

Passo 4: Botões
Agora temos duas opções, mostrar os botões de compartilhamento apenas nas páginas internas(de postagens), ou nas páginas de índice também (como a página inicial, página de marcadores, etc).

Mostrar apenas nas páginas de postagens

Busque por <div class='post-header-line-1'/> e logo abaixo adicione o seguinte código HTML:

<div style="margin: 0px auto;text-align: center;" >
<b:if cond='data:blog.pageType == "item"'>
<a href="#" id='twitter-widget' >Tweetar</a>
<a class='twitter-share-button' data-count='horizontal' data-lang='pt' href='https://twitter.com/share'/>
<a href="#" id='google-widget' >+1</a>
<span class='g-plusone' data-size='medium'/>
<a href="#" id='facebook-widget' >Curtir</a>
<div class='fb-like' data-layout='button_count' data-send='false'/>
</b:if>
</div>

Para páginas de índice, assim como páginas de postagens

Nesta implementação, existem botões fallback para todas as páginas, exceto aa páginas de postagens. Quando clicado dão um Popup da respectiva opção de compartilhamento.
Busque por <div class='post-header-line-1'/> e logo abaixo adicione o seguinte código HTML:

<div style='margin: 0px auto;text-align: center;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='#' id='twitter-widget'>Tweetar</a>
<a class='twitter-share-button' data-count='horizontal' data-lang='pt' href='https://twitter.com/share'/>
<a href='#' id='google-widget'>+1</a>
<span class='g-plusone' data-size='medium'/>
<a href='#' id='facebook-widget'>Curtir</a>
<div class='fb-like' data-layout='button_count' data-send='false'/>
<b:else/>
<a class='twitter-widget' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;'>Tweetar</a>
<a class='google-widget' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;'>+1</a>
<a class='facebook-widget' expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;'>Curtir</a>
</b:if>
</div>