Gadget Box Flutuante com botões de redes sociais para Blogger

Siga o Blog no Facebook e no Twitter

Em meu post anterior, publiquei um plugin para colocar o Box Flutuante com os botões de compartilhar que temos aqui no [ Ferramentas Blog ], mas para usuários do Wordpress. Agora vou ensinar como inserir o widget no Blogger/BlogSpot que funcionará da mesma forma, como é o plugin para WP. você poderá adicionar facilmente em seu blog para facilitar a divulgação de seus conteúdos.

Se olhar na lateral desse post, como de todos aqui do Blog, verá uma barra flutuante no lado esquerdo, com ícones e botões de divulgação de conteúdo em redes sociais. Nosso primeiro modelo foi para usuários do WordPress.org, como você pode ver no link abaixo:

Mas agora também criamos a versão do código para quem usa o Blogger e quer colocar esse mesmo recurso com os mesmos efeitos.

Backup do template do Blogger/Blogspot:

Antes de fazer qualquer alteração em seu template, realize um backup do mesmo em Modelo > “Fazer backup / Restaurar modelo”:

Basta clicar no botão “Fazer download do modelo completo” e salvar o arquivo em seu computador.
Caso algo saia errado durante a instalação, basta voltar a esta página e selecionar o arquivo baixado e fazer seu upload.

Para mais detalhes, leia também:

Instalando o Box Flutuante em seu Blogger/Blogspot:

Vamos mostrar todo o procedimento pelo novo painel do Blogger que você pode acessar usando o endereço http://draft.blogger.com/. Se você não sabia, o Blogger está com um novo layout e estrutura de painel: Novo Blogger liberado para todos os usuários.

Com este código que vamos ensinar, são inseridos automaticamente os botões das seguintes redes sociais:

  • Botão de RT do Twitter
  • Botão Google +1
  • Botão “Curtir” do Facebaook
  • Botão “Enviar” de grupos do Facebook

Vá até o menu “Modelo” e procure por “Editar modelo”, então clique para “Expandir modelos de widgets”:

Depois de feito isso procure pela tag </head> (utilize o atalho CTRL + F para realizar a busca). Exatamente ACIMA dela você irá colar o seguinte código:

Ainda nesta mesma página e dentro do código fonte do Blogger onde você está, procure pela tag </body>. ACIMA dela cole este outro código:

Finalmente procure pela linha de código <div class=’post-footer-line post-footer-line-3′> e cole ABAIXO dela este código:

Agora clique no botão “Salvar modelo” e veja o resultado que irá aparecer APENAS dentro das páginas dos posts e não na home do blog.

Personalizando o widget:

Podemos ainda personalizar o widget, primeiro de tudo mudando o usuário do Twitter. Procure pelo trecho:

Nele basta substituir o “ferramentasblog” pelo seu nome de usuário no Twitter.

É possível também modificar a distancia entre o post e o Widget, para isso basta alterar a margem que for determinada na seguinte linha:

Basta alterar o -100px que é encontrado em “margin:0 0 0 -100px“. Quanto maior o numero negativo, mais longe do post ele irá ficar.

E ainda nesta parte do código podemos alterar a posição inicial do widget na tela, para isso altere o valor de “top:200px“.

Finalizando:

Agora quando eu estava escrevendo este post, o Marcos Lemos lembrou que já havia publicado algo similar aqui em:

O post é de um ano atrás e o resultado final, como já disse é similar ao o que eu ensinei aqui hoje. Porém este widget novo conta com os botões sociais do momento, ele aparece apenas dentro dos posts e conta com efeitos ao descer a tela. Portanto é mais completo e mais aconselhável.

Código atualizado em 30/01/2012:

Atualizamos o código inserindo as novas versões dos botões do Twitter, Google Plus e Facebook (atualizados com código compatível ao HTML5), além de realizar outras melhorias nos códigos.
Esta atualização deverá ajudar todos aqueles que estavam com dificuldades de inserir os botões em seus blogs.

FBlogHost - Hospede seu Blog

502 Comentários

    • Rodolpho, você colocou o botão para ficar do lado direito do blog?
      Se foi isso irá acontecer, porque o Enviar/Send do Facebook faz aparecer uma caixa para o lado direito e criar realmente a barra lateral.
      Meu conselho é que você use ele do lado esquerdo do blog ou tire o botão Enviar/Send.
      Ali no código do Facebook aparece assim: send=’true’.
      Mude ele para: send=’false’ e problema resolvido.

      Responder

  1. Amigo, a um erro nesse paragrafo “do código para que(QUEM) usa o Blogger e quer colocar esse mesmo recurso com os mesmos efeitos.”
    Ps: Adorei a dica..

    Responder

  2. Adoreiiiiiiiiii!!!!! Já coloquei no meu blog ;DD Só uma coisa quando eu vou em ENVIAR e mando o para um grupo diz: encontramos o seguinte erro ao enviar sua mensagem.

    Só q nao diz qual é o erro =//

    Estou fazendo alguma coisa errada será??

    Abraçoss

    Responder

    • O script do slide esta entrando em conflito com o botão de compartilhar.
      Esse slide é só na home mesmo?

      Coloca ele entre:
      <b:if cond='data:blog.pageType == "index"'>
      SEU CÓDIGO AQUI.
      </b:if>

      Coloquei o script ai dentro, assim vai fazer ele abrir só na home e talvez não vai dar mais problema com o Box Flutuante.

      Responder

        • Edigley,
          Outros aqui já conseguiram e estão usando sem problemas.
          Pode ser algum conflito com outros recursos em seu blog, por isso recomendamos o teste antes de aplicar. Também reveja os passos e leia com atenção para ver se você não esqueceu ou não trocou nada indevido.

          Responder

          • Marcos,
            Eu instalo o box flutuante com sucesso e facilidade, personalizo ele e tudo mais. O problema é que sempre ocorre conflito com o script do slide (que fica na Home do blog) deixado-o estático, ou seja, sem funcionamento.
            Estou revendo o script do slide.

            O problema também persiste quando instalo outros scripts como no post: “Como usar os sistemas de comentários do Blogger e Facebook ao mesmo tempo”, do qual queria muito utilizá-lo.

            A certeza é absoluta quanto ao conflito com o script do slide, pois em outros blog cujo template é semelhante (sem slide), não ocorre esse bug.

            Grato pela atenção.

            Responder

  3. Aqui dá esse erro:

    The value of attribute “type” associated with an element type “null” must not contain the ‘<' character.

    O que eu faço?

    Responder

  4. Apesar de ser um belo gadget, no meu blog não iria cair bem, pois uso duas barras laterais (uma de cada lado). Iria atrapalhar o menu de categorias.

    Responder

  5. Em alguns momentos, as explicações foram insuficientes e tive de consultar outros sites para conseguir entender.
    Quando copiei e colei os tags, vieram juntos os numeros das linhas e tive de tirar um a um.
    Não consegui instalar o link do facebook.

    Responder

    • Rodinei,

      Para copiar os códigos, basta parar o mouse por cima da área de códigos que aparecerá o botão de “Copiar” (Copy). Assim você não teria tido dificuldade alguma.

      Responder

    • Achei super facil de instalar! Só achei também q teria que explicar que tme q tirar os numeros! Mais vc nota ao instalar que eles aparecem dai é só ir la e tirar!! Nada que gere problemas!! A unica coisa q nao funciona no meu é que quando vou em Enviar e mando para um grupo, da um erro!! =/ Não sei o que está acontecendo, quando envio para uma pessoa da para um grupo não!!

      Responder

    • Impossível dar algum erro assim, ainda mais porque o Windows Explorer é o que você usa para abrir pastas no seu computador. O que você usa para navegar na internet se chama Internet Explorer.

      Quanto ao código, várias pessoas estão usando em seus blogs, tanto no Blogger como no WordPress, são apenas os scripts dos botões mais um Jquery minúsculo, nada disso tem incompatibilidade alguma com qualquer browser.

      Caso você tenha tido algum problema, posso lhe garantir, sem sombra de dúvidas que este Widget não foi o que causou isso.
      Com certeza tem outra coisa no seu site ou você fez algo errado que gerou isso.

      Responder

  6. No meu eu testei, funciona, mas tira a movimentação do slide quando poe esse script. Se houvesse como adicionar o mesmo sem perder o slide seria muito interessante.
    Não teria como adicionar o mesmo como widget? Tipo, em elementos de página?

    Responder

  7. Olha testei novamente o código, mas novamente aparece esse erro na pagina do Internet Explorer:

    Mensagem: ‘offset.top’ é nulo ou não é um objeto
    Linha: 633
    Caractere: 1
    Código: 0

    E no Internet Explorer os botões do Curtir e Enviar do Facebook não aparece. Agora no Google Chrome funciona direito.

    Tem esse erro aqui também:

    Mensagem: ‘root’ é nulo ou não é um objeto
    Linha: 6
    Caractere: 1252
    Código: 0
    URI: http://connect.facebook.net/pt_BR/all.js#appId=102576646508501&xfbml=1

    Responder

    • Existe algo que não esta dando certo com os scripts, veja que tem problema com o script do Facebook.

      Veja que aqui no Ferramentas Blog usamos os mesmo scripts e no Internet Explorer não é apontado nenhum desses erros que você relatou.

      Responder

    • É bem provável que você está copiando o código de forma errada ou modificando algo indevido.
      Veja se está tudo como nos passos descritos e não modifique nada além do que for recomendado.

      Responder

  8. Só falta vocês ensinarem como fazer aquele efeito com a barrinha do menu no topo do Ferramentas Blog ! rs
    Obrigado pelo código , funcionou direitinho.

    Responder

  9. Olá Marcos e Cláudio,

    Como posso fazer para colocar essa barrinha com os botões de compartilhar logo abaixo do resumo dos posts na home do FB?

    Estou tentando algo parecido e o botão do google plus hora gera conflito entre o botão da barrinha e o botão do box flutuante e hora gera conflito entre as os botões de cada resumo.

    Como é o código que vcs usam, pois vejo que aqui no FB funciona tudo muito bem! Obrigado pela ajuda.. Abraço..

    Alberto Lozéa

    Responder

  10. Pingback: Gadget de tweets e perfil do Twitter para Blogs | [ Ferramentas Blog ]

  11. Eu já tinha lido, mas de qualquer forma me ocorreu agora de mudar o numero para positivo e aumentar a distancia:
    #fblog-box {border:1px solid #ccc; padding:5px; background:#2F4F4F; z-index:9999; display:block; position:absolute; top:300px; float:right; margin:0 0 0 +552px; text-align:center;}
    E com +552 deu certinho, da forma como queria:
    http://blogtransferencia.blogspot.com/2011/08/rammstein-mutter-2001.html
    Agora tentar fazer as modificações para adicionar comentários via facebook conforme o outro post.

    Responder

    • Conselho você a desativar o botão enviar do Facebook, assim não vai ficar a barra de rolar em baixo da sua página.
      Isso acontece porque o Facebook só permite deixar o box onde mostra as coisas para compartilhar pro lado direito.

      Você pode desativar assim:

      <div id='fb-root'/><fb:like expr:href='data:post.url' font='arial' layout='box_count' send='true' show_faces='false' width='54'/>

      Onde esta true, mude para false e pronto.

      Responder

  12. Aos Amigos que pretendem usar esse Box, vão necessitar substituir o pt_BR do like Button do Facebook por en_US ou pt_PT, por algum motivo o Script Java que contém o pt_BR não está Funcionando, como dá pra ver ai ao Lado que Não está aparecendo o “Curtir” nem o “Send” do Facebook…
    a Solução é Simples, e Serve também para quem usa o Sistema de Comentários do Facebook, se Não substituir não vai funcionar.
    Espero que eles Resolvam logo isso !
    Abraços a todos

    Responder

  13. Esta LOUCO para colocar este menu flutuante, mas ai entra meu desespero,

    Não consegui colocar de deixo nenhum foi ai que decidi que iria mudar todo o template do meu blog pois achava que o código estava sujo e mal organizado, mas ao fazer isso descobri o porque o menu não funcionava em meu blog ai vai a dica

    no meu content-wrapper ele estava com essa propriedade overflow:hidden;
    então apenas apaguei está linha overflow:hidden; e bingo!!!

    Se alguem não tiver conseguindo tenta isso!

    Responder

  14. Estava LOUCO para colocar este menu flutuante, mas ai entra meu desespero.

    Não consegui colocar de jeito nenhum, foi ai que decidi que iria mudar todo o template do meu blog pois achava que o código estava sujo e mal organizado, mas ao fazer isso descobri o porque o menu não funcionava em meu blog ai vai a dica

    no meu Content-Wrapper ele estava com essa propriedade Overflow:Hidden;
    então apenas apaguei está linha Overflow:Hidden; e bingo!!!

    Se alguem não tiver conseguindo tenta isso!

    Responder

  15. Caras, só tenho a agradecer.

    Foi o único que funcionou bem no template do meu blog e até combinou com o visual!

    Tem como arredondar as bordas? seria animal!

    Valeu mesmo =]

    Abs^^

    Responder

  16. Ótimo post!
    Mas tem como adaptar a um modelo com esse exemplo… “http://i56.tinypic.com/2lmowid.jpg”
    Que o usuário possa compartilhar por email, orkut, msn e imprimir o artigo??

    Responder

  17. O meu ficou bom, mas ele não segue a página como o do seu site. Queria saber se é assim, ou se eu coloquei algo errado… Vlw, e parabens pelo site, com imagens explicativas, evitando perguntas simples de quam num mexe muito bem, e também ajudando eles a aprenderem.

    Responder

    • aew, foi mal, ta seguindo a página, é pq ainda num tinha carregado, e a net bugou. ótimo poste, só acho que você deveria fazer uma extensão desse post, falando como adicionar outras redes sociais nessa caixinha. caso faça isso, estarei aqui para ver, vlw.

      Responder

  18. Olá!!

    Adorei o codigo e em um dos meus Blogs deu certo, mas no http://toquenatural.blogspot.com não aparece esta linha >> post-footer-line-3

    Tb coloquei o Social bar no meu blog http://toquenatural-importados.blogspot.com/, vc saberia se posso usar o mesmo codigo nos 2 Blogs?
    Assim ficava tudo junto e as pessoas não precisariam se cadastrar separadamente.

    Outra coisa, caso eu não consiga fazer essas mudanças no primeiro Blog vc faria esse serviço? se fizer poderia me mandar um orçamento?
    Obrigada e um otimo dia!!

    Responder

    • Estava olhando o código aqui do seu blog. Tenta colocar script então de baixo de

      <div id="post-footer-box">

      Desta forma acredito que irá funcionar corretamente. Qualquer problema por favor informe.

      Responder

      • Muito obrigada por responder tão rápido.

        Coloquei abaixo da linha que vc mandou mas não apareceu.

        Não deu erro, esse meu template é estranho (e antigo) tudo fica invisível
        Ele tem a opção no Layout de Mostrar botões de compartilhamento, mas quando ativo ele fica invisível ;o(

        Responder

    • Sobre o código igual, você diz de usar o mesmo Twitter para os dois? Seria isso?

      Caso seja isso não tem problema ser a mesma conta do Twitter.

      Já o Facebook e o Google Plus não precisa de conta sua e pegam automaticamente também o link do post.

      Responder

  19. Olá Claudio.

    Funcionou perfeito. Só que tem um probleminha!

    Na minha página inicial tenho um menu automático, onde coloco algumas postagens e ele fica exibindo automaticamente na vertical, quando coloquei a 1ª colagem ele para de funcionar.

    Deste modo é impossível ficar com os dois.

    Você sabe por que acontece isso?

    Queria tanto colocar este menu flutuante. Valeu.

    Abraços.

    Parabéns pelo blog!

    Responder

    • Tenta usar este jQuery no lugar do outro que coloquei no Post:

      <script type='text/javascript'>
      var fb = jQuery.noConflict();
      fb(function() {
      var offset = fb(&quot;#fblog-box&quot;).offset();
      var topPadding = 60;
      fb(window).scroll(function() {
      if (fb(window).scrollTop() &gt; offset.top) {
      fb(&quot;#fblog-box&quot;).stop().animate({
      marginTop: fb(window).scrollTop() - offset.top + topPadding
      });
      } else {
      fb(&quot;#fblog-box&quot;).stop().animate({
      marginTop: 0
      });
      };
      });
      });
      </script>

      Responder

  20. olá cláudio,
    adorei essa caixa, muito legal mesmo, parabéns pelo site e pelo tutorial, só gostaria de saber uma coisa:
    É possível fazer como que esta caixa apareça permanentemente no blog e não somente nos posts? fazer com que ela apareça em todas as páginas?
    é porque no meu blog tem espaço lateral opara que ela fique sem “tampar” os ítens do blog…
    obrigado e aguardo resposta

    Responder

  21. Ai mano, sei que não faz sentido mais gostaria muito de colocar isso na minha pagina inicial… poxa vc pode me ajudar… ficarei muito grato e vejo que tem muita gente querendo isso!
    Desde já obrigado!

    Responder

    • Mas isso não é a mesma coisa que os ícones que você já tem lá no seu blog na sidebar?

      Além que o visitante não compartilha uma página, para ele o relevante é apenas o post.

      Colocando o box na homepage dentro do post vai ficar confuso para o visitante, ele vai pensar que se clicar ali vai compartilhar sua página e não o post especifico.

      Porém se você esta DECIDIDO A CONFUNDIR SEU VISITANTE, segue o código que faz aparecer na homepage:

      <b:if cond='data:blog.homepageUrl == data:blog.url'>
      <div id='floating-fblog'>
      <div id='fblog-box'>
      <div><a class='twitter-share-button' data-count='vertical' data-related='ferramentasblog:Aprende como criar um Blog - Blogger ou WordPress [ Ferramentas Blog ]' data-via='ferramentasblog' data-text='NOME DO SEU BLOG' data-url='LINK DO SEU BLOG' href='http://twitter.com/share'>Tweet</a></div>
      <div><g:plusone size='tall'/></div>
      <div><div id='fb-root'/><fb:like href='LINK DO SEU BLOG' font='arial' layout='box_count' send='true' show_faces='false' width='54'/></div>
      </div>
      </div>
      </b:if>

      Esta ai o código. Depois não diga que eu não avisei o/

      Responder

  22. eu queria saber pq que se colocar esta caixa, alguns efeitos do blog param de funcionar, por exemplo o slider que fica passando umas fotos com descrição, a descrição fica acima da foto e ela nao muda… e os submenus que aparecem ao passar o mouse sobre os menus, tambem nao aparecem mais, gostaria de saber o porquê?

    Responder

    • O lugar onde você colou também fica errado por que o plugin entra no loop dos posts e será chamada quantas vezes for o numero de posts na homepage.

      Primeiro você limpa tudo ai.
      Instala o do post corretamente novamente.

      Depois de feito isso. Copie o código que passei aqui e cole de baixo do:
      <div id="main" class="main section">

      Desta forma ele vai ficar fora do loop dos posts e não vai ficar se repetindo.

      Responder

  23. Tá claudio, deixa eu ver se entendi:
    possuo um menu animado no meu blog e um slider. Quando coloco o código deste Gadget Box Flutuante com botões de redes sociais, ambos param de funcionar. Só voltam a funcionar se eu retirar os códigos desta caixa flutuante. Para resolver este problema e ter os dois no meu blog, eu devo colar o código do jQuery que você mencionou ali no comentário acima do , o invés de utilizar aquele código do post?

    Responder

    • O que eu coloquei aqui por comentário é outra coisa.

      Seu problema é diferente e é de conflito.
      No caso é onde o código jQuery foi inserido em seu blog.
      Tenta inserir o código do jQuery do Box Flutuante antes do slideshow e do menu do seu blog.

      Responder

  24. aAAAAAAAH, entendi, ok, mas o que é o jQuery mesmo?
    e outra coisa, nos códigos do meu blog não tem a linha: portanto, onde devo colar o ultimo código do post?

    Responder

    • jQuery = JavaScript

      Esses códigos que estão em <script …

      Se não tem a última linha, precisa ver que tag esta fechando lá no post e colocar antes dela.

      Você não colocou o link do seu blog na hora de comentar então não sei em que blog você esta com esta dificuldade.

      Responder

  25. olá cláudio,
    Bom é que assim, o blog ainda não está pronto, estou editando aos poucos pra começar a divulgar, postei qualquer coisa só para fazer uns testes, e enfim, o meu desejo era colocar essa caixa flutuante no blog mas que ela não “anulasse” os efeitos do menu e do slider, eu até já tenho uma caixinha pequena ali no canto, porém ela é bem simples e eu gostei mais desta que está aqui no seu sitee…vou mandar o link para você mas não coloquei nenhum código da caixa flutuante ainda, veja com o slider e os menus funcionam perfeitamente:

    http://facilmodo.blogspot.com/

    se eu colocar os códigos desta caixa flutuante, veja como fica:

    http://img408.imageshack.us/img408/4875/problemanoblog.jpg

    perceba que os submenus não aparecem e que o slider se deforma, a descrição fica em cima como um texto normal, e a foto parada sem mudar.

    COMO RESOLVO ISTO?? SE PUDER ME AJUDAR AGRADEÇO MUIIITO, ALÉM DE QUE JÁ RECOMENDEI SEU SITE PARA ALGUNS AMIGOS BLOGUEIROS QUE TENHO (#puxasaco eu né…)

    obs: em relação ao problema da linha , já resolvi! o problema é que no meu código tinha um espaço entre o 3 (três) e o ‘ (apóstrofo)

    Responder

    • Era isso que eu ia te falar, encontrei no seu blog a linha “post-footer-line-3″.

      Se não tivesse ela iria pedir para você colocar ela em outro lugar, por isso precisava do link do seu blog.

      Já com o conflito não posso lhe ajudar desta forma, você vai precisar ficar mudando ele de lugar para ver se resolve seu problema.

      Ainda mais pelo o que pude ver, existe uma quantidade muito grande de script no seu site, o que pode dificultar ainda mais.

      Responder

  26. Caro Cláudio,

    Inicialmente obrigado pelo código, é de extrema valência e utilidade. Entretanto, eu o inseri o mesmo em meu meu blog, mas no navegador internet explorer ele não funciona perfeitamente… Existe algo para alterar, pois no Firefox roda perfeitamente.

    Grato pela atenção!

    Responder

    • O Facebook as vezes tem esses problemas mesmo.
      Tenta colocar junto colocar isso daqui antes de </head>:

      <script src='http://connect.facebook.net/pt_BR/all.js#appId=102576646508501&xfbml=1' type='text/javascript'></script><script type="text/javascript">

      Responder

  27. Acrescentei, mas não salvou, deu esse erro;” Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The reference to entity “xfbml” must end with the ‘;’ delimiter.”

    Responder

    • Desculpa xD

      Foi erro meu. Acabei colocando coisa a mais no código.

      O correto é:

      <script src='http://connect.facebook.net/pt_BR/all.js#appId=102576646508501&xfbml=1' type='text/javascript'></script>

      Responder

  28. Novamente deu o erro:

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The reference to entity “xfbml” must end with the ‘;’ delimiter.

    Responder

    • Você tem certeza que esta colocando antes de </head>?
      Fui tentar verificar aqui para ver se dava o mesmo erro, porém o blogger esta com problemas ¬¬.

      Porém o erro que você esta falando é sobre fechamento, com o novo código que lhe passei não deve ter este tipo de problema.

      Responder

  29. Estou colocando antes de , juntamente com os demais códigos, conforme orientação descrita acima… E continua este erro…

    Será algo do blogger ou do IE9…

    Responder

  30. olá Cláudio,
    resolvi mudar de tema para colocar esta caixa, pois achei muito interessante. Porém, estou com o mesmo problema que o Robbuster.
    eu realmente gostaria de botar essa caixa não só nos posts, mas também na pagina inicial do blog. Fiz tudo que você mencionou no comentário, colocar o codigo do post normal e depois da tag “” inserir o código que você passou no comentário. Só que não tem essa tag no meu blog, onde eu coloco então? a coisa mais semelhante que eu achei foi: ““. seria abaixo disto que eu deveria colocar?

    Responder

        • ok, agora estou com outro problema, eu mudei o tema do blog novamente, mas desta vez é definitivo. agora a tag que não acho é a “”, para colocar o terceiro código do post. Sou muito leigo no conceito de html, porém tenho noções básicas. Colocar o codigo nesta tag faria com que a caixa aparecesse nos posts certo? e na tag do “main-wrapper” faria ela aparecer na home page. como não acho esta tag do post-footer-line, poderia colocar o código em outro local do código dos posts, como por exemplo um que achei semelhante: “<Variable name="postfooterfont" description="Post Footer Font"
          type="font"…"??? ou existe outro local que eu possa colocar o terceiro código do ppost?

          Responder

          • Não não esse variable… é outra coisa.

            Coloca ai o que vai aparecer na home em main-wrapper mesmo e o que vai aparecer nos posts de baixo do código que vai na home.

            Deu para entender? xD

            Coloca um de baixo do outro em main-wrapper.

            Responder

  31. aaah sim, deu certo! já configurei até a posição dele na página. Na home page tudo ok, mas olhe o que aconteceu na pagina do post: http://facildt.blogspot.com/2011/10/teste-de-postagem-para-multimidia.html

    Apareceu escrito: “TEMPLATE ERROR: Invalid data reference post.title: No dictionary named: ‘post’ in: [‘blog’]”

    acho que ele não reconheceu alguma coisa, poderia me ajudar claudio? desculpe o encômodo, mas é que realmente aqui é o único site que estou sendo muito bem atendido =D

    Responder

  32. Desculpa claudio, vim te encomodar de novo,
    percebi uma coisa intrínseca, mas que não deixa de ser um erro. Veja como aparece a caixa na home page e veja como aparece no post. Eu configurei o “margin” para 290, fica como eu quero na home, mas no post ela fica exatamente 10 px à menos para a direita, ou seja ele fica com 280 e fica por cima do tema do blog.O que pode estar causando isso?

    Responder

  33. meu deus deu erro de novo, desconsidere as aspas agora..

    código para aparecer na home:


    “”
    “”
    Tweet
    “”
    “”

    “”

    código para aparecer no post:


    ” ”
    ” ”
    Tweet
    ” ”
    ” ”

    ” ”
    ” ”

    Responder

  34. não consegui fazer… eu não entendi exatamente em que linha eu devo colocar, antes ou depois, e o que? eu fiz isso:

    inclui a class na div do box assim <div class='margem' id='floating-fblog'

    na css que não entendi muito bem o que é, coloquei assim

    #fblog-box {border:1px solid #ccc; padding:5px; background:#fff; z-index:9999; display:block; position:absolute; top:200px; float:left; margin:0 0 0 -290px; text-align:center;} margem {margin:0 0 0 -290px;}

    não sei o que fiz de errado…

    Responder

    • Faltou ai um ponto.

      Por exemplo:

      .margem {margin:0 0 0 -290px;}

      Precisa dele antes do “margin”.

      Para funcionar perfeitamente aconselho você fazer o seguinte:

      .margem {margin:0 0 0 -290px !important;}

      Além de mudar o valor de -290px, porque é o mesmo valor do outro, nesse ai tente -280px por exemplo.

      Responder

  35. Vamos do jeito mais fácil.

    Você quer arrumar o da home certo?

    Encontre ele lá que esta assim:
    <div id="fblog-box">

    Deixe ele desta forma:
    <div id="fblog-box" style="margin:0 0 0 -290px">

    Assim não tem como errar xD

    Responder

  36. não, eu quero arrumar o do post, e mesmo assim não funcionou.. eu quero deixar o do post na mesma posição do da home, veja a diferença entre os dois… eu percebi que é cerca de 10px

    Responder

  37. cládio, consegui, arrumei de uma maneira um tanto estranha, coloquei este código na linha do floating-fblog e ajustei a margin para -10 px que tinha de diferença do da home! Agora ficou perfeito! obrigado!

    Responder

  38. Olá.
    Primeiramente gostaria de parabeniza-lo pelo excelente Post!
    Eu coloquei em meu Blog, mas estou vendo um probleminha, que ja passei algumas horas tentando arrumar, mas ñ consegui.
    Sabe o botão do Google+1 ?
    Então, ele fik com o balãozinho contador comido pelo box. veja por favor em meu Blog >>> http://virtualsword.blogspot.com/

    Como posso fazer para ele ficar no formato grande (size=”tall”)? Parece não estar reconhecendo este valor..não estou entendendo bem o por que.
    Poderia me ajudar?
    Desde já agradeço!!!!!

    Responder

  39. Oi Claudio, sou eu novamente cara.
    È o seguinte, tenho 1 SlideBar no Blog, e, como com outras pessoas aqui do post, o box esta em conflito com o SlideBar.
    Trabalho numa agência web, e sou programador, mas ñ manjo mta coisa d JavaScript..apenas o essencial, digamos.
    Bem, tentei mudar o javascript jogando ele la pro alto, antes das funções de MouseOver, SlideBar, etc..mas o conflito persiste.
    Nosso amigo ali em cima resolveu trocar seu template, o que não pretendo fazer para resolver o problema. Poderia m dar uma força?Valew!

    Responder

    • Tive uma ideia aqui. Eu não testei ela então me desculpe se não der certo.

      Então vamos lá:
      Estamos carregando html do Box apenas nos posts e não na homepage, porque não teria sentido isso.
      Entretanto os scripts carregam em qualquer lugar do blog o que esta gerando este conflito ai com seu slideshow.

      Para solucionar isso devemos então carregar os scripts do Box apenas nos posts também, assim evitamos todos estes problemas.

      Tente fazer o seguinte:
      Cole isso daqui antes do jQuery do plugin:
      <b:if cond='data:blog.pageType == &quot;item&quot;'>

      Depois no final dele feche com isso:
      </b:if>

      Eu não testei isso, não lembro agora se o Blogger vai aceitar esta tag lá em cima.
      Testa ai, se der certo vou mudar o código do Box aqui no post por este.

      Responder

  40. Excelente!Como não pensei nisso!?
    Só instanciar os plugins quando o tipo da página for igual a página-Post.
    Se for a página Home, pula todo o JavaScript que conflita com o resto.
    Testado, e aprovado, pode Editar lá que deu certo!

    Valew Claudio, muito bom velho!!!
    Abraço!

    Responder

    • Opa, valeu por testar.
      Eu devia ter pensado nisso antes também.
      O meu plugin do WordPress funciona desta forma, só carrega os scripts nos posts. Porém como é no WP eu consigo resolver o problema de conflito de outras formas também xD.

      De nada, eu que agradeço por ter testado o código.

      Responder

  41. olá cláudio, sou eu denovo, olha só, depois de muito tempo parado, em meio ao enem e outras coisas, voltei a cuidar do blog, e fiz muitas alterações: criei um banner, aprendi a meio que “fazer um tema usando um tema já pronto, enfim, ficou tudo nos “trinks”. No entanto estou com uma dúvida sobre este box flutuante que eu adicionei é claro, pois é muito bom…enfim, adicionei tudo certinho, coloquei a margem desejada, perceba que ele está na lateral DIREITA do blog. Porém ele não se meche, isto é, quando descemos a barra de rolagem a box nao “flutua” para baixo, ele fica sempre parada na tela, não tem animação…poderia me ajudar? queria muito a resposta…obrigado..

    Responder

  42. Já faz uns meses que comecei a editar um blog para disponibilizar online conteudos de minha cidade e aqui no ferramentasblog praticamente me ajudou em muitas inserções de codigo !!! ..

    Vou testando e criando >>Valeu pela ajuda !!!

    Responder

  43. Os botões aparecem normalmente, tudo ok com o CSS, mas quando inseridos os códigos, a margem do blog é alterada, fazendo a aparecer a barra de rolagem horizontal.

    Alguma sugestão para resolver esse problema?

    Responder

  44. Olá… deu certinho no meu blog esse box… gostaria de saber como faço para colocar esse mesmo box em alguma paginas estaticas… nao em todas… valeu por enquanto… manda um banner de vcs que eu coloco no meu blog….
    t+

    Responder

  45. Botões instalados com sucesso. Porém, acontece que, em outros navegadores como o Firefox, a margem é alterada fazendo aparecer a barra de rolagem horizontal.

    Isso só acontece na página inicial, nas demais tudo ok. No Chrome tudo perfeito.

    Alguma dica?

    Responder

  46. Ola, amigo. fiz tudo exatamente como disse, mas qdo apertei o botão e visualizar,não mudou nada, ficou o mesmo que antes. eu salvei mesmo assim, pode ir lá ver como realmente não aconteceu… O que será q aconteceu?

    só uma coisa, na ultima etapa a linha , no meu ela ocorre assim : , eu testei colocar o ultimo código logo abaixo, e logo depois de , antes de . e ambos não deram certo….

    Responder

  47. Oi Claudio!

    Fiz tudo como está aqui, mas o botão do Twitter só aparecia a palavra ‘tweet’, então fui fazer um teste e troquei o código daqui pelo fornecido no Twitter (http://twitter.com/about/resources/buttons#tweet), deu certo, agora está normal.
    Será que pode ser alguma incompatibilidade do meu template, já que outras pessoas aqui usaram o código como você forneceu e deu certo?
    Desde já, agradeço!

    Carlos Tomaz – Lar da Veterinária

    Responder

    • Não não Carlos, acontece que o botão do twitter foi atualizado fazem uns 3 dias.
      Por isso talvez do problema.
      Entretanto do jeito que esta ai no post é como estamos usando aqui no Ferramentas Blog.

      Responder

  48. Olá, Claudio. Tenho 3 blogs que criei por motivos bem pessoais e não tenho twitter. Ainda não me decidi a criar uma conta. Mas coloquei este gadget flutuante nos 3 blogs, inclusive adicionei uma linha como Feed. Minhas perguntas: este botão de tweet, quando meu visitante clica nele divulga meus posts em sua conta (do visitante)? Por não ter nenhuma conta no twitter deixei o nome da conta de vocês, ou seja, não modifiquei esta parte. O que acontece então? Meus posts serão divulgados na conta do twitter de vcs? Posso deixar como está ou devo suprimir esta linha, caso decida continuar sem conta no twitter?
    Se eu resolver criar uma conta no twitter, posso divulgar meus 3 blogs em uma conta só? Como fazer isso?
    Sei que são muitas perguntas, mas estou aprendendo a navegar sózinha, na base da pesquisa e da tentativa/erro/acerto.
    Grata ela atenção e por todas as dicas que vocês passam. Já usei muitas. Abraços.
    Meu blo xodó é o de receitas: http://receitasdetodosnos.blogspot.com/.

    Responder

    • Já dei uma lida em alguns posts que vcs publicaram a respeito do twitter, mas confesso que ainda não me decidi a criar uma conta.

      Por favor, me respondam a pelo menos duas das perguntas acima, estas que refaço aqui embaixo:

      Coloquei este gadget em meus blogs e a certa altura, vcs recomendam:

      “Nele basta substituir o “ferramentasblog” pelo seu nome de usuário no Twitter.”

      Pergunta, já que não tenho conta no twitter, retiro esta parte do gadget que apliquei em meus blogs?

      Se eu mantiver o endereço de vocês, minhas noticias serão divulgadas na conta do “ferramentasblog”?

      Agradeço a atenção. Gisele.

      Responder

      • Então, quando alguém clica nesse botão envia uma mensagem no Twitter dela com o título, link e nome de usuário do twitter que você configurar.

        Eu particularmente gosto muito de twitter, é uma forma bem legal de compartilhar coisas e entrar em contato com outras pessoas.

        Porém já que você não tem conta no twitter, pode apenas deletar isso daqui dele que já aparece sem e todo mundo vai poder continuar compartilhando seus posts sem problema:

        data-via='ferramentasblog'

        Apenas delete isso e esta tudo certo.

        Responder

        • Obrigada, Claudio. É que ainda estou tateando neste universo que é a internet. Abri meus blogs para ajudar minha filha a sair de uma depressão causada por uma perda pessoal nossa.
          Deu certo, ela abriu 2 blogs e está voltando a sorrir.
          E eu me apaixonei por blogar, mas sou semianalfabeta em internet.
          E aprendi muito com vocês.
          Valeuzão.
          Abraços e muito obrigada.

          Responder

  49. Olá chará, tudo bem?

    Parabéns pelo belo post, com certeza muito útil. Eu usei seus códigos em meu blog, quando usado o Firefox ou o Chrome aparece normalmente, agora se eu usar o IE8 ou IE9 os botões do Facebook não aparecem, você sabe qual é o problema?

    Obrigado,

    Claudio

    Responder

  50. Pingback: Os 10 melhores posts do [ Ferramentas Blog ] em 2011 | [ Ferramentas Blog ]

  51. Olá muito boa a postagem, mas está dando o seguinte erro quando eu coloco abaixo da post-footer-line-3. Nos outros códigos fica normal, mas nesse aparece isso:

    Erro ao analisar XML, linha 1711, coluna 284: Element type “a” must be followed by either attribute specifications, “>” or “/>”.

    Responder

      • @Luite

        Poderia compartilhar com a gente as linhas que você descartou as alterações, seja lá quais foram?

        Imagino que a linha 1080 seja do seu template, mas isso vai mudar muito de um blog para o outro.

        Abraços, e obrigado,

        Claudio

        Responder

        • Me referi a descartar todas as configurações que tinha feito na hora de colocar os códigos do gadget.

          Foi assim, executei o tutorial acima, colocando todos os códigos no seu devido lugar, mas na hora de salvar, ou de visualizar, aparecia um erro mencionando a linha 1080 e alguma coisa com a tag . então como não tive escolha, simplesmente NÃO SALVEI as alterações, descartado-as, e recomecei tudo de novo, só que dessa vez com mais calma e atenção, colocando a tag pra identificar onde cada parte do código entrava, assim ficaria mais fácil de encontrar caso algo desse errado. Quando tentei encontrar o trecho só encontrei com o número “1”, e tinham dois trechos iguais, então coloquei no primeiro, que estava acima.

          Mas graças a Deus funcionou, em parte, pois agora vejo que não funciona corretamente no IE9. Só temos que aguardar atualizações agora.

          Abraços!

          Responder

      • @Liute (agora sim, escrevi certo…:)

        Infelizmente você está enganado amigo, pois a box não está funcionando direito no seu blog.

        Eu acessei o seu blog usando o IE8 e IE9 e os botões do Facebook também não aparecem. Vamos aguardar alternativas para ver se resolve o problema.

        Abs,

        Claudio

        Responder

  52. Infelizmente estarei retirando o gadget do meu blog. Sei que ele é o melhor, mas não posso ficar sem o botão curtir do Facebook.

    Se um dia ele voltar a funcionar normalmente eu coloco mais uma vez.

    Responder

  53. Olá pessoal, eu já instalei este recurso em dois blogs e ficou muito bom. Porém estou tentando instalar em outro e não estou conseguindo. Neste blog em questão já tenho instalado a ferramenta para comentar tanto com o facebook quando com o do blogger mesmo, que vi aqui. Será que isso está gerando algum conflito? Não sei mais o que fazer. Vou colocar o endereço do dito aqui no espaço site/blog se puderem olhar agradeço.

    Responder

  54. Olá Cláudio!
    Deu tudo certo até chegar a hora de procurar pela linha de código , eu tentei umas tres vezes mas infelizmente não deu! O que será que aconteceu? você pode me ajudar? Muito obrigado!

    Responder

    • Nikolas,
      Certifique-se de que, na hora de abrir o “Editar HTML” do Blogger, ter marcado o “Expandir modelos de widgets”, pois é a única forma de ver o código que precisa. Isso está bem explicado no tutorial, inclusive com imagem.

      Responder

  55. Caro,

    primeiro obrigado pela ajuda, seu blog é fantástico!

    Coloquei a esse gadget flutuante e parece estar funcionando perfeitamente.

    Só tenho uma dúvida?
    Consigo colocar ele pra flutuar do lado direito ao invés do esquerdo?
    Como?

    obs: tentei trocar o “float: left” para “float: right” e não funcionou.

    Responder

  56. Olá. No hora de eu inserir o ultimo código antes de salvar o modelo(que tenho que procurar uma linha) eu não consigo encontra-lo na busca. Já me certifiquei que a opção “Expandir modelos de widgets” esteja expandida, mas não deu em nada.

    O que eu faço? Obrigado.

    Responder

  57. Eu coloquei todos os codigos certos so que no ultimo, post-line eu já tentei colocar abaixo do post-line1, 2 e 3 e todos aparecem esse erro.

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente. Mensagem de erro em XML: The element type “b:includable” must be terminated by the matching end-tag ““.
    Error 500

    Responder

  58. Olá Cláudio ou Marcos,

    Consegui inserir o código e aparentemente o botão está funcionando, porém fica escondido no background do tema, ao lado dos posts. Tentei diminuir a distância da margem, mas pra ficar completamente visível, ficaria acima do texto e com um valor positivo de pixels ele não faz a rolagem junto com a tela, fica estático.

    Tem alguma maneira de mudar o posicionamento dele para conseguir “escapar” do fundo que o encobre?

    Obrigada pelas valiosas dicas no blog de vocês.

    Responder

    • O problema esta no CSS da #content, nele você encontra overflow: hidden.
      Isso faz com que tudo que esta dentro dessa div e fique para fora seja escondido.
      Por isso você teve o este problema.
      Recomendo você deletar esse overflow: hidden e testar para ver se da certo e não tem problema com o layout também.

      Responder

      • Claudio,

        Segui exatamente à risca o tutorial, mas o problema dos botões do Facebook não aparecerem no IE8 e IE9 continuam, alguma dica?

        Não sei se possa ser algo no meu template, pois aqui no FB a box funciona perfeitamente em todos os navegadores.

        Se quiser conferir, agora o blog oficial está funcionando, e as mesmas mudanças que fiz no blog de teste eu fiz no definitivo também:
        [link suprimido]

        Obrigado pela ajuda.

        Um abraço,

        Claudio

        Responder

  59. Oi Claudio e Marcos. Segui todos os passos corretamente mais quando clico no botão
    visualizar aparece a seguinte mensagem de erro:

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente. Mensagem de erro em XML: Element type “a” must be followed by either attribute specifications, “>” or “/>”.

    Error 500

    O erro só ocorre quando eu adiciono a ultimo trecho de código a
    ser colado abaixo de
    O que deve está errado? Aguardo resposta. Desde já muito obrigado.

    Responder

  60. Também não consegui achar o , nem o 1, nem o 2. Coloquei em “expansir modelo de wigdet”, tentei tudo, reiz, mas não deu jeito. Tentei pela interface velha, mas não aparece de jeito nenhum… Alguma ideia?

    Responder

  61. Mais uma vez obriado pelas dicas…estas tudo funcionando e nos meus posts vou com certeza indicar o ferramentasblog. Sucesso total obrigado Marcos e colaboradores. Ate mais.

    Responder

  62. Olá ! Fiz tudo direitinho só que o gadget não está flutuando e sim embaixo do post. Queria saber como consertar o problema. Desde já agradeço ;)

    Responder

  63. Boa tarde,

    Fiz todo o processo, mais de uma vez e quando chego na terceira e última parte do código, recebo a seguinte msg de erro:

    “Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente. Mensagem de erro em XML: Element type “a” must be followed by either attribute specifications, “>” or “/>”.

    Error 500″

    Obrigado,

    Responder

  64. Olá. gostaria de uma ajuda. Coloquei o botão enviar e curtir do facebook junto aos posts do meu blogger, mas ele não envia um resumo do post. Envia apenas o título e o link. Alguém sabe me informar o que estou fazendo de errado. Obrigado.

    Responder

  65. Ei Cláudio! Como está?
    Vi que você atualizou o código, e ficou consideravelmente menor que o anterior. Você sabe me informar se ainda está com aquele probleminha nos navegadores? O de não aparecer alguns botões? ou já está tudo resolvido?

    Abraços meu caro… e sucesso!

    Responder

    • Na verdade acabou ficando um pouco maior :P

      Eu alterei e testei em 3 bloggers, todos eles abriram corretamente no Internet Explorer 8, Google Chrome, Firefox 8, Opera e Safari no Windows.
      Testei também no Safari, Google Chrome e Opera no Mac.
      Ainda estou para testar no Ubuntu/Linux, porém acredito que não deverá ter problema com ele.

      Responder

      • Kkkkk… acho que devo ter me impressionado na hora de apagar o antigo do código do meu blog.
        Também estou usando o Chrome, e realmente está tudo funcionando perfeitamente.

        Agora só me resta uma pergunta. Existe aqui no FB um tutorial ensinando como colocar estas setas que estão aparecendo ai na lateral? Que me levam à postagem anterior e posterior a esta? Achei lindo isto, e gostaria de colocar no meu blog, isto evita que o usuário precise rolar até o final da postagem para mudar.

        Muito obrigado pela atenção!!! Abraços.

        Responder

  66. Olá, Cláudio… achei ótima a dica dessa barra, realmente, quanto mais interativo for um blog, mais seguidores ele terá.

    Um pergunta: há como incluir um botão do diHITT nessa barra?

    Grato!!!

    Responder

  67. Olá claudio, como faço pra deixar os botões na horizontal abaixo do post? Pergunto isso pq no meu blog eles NÃO ficaram no topo e sim abaixo do post, na posição atual.

    Responder

          • Claudio, só mais uma ajudinha…
            Então como posso alterar isso faze-lo aparecer na “tela”?
            Acho que na primeira vez fiz algo errado e ele apareceu, só que logo abaixo do post, então se pudéssemos fazer ele ficar horizontal…ficaria até bom! Ou aparecer na lateral mesmo.É possível?

            Responder

        • A ideia é fazer isso aparecer flutuando, na horizontal você não precisa nem da metade que tem aqui e pode fazer isso manualmente.

          Por exemplo pode colocar no css isso daqui para dar uma largura e centralizar o corpo do site

          #outer-wrapper {
          width: 960px;
          margin: 0 auto;
          }

          Responder

  68. Claudio encontrei uma solução, eu fiz ele ficar por sobre o texto mesmo e depois configurei pra ficar estático em um espaço livre dentro dos post´s
    Obrigado e desculpa pelo abuso.

    Responder

  69. Claudio, o erro do botão “Curtir” voltou novamente! Dessa vez está acontecendo no Chrome e Firefox.

    Da última vez havia sido um conflito com o que tinha em meu layout e logo após retirar td deu certo.

    Dessa vez até o daqui do Ferramentas Blog desapareceu.

    Sabe o que aconteceu?

    Responder

  70. Aproveito a oportunidade para deixar meus parabéns a equipe do blog, e mencionar que este é um excelente post.
    porem estou com dificuldade para incluir o mesmo,em meu blog ele me reporta uma mensagem informando que os html não estão fechado corretamente, poderia me ajudar nesse sentido

    parabéns pelo trabalho

    Responder

    • Você poderia ter comentado usando o link do seu blog no campo indicado.
      Assim eu teria entrado lá e poderia te ajudar.

      Ou se não você pode procurar outro lugar que fique de baixo do post e dentro do loop para colocar o código.

      Responder

  71. Olá, aqui tá funcionando redondinho, mas quando clico em alguma foto do post e aparece a Lightbox, o box flutuante fica branco… Fica bem estranho.

    Será que não existe algum jeito de o box flutuante “escurecer” junto com o resto da página, na hora que o lightbox for ativado?

    Vc poderia me ajudar?

    Obrigado!

    Responder

  72. Olá Claudio!
    O template do meu blog não possui post-footer-line-3, somente o post-footer-line-1 e o 2. O que faço? Onde coloco o código que deveria ir abaixo do post-footer-line-3?

    Responder

  73. Muito obrigada pelo tutorial.

    É um passo-a-passo muito bem escrito e seguindo à risca, fica perfeito.
    Nem sempre as pessoas que postam dicas de widgets ensinam também a personalizá-los.

    Frequento muito esse blog, sempre arrasando!

    Abraços

    Responder

  74. Olá Claudio, no meu blog não aparece o botão “curtir” e “enviar” do Facebook.
    Eu segui os passos direitinho até refiz várias vezes mas eles não aparecem!
    Você poderia me ajudar?

    Responder

      • É foi isso q eu fui olhar ontem, mas só percebi q tinha após enviar o comentário :S
        Muito obrigado pela atenção e pelo widget :)

        Só uma sugestão alí no fim do post no “Personalizando o widget”, coloca como mudar a cor de fundo do widget, creio q muitos queiram mudar para ficar compatível com a cor do blog.

        Responder

      • Olá Claudio!
        Estava encontrando problemas com o código, e quando li esse seu comentário tentei retirar um botão do Facebook deixando apenas um…
        E não é que funcionou véi?!

        Super-Parabéns mesmo pra vocês, administradores do fb, e que continuem fazendo o trabalho incrível que desenvolvem aqui.

        Obrigado.

        Responder

  75. Apliquei no meu blog e foi um sucesso. O botão foi o melhor que achei em toda a internet, ao todo são feitas menos de 10 requisições ao servidor, o tempo de carregamento é rápido e ele se ajusta muito bem ao design e chama mais atenção do leitor para compartilhar o post.

    Excelente mesmo!

    Responder

  76. Claudio,

    Cara, pensa num sujeito LEIGO PLUS. Este sou eu.

    Não tenho a menor idéia do que é código fonte, programação e essas coisas todas…
    Mas eu queria colocar essa barrinha flutuante das redes sociais no meu blog. E não é que, seguindo o seu posto, copiando e colando as coisas, eu consegui! Até agora não estou acreditando…
    Confesso que morri de medo de fazer uma bobagem e perder todo o meu blog, mas deu tudo certo.

    Muito obrigado Claudio! Parabéns pelo blog! Se tiver interesse em aprender sobre investimentos em bolsa conheça o meu blog, espero que as informações do meu blog sejam úteis para você também, assim posso retribuir de alguma forma a ajuda que você me deu.

    Abraço

    Responder

  77. Boa tarde! Eu sou português no entanto adoro os brasileiros! Somos família. Mas tenho uma dúvida que queria tirar e se alguém me souber ajudar, agradeço.

    Queria saber como troco o nome Curtir, para Gosto e se tem como. Abraço e Beijos :)

    Responder

  78. Oi Hoje, do nada, sumiram os botões face e send (os dois do face) Não foi adicionado nada no html e nem foi feita nenhuma modificação…. tipo: há um minuto estava e agora não está mais… Sabe me dizer? Ficou o G+ e o Twitter o resto sumiu… Pode me ajudar? Obrigada

    Responder

    • Isabella,
      Algumas vezes o sistema do Facebook dá alguns erros e os botões somem ou ficam instáveis.
      É só esperar que voltam.
      Uma sugestão também é limpar o cache do seu navegador de internet.

      Responder

      • Ok Obrigada por responder Marcos. Vou fazer isso agora (limpar o cache) e aguardar… Um abraço! Adoro seu blog… Aqui aprendi muito e aprendo a cada dia!

        Responder

  79. Boa Noite,

    Eu gostaria de alterar o lado do box, em vez de correr pelo lado esquerdo, eu queria que fosse pelo lado direito dos posts…

    alterei onde ta escrito “left” por “right” na esperança de que mudasse algo, mas não deu resultado..

    deve ser simples, mas realmente não sei =/

    ajuda?

    Responder

  80. Olá Marcos Lemos ou Claudio Sanches. Instalei o Box flutuante no meu blog e ficou bom nas páginas internas, entretanto quando estou na home aparece a borda do refiro box sem os botões das redes sociais. Ele fica posicionado no canto superior direito da home. Qual a dica para solucionar o problema. Meus conhecimentos de html é de iniciante.

    Agradeço desde já, e aguardo algum pronunciamento,

    Forte abraço e sucessos.

    Responder

  81. Marcos eu instalei o Gadget no meu blog e fiz um teste twwitando,e foi normal,porém não aparece a contagem de quantas vezes foi twittado, vc pode me ajudar,e obrigadoo

    Responder

  82. Marcos coloquei no meu blog essa barra com botoes do lado esquerdo da tela do site.

    Pois é, ta com um bug com os botoes do facebook, os botoes ficam desalinhados. ja tentei conserta mais nao consequi. esse problema so acontece no navegador mozilla, inclusive o FERRAMENTAS BLOG esta com o mesmo problema. gostaria que voce desse uma olha entre no seu site pelo mozilla, se vc ou o cladio consegui conserta atualiza esse post por favor. Um braço parceiro. Ferramentas blog melhor site que tem.

    Responder

  83. Adorei a matéria eu ja tenho o box fixo e gostaria de colocar o flutuante, antes de eu mexer oe tentei fazer uma simulação, contudo nao achei a linha de código , ou essa linha só aparece quando colocamos os outros codigos das etapas 1 e 2.
    Obrigado,
    Trigemeos

    Responder

  84. Oi. Sempre fui um cara que gostou de sombra e água fresca e sempre fui pelo mais fácil, por entender rapidamente(neste caso de html), as coisas que para os outros parece ser muito complicado. Onde eu quero chegar é: tem um jeito mais fácil de adicionar este wideget: copie os códigos em sequencia no NotPad ou afins e adicione como um gadget/java normalmente, aí personalize como diz acima. Pronto, você não mexe na estrutura do blog, e, se não gostar, você pode excluir o mesmo. Fica a dica do @Hey_Dyego

    Responder

    • Dyego, simplesmente não é possível isso porque viola os padrões do Web Standards.

      Se inserir o código inteiro, irá inserir também CSS dentro do body, o que é contra as recomendações do W3C.

      Além de que este script necessita aparecer apenas dentro dos posts e também é pegar o URL e título.
      Para que isso seja possível é precisamos usar as variáveis do Blogger.
      Inserindo como um widget elas não iriam funcionar.

      Se você gosta de facilidade, pode usar o plugin que temos para WordPress disso.
      Basta instalar o plugin e ativar. Não é necessário alterar nada no blog ou ir no código.

      Responder

  85. Mau blog não possui essa linha (div class=’post-footer-line post-footer-line-3′), aí não consigo colocar…. isso é normal? Nem mesmo os botões convencionais aparecem no meu blog.

    Responder

  86. Procurei por aqui mas não achei. Por favor quais as alterações necessárias para aparecer TAMBÉM na Home?

    Parabéns pelo ótimo trabalho que vcs fazem sempre ajudando a todos com ótimas dicas.

    Responder

  87. “Não apareceu por no #main-wrapper esta com overflow: hidden e para aparecer precisa não ter overflow ou deixar o overflow: visible.”

    Tentei váriaas vezes, mas não consegui, e nem achei o “#main-wrapper” pra alterar o overflow.

    Responder

  88. E ai amigo, muito boa essa caixa flutuante!

    Os botões Curtir e Enviar da caixa somem quando implemento o botão compartilhar/recomendar do Face. Esta havendo uma incompatibilidade da caixa com o botão. Gostaria de poder usar a caixa e o botão de compartilhar também, até porque “enviar” e “compartilhar” são um pouco diferentes.

    Responder

  89. Esse box flutuante é ótimo!
    Vocês podiam postar também como colocar as redes sociais no footer do post, na homepage e dentro do post, como tem aqui no blog.

    Responder

  90. Claudio, o meu ficou bem bacana, so ficou ruim pq ficou em cima da barra lateral, e qnd curto no face, aparece outras fotos que estao na lateral. Mas vlw a dica

    Responder

  91. Claudio:

    Instalei o box flutuante assim que vocês o liberaram aqui no FerramentasBlog. Funcionou perfeitamente, mas reparei que nos últimos dias (há uma semana, talvez) o “curtir” não atualizava, o que confirmei acessando o blog a partir de outros computadores. Mas o pior aconteceu hoje: o “curtir” zerou por completo em todas as minhas postagens.

    Há algo que eu possa fazer?

    Um abraço…

    Responder

  92. Olá amigos, muito bom dia de sábado!
    Olha eu fiz tudo certinho, e felizmente está pegando tudo certinho. Com relação as postagens e indicações para o face e para o gooble+ vai tudo sem reclamar, no entanto vi algo no Twitter que não entendi muito bem. Quando vamos indicar pelo Twitter diz que a indicação é feita via ferramentasblog.com tem algum erro, ou algo que eu configurei errado?
    Apenas esta observação, já que no mais, deu tudo certinho.

    Responder

    • claudio, consegui colocar fazendo alguns testes. esse meu template eh meio doido. preciso entende-lo melhor. acabei colocando o ultimo codigo abaixo de

      sabe me dizer se terá algum problema deixando ele ali? vai funcionar direitinho?

      Responder

    • Rubens,
      Pode testar colocar o código abaixo de alguma dessas linhas. São praticamente a mesma coisa.
      Mas sugerimos que faça testes num blog de testes antes de tentar aplicar mudanças em seu blog principal. Além, é claro, de fazer backup do layout para caso algo dê errado.

      Responder

        • Talvez não estejas observando ao certo como são as explicações aqui, companheiro. Eu coloquei no primeiro instante e rapidamente já obtive resultado.
          Inclusive estava ainda quebrando o “pau” porque todas as vezes enviava a indicação pelo twitter e ainda tinha a questão do ferramentasblog, daí então, voltei aqui, mais uma vez, li novamente o post e vi que tinha apenas que subistituir. Fiz, e estou usando normalmente.

          Agradeço mais uma vez aos meninos que fazem o Ferramentas Blog.

          Responder

  93. Olá amigo, primeiramente parabéns pelo artigo, muito bom.

    mas aqui em meu blog acontece algo que o considero um pequeno problema, quando vou descendo a cerca do post, o painel de compartilhamento fica muito abaixo e quando por exemplo vou clicar na caixa de enviar ou curtir do facebook que são as duas últimas, metade da janela flutuante que aparece fica abaixo da tela visível pelo usuário, tem alguma configuração para o painel flutuante ficar mais acima???

    abraços.

    Responder

  94. Pingback: Seu Blog é fácil de compartilhar? - [ Ferramentas Blog ] | [ Ferramentas Blog ]

  95. Depois de alguns testes consegui colocar a box.
    No meu caso deu certo colocar depois do footer line 2, pois no meu template não tem o footer line 3.

    Quero parabenizar este blog, pois graças a ele apreendi a ser blogueiro e a obter resultados.(Ainda tenho muito a melhorar).

    Conteúdos de grande qualidade e tutoriais muito bem explicados.

    Parabéns aos autores dos posts, cada post é melhor que o outro.

    Responder

  96. olá… adicionei o gadget no meu blog, mas a função de contagem do Tweet não está funcionando para mim… apesar de já ter publicado alguns Tweets em diferentes posts, a contagem de todos eles permanece em 0…
    qualquer ajuda é bem vinda..

    Responder

    • Bem, descobri que essa contagem leva alguns dias para ser contabilizada… ela não parece ser instantânea… de qualquer forma, é um bom gadget… valeu pela ajuda.

      Responder

  97. Olá, parabéns pelo seu site, a maioria das publicações são muito boas!

    Olha, adicionei este gadget ao meu blog, porém só aparece o “Tweet”, sem ícone, apenas escrito, e o “Google +1″. O “Curtir” e “Enviar” não aparecer. Sabe como resolver isto?

    Responder

  98. O Box Flutuante funcionou direitinho, com a explicação que foi feita para instalá-lo no blogger não tem erro…

    Obrigado Claudio Santos por disponibilizar esse ótimo código para os blogueiros da plataforma blogger…

    Responder

  99. Tenta copiar o código somente até o nome 3 e procurar no seu blog deve ser por que nos seus códigos esteja como uma aspas duplas e não uma aspas simples por isso ele não tá achando… Comigo aconteceu a mesma coisa então eu fui apagando do final pro começo e ai o código apareceu…

    É só uma sugestão…

    Responder

      • O meu blog tem sim o gadget, você tem certeza que viu direitinho alguma postagem do meu blog, por que você sabe que esse gadget aparece apenas na postagem e não na página principal…

        Aproveitando, Marcos Lemos você poderia me dizer qual programa você usa para gravar seus podcasts??? Ajudaria muito se você disponibilizasse aqui no FerramentasBlog uma postagem explicando como montar um podcast, com dicas e os programas necessários para isso, seria muito bom pra mim e acho que pra muita gente que já pensou em fazer algo assim também…

        Responder

        • Romirys, acho que tenho uma explicação para o que ocorreu, mas deixa pra lá. Agora, sim, vi o gadget. No Gerenciando Blog, Adelson incluiu até email, além das redes sociais. Ficou muito bom. Ele pegou aqui o gadget.

          Responder

          • Você diz que o gadget do Adelson é muito bom mas, na minha opinião, não substitui o gadget do Celso. Na minha opinião os dois são indispensáveis em um blog, veja o por que:

            O gadget do Adelson usa os links para as páginas principais de suas redes sociais, convidando seus leitores a participarem das redes sociais de seu blog/site e além disso ele inclui uma opção para seguir as postagens via feed o que é ótimo…

            Agora no gadget do Celso você, com apenas um clique, compartilha entre as principais redes sociais (twitter, facebook, google+) a postagem que o leitor está, ou seja, se o seu leitor muda de postagem, automaticamente o gadget do Celso entende essa mudança e caso ele venha a clicar novamente em algum desses botões a página compartilhada será a que ele está no momento.

            O uso desses dois gadgets faz com que você divulgue tanto as suas publicações como permite também que, uma vez em seu site, o leitor tenha uma acesso fácil as suas principais redes sociais referentes ao seu site/blog…

            Mas isso é só a minha opinião sobre o assunto… Abraços e sucesso com o seu blog Pena Digital…

            Responder

            • P.S. No lugar de Celso eu quis dizer Claudio… Tava lendo uma publicação do Celso sobre blogs de sucesso… Desculpa ai mais uma vez Claudio por errar seu nome, é a segunda vez nesse post. Não é marcação não tá… Admiro seu trabalho aqui no Ferramentas Blog…

              Responder

  100. cara, esse foi o unico que me ajudou, já tinha visto em varios blogs o tutorial mas nao tinha tantos codigos e nao dava certo, mas queria colocar tambem uma caixa para pessoas curtirem o blog mas nao to conseguindo

    Responder

  101. Tem como mudar a cor dessa barrinha flutuante? Porque o fundo do meu blog é preto, então não ficou muito legal!

    Responder

  102. parabéns deu tudo certo aqui eu estava procurando algo assim já fazia tempo,vou avisar para meus amigos porque eles também estavam procurando.

    Responder

  103. Estou inciando um blog agora e queria muito colocar estes botoes flutuantes, achei muito bacana, demorei a conseguir, mas deu certo rsrs…. só que comigo funcionou criando um novo GADGET… tentei colocar dentro do html, mas não funciou, então, criei um novo Gadget e copiei todos os codigos à cima e colei.. deu certo.

    Responder

  104. Estou utilizando o widget, mas quando faço o teste para enviar ao facebook algo acontece e não dá certo, ele somente abre minha pagina do facebook, e nao aquela pop up com a opçao de enviar. Não sei se é algum erro do facebook ou do widget, quando instalei e testei ele funcionou perfeitamente, mas de uns dias pra cá esse erro esta ocorrendo.

    Responder

  105. Oi, pessoal. Inseri esse botão no meu blogue , está quase tudo funcionando legal. Só o contador do twitter que não está somando as publicações. Vocês teria alguma solução para isso?

    Responder

  106. Não estou achando a linha
    Meu editor HTML tem uma nova interface e não expande todos os widgets com um botão, preciso expandir um por um. Em qual parte do código esta linha está?

    Responder

  107. queria que ficasse também na page inicial igual a este site: [ link suprimido ]

    mais que não afete as pages… tem como? ou tipo tem um codigo em javascript pra mim colocar no blogger como gadget igual a este pois ja o coloquei mais que fique tambem na page em um lugar reservado… e como eu pego o google + da pagina inicial do meu site? eu não sei pegar em codigo estes botões quero muito fazer um seo melhor pra minha page… acho que deu pra entender né?

    resumindo: igual a este que não o faça bugar por tambem aparecer em outra parte da page como gadget em javascript… aguardo resposta.

    Responder

  108. Marcos Lemos, sou teu fã!
    como fazer para o box carregar de forma assíncrona? meu carregamento está demorando muito devido aos botões do FB e G+ sendo carrecados sincronicamente.

    att

    Responder

  109. Alguém sabe me dizer se esse gadget atrapalha os comentários no blog? (eu uso o sistema de comentários do FB).
    Os comentários no blog pelo fb ora aparecem, ora somem.
    Inclusive, se alguém souber me ajudar, por favor, eu não sei o que fazer.
    Grato.

    Responder

  110. Marcos Lemos e Claudio Sanches parabéns por essa super dica. segui o tutorial, instalei no meu blog e funcionou perfeitamente.

    Antes eu estava usando um código diferente que a barra de compartilhamento flutuante só aparecia na página inicial e ainda em cima das postagens e depois de dias tentando mudar a margem do gadget sem sucesso eu decidi retira-lo do blog e vim usar o código que vocês estão disponibilizando aqui.

    Mais uma vez obrigado pela dica, me ajudou muito.

    Parabéns e Sucesso.

    Responder

  111. Ainda bem que estou tentando, à mais de uma semana colocar, antes do oficial, no blog de teste. Mas, definitivamente, não estou conseguindo. Sigo todos os passos, conforme mostrado, mas quando chega nesse ponto de encontrar isso aqui não encontro nem à pau. No entanto, em meu template anterior, quando coloquei, deu resultado. Como mudei de template à pouco mais de uma semana, já tentei de tudo e nada. Será que é por conta do template novo?

    Responder

  112. Pessoa, repetindo, sigo todos os passos, mas quando chego à este codigo aqui não consigo encontrá-lo. Sem essa ultima etapa não consigo terminar, e não visualizo nada. Posso saber como e o que fazer?

    Responder

  113. Obrigada pela dica, funcionou muito bem no meu blog. Coloquei do lado direito, porque assim não atrapalha a visualização da coluna da esquerda e não criou nenhuma barra de rolagem!
    Era exatamente o que eu estava procurando!

    Responder

  114. Gostei muito da matéria e apliquei no meu blog e deu certo muito obrigado, se não fosse muito pedir pois já me ajudou bastante, percebi que só aparece nos posts quando abro um post tem também como fazer que fique na pagina inicial do blogger?

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.