domingo, 11 de outubro de 2015

Botão Share com contador

botão-share-com-contador-para-blogger


Hoje vamos apresentar como colocar botão social de compartilhamento com contador no blogger 
Widget botões de ações sociais foram distribuídos por meio de três mídias sociais populares, mas dentro de quatro botões, a partilha botão para Twitter, Facebook como botão, o botão de compartilhamento no Facebook, e botão de compartilhamento no Google Plus. Isso é ótimo para criar viralidade no seu blogger e tirar toda eficiência quando seu blogger tem um bom conteúdo para ser compartilhado. Siga os passos abaixo para instalar


Para instalar siga os passos 
Faça o login em blogger, vá para o painel do blog, e procure por modelo  em seguida, clique sobre os editar HTML com as teclas combinadas CTRL+F siga para a próxima etapa

2. Localize o código]]> </ b: skin> ou </ style>, em seguida, coloque o seguinte código no código acima antes disso

/* social share button with counter */
.sosmed-button-count {overflow:hidden;}
.sosmed-button {
margin:0 0;
height:67px;
float:left;
}
.sosmed-button .share {
float:left;
margin-right:10px;
display:inline-block;
}
.share-btn {
margin:15px 0 25px;
height:20px;
overflow:hidden;
}

3 Procure novamente <data: post.body /> (segundo) e colocar o código abaixo abaixo disso 

<div class='sosmed-button-count'>
<div class='sosmed-button'>
<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
<div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
</div>
</div>
<!-- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>-->
<div style='clear: both;'/>

4. Se o modelo do seu template não tem nenhum código de chamada Widget botão de compartilhamento como este, em seguida, coloque o seguinte código acima do </ body> 

<script>
  window.___gcfg = {lang: &#39;id&#39;};
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);
</script><div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

Em seguida salve o template e pronto 
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner