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.


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>
Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Botões Sociais Lazy Loading para Blogger
Botões Sociais Lazy Loading para Blogger
Botões Sociais que ultiliza Lazy Loading, ajudando no carregamento do seu blog
Bloggermin
https://www.bloggermin.cashmore.com.br/2013/02/botoes-sociais-lazy-loading-para-blogger.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2013/02/botoes-sociais-lazy-loading-para-blogger.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar