Tutorial: Como adicionar botões sociais flutuantes ao seu blog

exe8422 · 10/09/2014

Neste tutorial vou ensinar a vocês como colocar botões sociais nos seus sites/blogs com wordpress (serve também para o blogger)

1) Wordpress:

- Ir em aparência > Widgets
- Selecionar o widget de texto e arrastá-lo para a barra lateral
- Copiar e colar o código que aparece a seguir
- Depois em Salvar

<style type="text/css">
.sb{
background:#f0f0f0;
cursor😛ointer;
color:#fff;
padding:4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px; margin-left:8px;
font:12px sans-serif;
}
.sb:hover{
background:#777;
}
.tl {text-align:center;font-size:10px;font-weight:bold }
#Ps {position:fixed; bottom:15%; margin-left:-100px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#fff;border: 1px solid #f7f7f7; padding:0 0 2px 0;z-index:10;}
#Ps .sb {float:left;clear:both;margin:5px 2px 0 5px;}
#Ps:hover {-moz-border-radius:6px;
-moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
-webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);border: 1px solid #ddd;}
</style>
<div id='Ps'>
<div class='sb' id='fblb'>
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
</div>
<div class='sb' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sb' id='gpo'>
<a class="addthis_button_google_plusone" g😛lusone:size="tall"></a>
</div>
<div class='sb' id='Tw'>
<a class="addthis_button_tweet" tw:count="vertical"></a></div>
<div class='sb' >
<a class="addthis_counter"></a>
</div>
<div class="tl">
<a href="http://www.trickolla.com" target="_blank" >Get This</a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-50bf6c151159d2c0"></script>
</div>

Dica:
se você está vendo uma posição ruim da barra social no seu site pode mudar o valor: bottom:15%
Para mudar a posição para a esquerda mexa no valor: margin-left:-100px

Se tiverem algum problema não hesitem em consultar :encouragement:

wong · 10/09/2014

Obrigado pelo tutorial, é bom saber essas coisas, embora já existam plugins que fazem isso.

lordskorpius · 10/09/2014

wong disse:
Obrigado pelo tutorial, é bom saber essas coisas, embora já existam plugins que fazem isso.

Deveria ser ao contrário, sempre que você puder fazer algo dependendo menos de plugins, melhor.

Não vou dar curtida no tutorial porque já foi visto tantas vezes, é só um copia e cola do código :distant:

alexg · 10/09/2014

Caiu como uma luva, só preciso adaptá-lo!

E claro, melhor sem plugins! Thanks

exe8422 · 10/09/2014

lordskorpius disse:
Deveria ser ao contrário, sempre que você puder fazer algo dependendo menos de plugins, melhor.

Não vou dar curtida no tutorial porque já foi visto tantas vezes, é só um copia e cola do código :distant:

Só fiz isso porque não entendia bem como explicavam em outros tópicos, então fiz isto para novatos como eu.

- - - Atualizado - - -

alexg disse:
Caiu como uma luva, só preciso adaptá-lo!

E claro, melhor sem plugins! Thanks

Um prazer amigo, você pode editar o código do seu jeito :encouragement:

alexg · 10/09/2014

Só que há um problema, quando você clica em compartilhar no twitter aparece assim:

[descrição] meusite.com/#.VBD9nmuvf6s.twitter

Aliás, existe alguma forma de colocar compartilhar via twitter?

exe8422 · 10/09/2014

alexg disse:
Só que há um problema, quando você clica em compartilhar no twitter aparece assim:

[descrição] meusite.com/#.VBD9nmuvf6s.twitter

Aliás, existe alguma forma de colocar compartilhar via twitter?

Fale comigo por mp para não desvirtuar o post.

luismaster2009 · 10/09/2014

E para colocar em uma página web, onde faço isso?

exe8422 · 10/09/2014

luismaster2009 disse:
E para colocar em uma página web, onde faço isso?

Você usa algum gerenciador de conteúdo? ou é html puro?

luismaster2009 · 10/09/2014

exe8422 disse:
Você usa algum gerenciador de conteúdo? ou é html puro?

É um script, estilo taringa.

exe8422 · 10/09/2014

luismaster2009 disse:
É um script, estilo taringa.

Fale comigo por MP

braianvel · 10/09/2014

muito bom o tutorial, é legal não ter que depender tanto dos plugins :encouragement:

exe8422 · 10/09/2014

braianvel disse:
muito bom o tutorial, é legal não ter que depender tanto dos plugins :encouragement:

Obrigado por passar aqui amigo, se tiver algum problema não hesite em me perguntar.

alexg · 10/09/2014

Agora te envio uma MP.
Aliás, seria bom incluir isso mas nos POSTS. Não carregar em um widget, e sim colocar diretamente no single.php, para que tuíte o POST...

- - - Atualizado - - -

Alguém conhece um código parecido?

É que este tem um problema...

- - - Atualizado - - -

Bom colegas, vou explicar para vocês qual é a desta barra:

Fonte original:
http://www.trickolla.com/2012/12/how-to-add-floating-social-widget-for.html#.VBE5zS5dWyM

Como podem ver, no final há um código que começa com um sinal de "#", eu não sei para que serve, então se alguém souber, nos explique. Imagino que seja algo do addthis para fazer rastreamento, MAS SUJA.

Passei um tempo reconstruindo a barra, pegando os botões com seus respectivos desenvolvedores, já que a única coisa que eu ia usar era o CSS para fazer o widget flutuante, que é o que vale a pena 🙂 para esquecer o "#", no final, descobri que o problema é o seguinte código:

Inserir CODE, HTML ou PHP:

<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>

Que, como vemos, acho que diz para adicionar um código ao endereço... enfim, uma bobagem...

Então estou me perguntando se uso o código geral e só tiro essa linha, ou se fico com os meus botões personalizados e uso o CSS.

Da minha parte é isso, acho que esta barra funciona super GENIAL!! Só tirem essa linha, ou não sei se é algo "Importante" para o addthis, mas da minha parte prefiro tirá-la...

exe8422 · 11/09/2014

alexg disse:
Agora te envio uma MP.
Aliás, seria bom incluir isso mas nos POSTS. Não carregar em um widget, e sim colocar diretamente no single.php, para que tuíte o POST...

- - - Atualizado - - -

Alguém conhece um código parecido?

É que este tem um problema...

- - - Atualizado - - -

Bom colegas, vou explicar para vocês qual é a desta barra:

Fonte original:
How to Add Floating Social Widget For Websites , Blogger , Wordpress | Trickolla

Como podem ver, no final há um código que começa com um sinal de "#", eu não sei para que serve, então se alguém souber, nos explique. Imagino que seja algo do addthis para fazer rastreamento, MAS SUJA.

Passei um tempo reconstruindo a barra, pegando os botões com seus respectivos desenvolvedores, já que a única coisa que eu ia usar era o CSS para fazer o widget flutuante, que é o que vale a pena 🙂 para esquecer o "#", no final, descobri que o problema é o seguinte código:

Inserir CODE, HTML ou PHP:

<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>

Que, como vemos, acho que diz para adicionar um código ao endereço... enfim, uma bobagem...

Então estou me perguntando se uso o código geral e só tiro essa linha, ou se fico com os meus botões personalizados e uso o CSS.

Da minha parte é isso, acho que esta barra funciona super GENIAL!! Só tirem essa linha, ou não sei se é algo "Importante" para o addthis, mas da minha parte prefiro tirá-la...

Acabei de me conectar, desculpa por não ter te respondido antes

pulga91 · 11/09/2014

Por que não se registrar diretamente no addthis e obter o código pessoal, que te dá as estatísticas dos cliques nos compartilhamentos e além disso dá para personalizar o código, inclusive incluindo um share para dispositivos móveis, adicionar botões, ocultá-los, escolher quando a barra flutuante desaparece, entre outras coisas

alexg · 11/09/2014

pulga91 disse:
Por que não se registrar diretamente no addthis e obter o código pessoal, que te dá as estatísticas dos cliques nos compartilhamentos e além disso dá para personalizar o código, inclusive incluindo um share para dispositivos móveis, adicionar botões, ocultá-los, escolher quando a barra flutuante desaparece, entre outras coisas

O código que o Addthis dá nos gratuitos inclui sim uma barra como essa, mas os botões não dão estatísticas, ou seja, para o facebook é só um botão, não aparece como este que te diz quantos likes já tem... Foi o que eu vi, mas se você puder me dizer como, eu agradeço

Tutorial: Como adicionar botões sociais flutuantes ao seu blog

exe8422

wong

lordskorpius

alexg

exe8422

alexg

exe8422

luismaster2009

exe8422

luismaster2009

exe8422

braianvel

exe8422

alexg

exe8422

pulga91

alexg

Tópicos similares