Compartilhamento com a Mídia Social

Hoje em dia todo mundo usa a Mídia Social pra tudo. Seja qualquer delas, Twitter, Facebook, Tumblr, Linked in, Ask.fm, Google+ (Alguém usa? Manifeste-se), Myspace, Pinterest, o finado Orkut, entre outros (a lista pode não acabar mais). E chega a ser interessante o quão rápido a informação é espalhada por essas mídias, e isso pode ser muito útil, afinal você fica sabendo de coisas que podem ser importantes (ou não) na sua vida.

Quem como eu, costuma blogar por aí pelos diversos assuntos, além de estar sempre antenado nas notícias e procurando o melhor conteúdo pra postar no blog, se importa:

1º. Com a aparência do blog. Quanto mais bonito, mais bem visto ele é. Claro que o maior fator de uma visita é o conteúdo, mas um visual clean causa uma boa impressão né?

2º. Com a divulgação. Se não tem divulgação, não tem visita. E se não fosse pra ser lido não era um blog, era um diário secreto.

Então seria melhor divulgar de um jeito bonito. E nada melhor pra divulgar seu blog e suas novas postagens, do que os próprios leitores compartilhando o conteúdo. E isso me levou a querer implantar algumas mudanças por aqui. Resolvi mudar os Botões de Compartilhamento Social que ficam logo abaixo do post, porque, convenhamos, aquele do Blogger é triste.

Então vem comigo, que eu vou te ajudar a trocar desse: 

Por esse:

Vamos às etapas!

• Vá em Design, e no painel do seu blog, vá em Layout.
• Vai aparecer a estrutura do seu blog, clique em Editar no campo “Postagens no Blog”
• Marque a opção Mostrar botões de compartilhamento. Salve e Feche.
• Agora vá em Modelo e em seguida Editar HTML, agora vem a aparte complicada.

No HTML do seu blog, busque por <b:includable id='shareButtons' var='post'>, achou? Logo abaixo, estará esse código:

<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;'  (O Código é enorme, encurtei aqui […]) text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if>
</b:includable>

• Apague ele todo, e troque por esse:

 <!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(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 = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(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>
<!-- Twitter -->
<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>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
<style type='text/css'>
#pin-wrapper > a {background-image:none !important;}
</style>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End –>

• Visualize. Se estiver tudo ok, salve e pode fechar !

Depois disso você pode também acompanhar se seus leitores estão compartilhando as informações do seu blog na Mídia Social !

E aí, foi útil? Então pór favor, curtam aqui em baixo ! HAHAHA