Mostrando postagens com marcador Botões de compartilhamento do Facebook. Mostrar todas as postagens
Mostrando postagens com marcador Botões de compartilhamento do Facebook. Mostrar todas as postagens

Botões de compartilhamento do Facebook, Twitter e Google Plus no blog [Tutorial]

Como muitos devem ter percebido qe varios sites tem botões de compartilhamento ,  especialmente o botão "Compartilhar" do Facebook e Twitter, pois tem contadores como o do Google Plus.
Depois de alguns pedidos resolvi fazer um tutorial para ensinar como colocar eles no blog.



Vamos aprender como instalar?
Para você instalar estes botões do Facebook, Twitter e Google Plus no seu blog, e poder compartilhar facilmente suas postagens e imagens, é simples.

Para começar, faça backup de segurança do seu template.

Se ainda não tiver, crie um App no Facebook e o instale no blog. (COMO CRIAR E INSTALAR UM APP DO FACEBOOK)

Tendo seguido o passo acima, vá em MODELO >> EDITAR HTML e procure a linha:

]]></b:skin>

Cole ACIMA dela o seguinte código:

#fbvmp {
float: left;
margin-top: -1px;
margin-right: 40px;
margin-left: 10px;
}

Em seguida procure a linha:

<div class='post-footer-line post-footer-line-1'>

Se houver mais de uma dessa linha, é a segunda ocorrência. Cole abaixo dela o código seguinte:

<a class='twitter-share-button' data-lang='pt' data-via='NOMEUSUÁRIO' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweetar</a> <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>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
<div id='fbvmp'><div class='fb-share-button' data-action='recommend' data-colorscheme='light' data-height='The pixel height of the plugin' data-send='false' data-show-faces='true' data-type='button_count' data-width='The pixel width of the plugin' expr:href='data:post.url'/></div>

Note que onde está escrito NOMEUSUÁRIO, você deve substituir por seu nome de usuário do Twitter sem o @. Cuide para não apagar nenhuma aspa, substitua somente NOMEUSUÁRIO.

Salve!

Agora vá em Configurações>>Preferência de pesquisa no seu painel Blogger. No alto dessa página, em Metatags, clique em editar e depois selecione Sim. Escreva uma descrição para seu blog e salve. Agora sempre que você criar ou reeditar uma postagem lá no editor de postagens do Blogger, aparecerá na coluna a esquerda a opção "Preferência de pesquisa". Alí escreva a descrição da sua postagem. Esta deverá aparecer quando alguém recomendar/compartilhar sua postagem no Facebook. Se não houver descrição do post, aparecerá a do blog. Simples, não é?
xitertop.blogspot.com.br
xitertop.blogspot.com.br