Dicas, truques, tutoriais, reviews, promoções e informação

domingo, 14 de outubro de 2012

Box de Redes Sociais para Blogger

Atendendo a pedidos, no post de hoje ensinarei a como instalar um gadget de redes sociais com efeito slide (expansível) no Blogger. São 5 boxes na verdade: Facebook, Twitter, Google+, Youtube e FeedBurner. Essencial para quem quer divulgar seu blog ou site de maneira mais personalizada.

As boxes ficam escondidas na lateral direita da página e, ao encostar o mouse, a box acionada aparece para o usuário clicar e acompanhar seus perfis sociais. O processo para adicionar esse gadget é bem simples. Tudo feito em 2 passos.

box facebook twitter googleplus youtube blogger

Confira como o gadget funciona (olhe na lateral direita da página)




1 - INSTALANDO O GADGET NO BLOGGER


Clique no botão abaixo para instalar o gadget.



2 - ALTERANDO O CÓDIGO


<style> img, a { border: 0; } #on { visibility: visible; } #off { visibility: hidden; } #facebook_div { width: 235px; height: 236px; overflow: hidden; } #twitter_div { width: 246px; height: 240px; overflow: hidden; } #google_plus_div { width: 290px; height: 250px; overflow: hidden; margin-left: 5px; margin-top: 1px; } #STfeedburner_div { width: 300px; height: 120px; overflow: hidden; margin-top: 5px; margin-left: -4px; } #ST_div { width: 300px; height: 97px; overflow: hidden; } /* right side style */ #facebook_right { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 235px; height: 236px; position: fixed; right: -239px; } #facebook_right img { position: absolute; top: -2px; left: -35px; } #facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 236px; left: -2px; top: -3px; } #twitter_right { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 250px; height: 240px; position: fixed; right: -254px; } #twitter_right_img { position: absolute; top: -2px; left: -35px; border: 0; } #google_plus_right { z-index: 10003; background-color: #F2F2F2; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-right: 2px solid #0056a0; border-left: 2px solid #0056a0; width: 290px; height: 250px; position: fixed; right: -294px; } #google_plus_right_img { position: absolute; top: -2px; left: -33px; border: 0; } #feedburner_right { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right: 2px solid #5b5b5b; border-left: hidden; width: 300px; height: 97px; position: fixed; right: -304px; } #feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0; } #ST_right { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #ST_right img { position: absolute; top: -2px; left: -101px; } /* left side style */ #facebook_left { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 235px; height: 236px; position: fixed; left: -239px; } #facebook_left img { position: absolute; top: -2px; right: -35px; } #facebook_left iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 236px; right: -2px; top: -3px; } #twitter_left { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 240px; position: fixed; left: -254px; } #twitter_left_img { position: absolute; top: -2px; right: -35px; border: 0; } #google_plus_left { z-index: 10003; background-color: #006ec9; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-left: 2px solid #0056a0; border-right: 2px solid #0056a0; width: 290px; height: 120px; position: fixed; left: -294px; } #google_plus_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #feedburner_left { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-left: 2px solid #5b5b5b; border-right: hidden; width: 300px; height: 97px; position: fixed; left: -304px; } #feedburner_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #ST_left { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #ST_left img { position: absolute; top: -2px; right: -101px; } .box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /*box-shadow*/ -webkit-box-shadow: 5px 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px 5px #CCCCCC; box-shadow: 5px 5px 5px #CCCCCC; padding: 10px; margin: 10px 0; } .enteryouremail { background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0px; } .submitbutton { background: #FF8000; border: 1px solid #F66303; /*box-shadow*/ -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666; font: bold 12px Arial, sans-serif; color: #000000; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; /*border-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; } #youtube_right { z-index: 10001; background-color: #fefefe; border:2px solid #ff0000; border-top:2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right:2px solid #5b5b5b; border-left: hidden; width:301px; height: 106px; position: fixed; right: -304px; } #youtube_right_img { position: absolute; top: -2px; left: -33px; border: </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("#facebook_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#facebook_right").stop( true, false).animate( { right: -239 }, 500); }); jQuery("#twitter_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#twitter_right").stop( true, false).animate( { right: -254 }, 500); }); jQuery("#google_plus_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop( true, false).animate( { right: -294 }, 500); }); jQuery("#feedburner_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#feedburner_right").stop( true, false).animate( { right: -304 }, 500); }); jQuery("#youtube_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#youtube_right").stop( true, false).animate( { right: -304 }, 500); }); }); </script> <br /> <div id="on"> <div id="facebook_right" style="top: 8%;"> <div id="facebook_div"> <img alt="" src="http://1.bp.blogspot.com/-WeW1BNfgIQ4/UrZ7-WGY1DI/AAAAAAAAHNQ/YKmMMwBCviU/s1600/STfacebook_right.png" /> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fseututorial&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" style="border: none; height: 250px; overflow: hidden; width: 250px;"></iframe> </div> </div> </div> <div id="on"> <div id="twitter_right" style="top: 24%;"> <div id="twitter_div"> <img id="twitter_right_img" src="http://3.bp.blogspot.com/-BgUBLu5c47Y/UrZ7-wIoZRI/AAAAAAAAHNU/xTID6ujK4_U/s1600/STtwitter_right.png" /> <div style="width:248px;font-size:8px;text-align:right;">
<script type="text/javascript">
document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=seututorial&settings=1,1,3,236,550,f4f4f4,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E"));</script> <a href="http://seututorial.com" target="_blank"></a> </div> </div> </div> </div> <div id="on"> <div id="google_plus_right" style="top: 41%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="http://3.bp.blogspot.com/-FCjqAlmrX30/UrZ7-qt7e1I/AAAAAAAAHNY/V1LcrT_junw/s1600/STgoogle_plus_right.png" /> <div style="float: left; margin: 10px 10px 10px 0;"> <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/116899029375914044550" data-source="blogger:blog:followers" data-width="270"></div> <script type="text/javascript"> (function () { window.___gcfg = { 'lang': 'pt' }; var po = document.createElement( 'script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName( 'script')[0]; s.parentNode.insertBefore( po, s); })(); </script> </div> </div> </div> <div id="on"> <div id="feedburner_right" style="top: 75%;"> <div id="STfeedburner_div"> <center> <h4 style="color: #f66303;">Receba as novidades por e-mail:</h4> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=seututorial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="enteryouremail" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Digite seu e-mail aqui...';}" onfocus="if (this.value == 'Digite seu e-mail aqui...') {this.value = '';}" type="text" value="Digite seu e-mail aqui..." /> <input name="uri" type="hidden" value="seututorial" /> <input class="submitbutton" type="submit" value="Assinar" /> </form> </center> <img id="feedburner_right_img" src="http://2.bp.blogspot.com/-S6k1Ud1hYyY/UHpJkuM7dfI/AAAAAAAAEOc/ACnXCA_cQP8/s320/feed-rss.png" /> <div style="float: right; padding: 20px; margin: 0px;"> <span style="font-size:8px;"></span> </div> </div> </div> <div id="on"> <div id="youtube_right" style="top:58%;"> <div id="youtube_div"> <img id="youtube_right_img" src="http://3.bp.blogspot.com/-VXmdKAduQ4Q/UrZ7_D9tXTI/AAAAAAAAHNg/CtL8H36MEAM/s1600/STyoutube_right.png" /> <div style="float:left;margin:1px 0px 0px 2px;"> <iframe src=http://www.youtube.com/subscribe_widget?p=youtubebrasil style="height:105px;width:300px;border:0;" scrolling="no" frameborder="0"></iframe> </div> </div> </div> </div></div></div>

Repare que no código do gadget, exibido nesse campo acima, eu grifei 5 itens com cores distintas. Cada cor representa uma rede social, a qual você deverá alterar. Leia a explicação a seguir e modifique de acordo.

seututorial => Altere para o nome da sua fanpage do Facebook (não o link, apenas o ID)
seututorial => Altere para o nome do seu perfil no Twitter
116899029375914044550 => Altere pelo o ID do link do seu perfil no Google+
seututorial => Altere para o nome do seu perfil no Feedburner
youtubebrasil => Altere para o nome do seu perfil no Youtube

Utilize o atalho Ctrl + F para encontrar os elementos e efetue as modificações necessárias.


Dúvidas ou problemas?
Deixe um comentário

68 comments:

  1. Não tem como colocar do lado esquerdo?

    ResponderExcluir
  2. Cara, perfeito! Funcionou maravilhosamente bem no meu blog.
    Era exatamente o que procurava há semanas e não achava.
    Acho que esse blog foi o primeiro a publicar esse material.
    Parabéns e muito obrigado!

    ResponderExcluir
  3. Puts...matou a pau. tava precisando disso tb a um bom tempo.
    Obrigado brother...funfou lindo no meu site!!!

    ResponderExcluir
  4. como coloca aquela bola que expandi verde

    ResponderExcluir
  5. Boa tarde, estou com problema. Ele funciona no meu blog, mas ele faz aquele slide que está no centro não mudar, sabe o que pode ser ?

    http://smsdccmsnb.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Boa tarde,

      Não consegui visualizar o box em seu blog para ver o problema. Você desinstalou?

      Excluir
  6. Boa tarde, amigo, sim, eu tinha tirado. Quer que eu volte para você ver qual é o problema ?

    Olhe o slide atual, aquele bem no centro. Qual você responder eu vou colocar o box e você vai ver como ficar.

    Abração

    ResponderExcluir
    Respostas
    1. Ah, entendi sua dúvida! Perdão!

      Quando o box das redes sociais é instalado, o slide de posts central não funciona, procede? Pode ser um conflito dos código jQuery, uma vez que ambos os slides utilizam-no.

      No código do box das redes sociais, remova a seguinte linha abaixo e veja se o problema irá persistir.

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

      Excluir
  7. Estou no seu aguardo. Qualquer coisa se ficar melhor pra ti, pode me adicionar no facebook.

    https://www.facebook.com/WallaceMalta

    ResponderExcluir
  8. Vou tentar isso, obrigado. Eu tive que esperar você responder, pois é um blog de uma unidade de saúde da Prefeitura, então não posso deixar no ar com falha, entende ? kkk .. Sim, procede o problema, irei tentar agora, um minuto.

    ResponderExcluir
  9. FUNCIONOU! Você é genial!
    Muito obrigado pela ajuda, amigo. Seu site já estava salvo em meus favoritos a tempos, muito util o seu trabalho.

    Obrigado pela atenção.

    Se não for incomodo, sera que você tem alguma dica para eu fazer no blog ? O blog é de uma unidade de saúde da Prefeitura do Rio de Janeiro.

    Abração e mais uma vez, obrigado.

    ResponderExcluir
    Respostas
    1. Que bom que deu certo!

      Quanto ao blog, está bom. Mas quer uma opinião sincera? Remova esse passarinho do Twitter que fica voando, pois ele tira a paciência do leitor uma vez que, às vezes, ele pousa sobre o conteúdo lido (ele é bem invasivo). Além do mais, você já tem a box de redes sociais com o Twitter para que a pessoa siga, se quiser.

      Outra recomendação: tome cuidado com o player. Ele retarda o carregamento do blog, causando impaciência nos leitores (especialmente quem não tem uma net rápida). Sem contar que, como o blog desenvolve um assunto bem sério, não tem muito a ver.

      É a minha opinião apenas, amigo.

      P.S.: Se quiser alterar o título do gadget LinkWithin ("Poderá também gostar de:"), temos um tutorial especial.

      http://www.seututorial.com/2010/12/mudar-nome-do-titulo-do-widget.html

      Grande abraço e sucesso com o blog!

      Excluir
  10. Muito obrigado, irei providenciar as mudanças sugeridas. Abração.

    ResponderExcluir
  11. Amigo, me de uma ajuda ? Sabe por qual motivo algumas coisas ficam por dentro do Flashvortex ? Por exemplo, a aba ''Quem somos'' fica atrás do menu do flashvortex.

    ResponderExcluir
    Respostas
    1. Amigo, pelo menos aqui, a aba "Quem Somos" do seu blog está normal.

      OBS: quando quiser tirar dúvidas que não estejam relacionadas ao artigo, peço que, por gentileza, poste em nosso fórum.

      http://www.seututorial.com/p/forum.html

      Ele serve exatamente para isso!
      Obrigado

      Excluir
  12. Era exatamente o que eu tava precisando cara. Valeeeeu.

    PS: curti demais esse lance de vc colocar um botão pra instalar o gadget automaticamente. Novidade de ponta em seu blog hein?? nunca vi isso em nenhum outro blog, inclusive naqueles que são voltados somente a dicas pro blogger.

    Parabéns!!!

    ResponderExcluir
  13. Perfeito mano! Tb tava precisando mto disso.

    ResponderExcluir
  14. Cara tudo funfo certinho so o facebook q n ta indo eu coloquei o nome certo mas n da
    meu blog : www.bandadarkdays.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Olá,

      Você configurou errado seu nome do Face. Você colocou o link inteiro do seu perfil. Você deve colocar apenas o ID do seu Face.

      Observe no código, onde eu digo para alterar "seututorial" para o seu perfil no Face, coloque apenas isso: 502084459804338

      Maneira errada:
      http://www.facebook.com/pages/Dark-Days/502084459804338

      Maneira correta:
      502084459804338

      Faça essa alteração e veja.

      Excluir
    2. Valeu cara funfo agr muito obrigado msm XD

      Excluir
  15. Achei muito legal, mas o Face deu pau: There was an error fetching the like box for the specified page.

    http://vidaaposanet.blogspot.com.br/

    ResponderExcluir
  16. Wenderson, não está funcionando porque você fez errado.

    Não é para colocar o link inteiro do seu perfil no Facebook. Coloque apenas seu ID: wendferreira.

    Forma errada:
    https://www.facebook.com/wendferreira

    Forma correta:
    wendferreira

    Quanto ao Feedburner, sua subscrição pode estar desativada. Antes de mais nada, verifique se você copiou o código do tutorial na íntegra, não deixando para trás nenhuma linha sequer.

    Se copiou tudo certo, tente ativar a subscrição no Feedburner. Acesse o site e configure como mostra na imagem do link abaixo.

    http://i.imgur.com/NaFZw.jpg

    Faça as alterações e me informe se resolveu.
    Abraços

    ResponderExcluir
    Respostas
    1. Fiz os dois:

      No 1º caso continua, mas a mensagem agora é:
      Could not retrieve the specified page. Please verify correct href was passed in.

      Já no segundo segui as instruções da imagem. Agora terei de publicar o código gerado no meu blog?

      Excluir
    2. No primeiro caso você ainda está errando. Você apagou parte do código iframe que faz com que o gadget do Facebook funcione.

      Quanto ao Feedburner, sim, é preciso publicar o código.

      Mas faça o procedimento abaixo, pois o código já foi todo comprometido.

      1) Exclua o gadget.
      2) Copie novamente o código do gadget do tutorial.
      3) Quanto for alterar seu nome do Facebook, altere APENAS o nome "seututorial" por "wendferreira". Não altere mais nada nisso. Somente o que eu descrevi.
      4) Faça o restante das alterações necessários normalmente (também sem modificar mais nada além do descrito no tutorial).

      Excluir
    3. Tô ficando doido, alterei somente o nome para wendferreira e ainda não deu certo, e no caso do feed, por que o último "SeuTutorial" está com iniciais maiusculas? Tem diferença? Qual?

      Excluir
    4. Wenderson, estou achando que o gadget está conflitando com algum outro código em seu blog. Veja que até o gadget do Twitter não está mostrando suas atualizações, a não ser que você não tenha configurado seu nome do Twitter nele.

      O código do gadget desse tutorial está funcionando normalmente, pois se não estivesse, no meu blog de testes (DEMO) ele também não estaria funcionando. Para ter certeza, eu excluí o gadget do blog de teste e recoloquei, e ainda assim funcionou perfeitamente! Você teria algum outro blog, só para testar esse gadget nele?

      Quanto ao último "SeuTutorial" em maiúsculo não há diferença alguma. Se você quiser você pode colocar todas palavras em maiúsculas, ou todas em minúsculas, que não irá interferir. O código não é case sensitive.

      Excluir
    5. Vou tentar excluir todos os gagdets e começar do zero... Qualquer coisa te peço um help.

      Excluir
    6. Sabe o que é mais estranho? Que se coloco o gadget sem alteração ele funciona, ele para qdo os nomes...

      Excluir
  17. Cara limpei meu blog troquei a template e mesmo assim não funcionou. Tá osso...

    ResponderExcluir
    Respostas
    1. Wenderson, descobri a causa do seu problema.

      Não é possível fazer com que a likebox funcione em seu blog usando seu Face pessoal. Você tem de criar uma página. Somente assim o gadget do Facebook irá funcionar corretamente.

      Excluir
  18. Obrigado cara..funfou 100% no meu blogger.

    ResponderExcluir
  19. muito fera
    era exatamente o q eu tava precisando
    bem q vcs poderiam add o do youtube tb,mais é só uma dica
    vlwssss

    ResponderExcluir
  20. Meu Isso Que é codigo Veja como Ficou No Meu Site
    http://junior-pes.blogspot.com

    ResponderExcluir
  21. por favor cara, tem como vc alterar o codigo para deixar só o do facebook e o de novidades juntos?

    Agradeço desde já!

    ResponderExcluir
  22. o cara tem como c me passar o css desse botão => DEMO ??

    Falow...

    ResponderExcluir
  23. Boa tarde, fiz todos os procedimentos e estão funcionando. Menos o face, mas acredito que há algo errado com o meu ID, tenho a impressão que ele está com menos números do que deveria. Já fucei e refucei tudo o que poderia me mostrá-lo, porém, me volta sempre o mesmo número... É possível verificar isso para mim? Abre a aba, mas está absolutamente em branco... Grato.

    ResponderExcluir
    Respostas
    1. Karl Mot, a ID está errada realmente. Você não me informou seu Facebook para eu averiguar melhor, mas se for o que eu encontrei no Google, baseado no nome do seu blog, você deve acrescentar somente a ID a seguir no código.

      HomemDeMilAlmas

      Na onde está "seututorial" em vermelho no código, coloque essa ID acima no lugar. Não altere mais nada. Somente isto.

      Excluir
    2. Ops, desculpe, segue endereço do facebook... Grato.

      Excluir
    3. Acabei de seguir sua orientação, funcionou beleza, está tudo 100%... Grato, e parabéns pelo seu trabalho.... Abraços.

      Excluir
    4. Sem querer abusar da bondade, mas já abusando. Tem alguma forma de eu personalizar o link do blog para postar no face. Exemplo, ao invés de colocar a url inteira como link, eu abreviá-la, mas sem perder a funcionalidade de direcionar para a página? Mais uma vez agradeço a atenção... Abraços.!

      Excluir
    5. Você pode utilizar um encurtador de links. É a única maneira.

      Sugiro o Google URL Shortener: http://goo.gl/

      Basta colocar o link do seu blog e clicar em Shroten URL.
      Será gerada um link bem curto do seu blog e redirecionará para ele normalmente.

      Excluir
    6. Entendi... Mais uma vez, muito obrigado... Abraços!

      Excluir
  24. Boa tarde Marcelo!

    Depois de inúmeras tentativas com meu ID do Face, meu nome completo, apenas o 1º nome, não obtive resultado positivo na configuração do Facebook, enquanto que nos demais deu tudo certo.

    Pode me dar uma luz?

    Obrigado.

    http://hwertosantos.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Boa tarde, Hwerto!

      O ID do Face nada mais é do que o nome ou sequência de números que vem logo após a barra (/) do link do seu perfil.

      Porém, por alguma razão até então desconhecida, a likebox do seu Face não aparece mesmo colocando o ID correto. Eu tentei aqui tanto com seu ID de nome (hwerto.santos) quanto com seu ID numérico (1772846880). Eu fiz várias alterações no código e mesmo assim não funcionou. Inclusive, gerei uma likebox única a partir da página oficial do Face para seu perfil, deixando somente o gadget do Face, e continuou na mesma. Veja por si próprio gerando sua likebox através da página abaixo:

      https://developers.facebook.com/docs/reference/plugins/like-box/

      Isso me leva a crer que possa haver algo em seu perfil que esteja bloqueando isso, ou que seja até um problema com a likebox do Face mesmo. Mas se fosse um problema com a likebox em si, todos estariam com o mesmo problema.

      Vou dar uma pesquisada aqui para ver se encontro algo específico para seu problema.

      Excluir
    2. Obrigado pela atenção...fico na expectativa de uma solução positiva.

      Excluir
    3. Hwerto, estava quebrando a cabeça aqui até lembrar de uma coisa! Não é possível criar uma likebox a partir de um perfil pessoal, somente se tiver uma página (fan page) no Face. Isto é, você não conseguirá criar uma likebox com sua conta normal.

      Eu sabia que era algo sobre um perfil pessoal, porém, só agora me lembrei deste fator. Inclusive, acrescentarei isso ao post como nota importante.

      O único jeito de fazer com que essa likebox funcione em seu blog é convertendo sua conta para uma página.

      Veja como fazer isso lendo o artigo abaixo:
      http://www.facebook.com/help/116067818477568/#How-do-I-convert-my-personal-account-to-a-Facebook-Page

      Se aceitar uma sugestão, você pode criar uma página só para seu blog no Face. Assim você terá seu perfil normal, e a fan page do seu blog. Na verdade, é o que todos fazem -- eu inclusive. Sempre que acessar um site/blog, observe que há uma página para o site/blog e um perfil pessoal do administrador.

      Abraços

      Excluir
    4. Obirgado Marcelo mais uma vez pela atenção, vou seguir sua sugestão e ver o resultado.

      Excluir
  25. Nossa, muito obrigada por compartilhar!! Há tempos que procuro um Box assim!Um abraço!
    http://larisanders.blogspot.com.br/

    ResponderExcluir
  26. adorei esta pag tem muito comteudo, bacana eu tenha um blog
    como devo aperfeiçoar.
    abraço

    ResponderExcluir
  27. Olá Marcelo,
    Boa noite!
    Coloquei no meu blog e ele funcionou perfeitamente até uns dias atrás.
    O box do twiter está totalmente azul e não mostra nada. O que pode ter acontecido?
    Aquardo retorno.
    Grande abraço!
    Emanuel Galvão

    ResponderExcluir
    Respostas
    1. Olá Emanuel, boa noite!

      Primeiramente, obrigado pelo comentário e principalmente pelo report. Se você não tivesse reportado eu não saberia.

      O código referente ao Twitter realmente deve estar bugado.

      Mas adianto ao amigo que já estou empenhado nisso e tentando encontrar a fonte desse problema. Em breve lhe darei um retorno conclusivo, ok? Se preferir, posso lhe avisar diretamente em seu blog, e-mail ou G+.

      Grande abraço e ótima semana!

      Excluir
    2. Marcelo co seguiu resolver o bug do Twitter? Se sim favorvme enviar no email, grato.

      Excluir
  28. Obrigado Marcelo.
    Aguardo retorno.
    Meu e-mail é: emanuelpoeta@gmail.com
    Meu blog é: www.poesiagalvaneana.com.br

    Grande abraço!

    ResponderExcluir
  29. Olá!
    Amigo no meu blogger funcionou quase perfeito,o efeito e muito legal, mais no meu caso apenas a aba do twitter nao deu certo. Se puder ajudar te mando a copia do script completo, assim vc da uma checada pra vir onde e o meu erro.
    Desde ja muito obrigado!

    ResponderExcluir
    Respostas
    1. Olá Wendell,

      Como expliquei ao amigo Emanuel, no comentário acima do seu, o script do Twitter está com o bug. Mas acho que é um bug global, pois todo site que está trabalhando com esse script deles contém tal problema.

      Já estou analisando o script e assim que descobrir a falha eu atualizo o post.

      Abraços

      Excluir
  30. Legal.
    Só uma dúvida, todos funcionam, menos o twitter, fica com uma imagem azul e não mostra nada.
    Grato.

    ResponderExcluir
  31. estou com problema no twitter também... meu id do twitter seria uma série de numeros, não meu nome, correto?
    153219340
    peguei esse de um site, que descobre id, pois não tinha certeza do que seria... caso proceda a informação, avise-me... sei q não é a area certa, mas continuando no trem, eu usei uns robots sem saber ao certo a função deles... antes disso, ao digitar "site:thelotg.blogspot.com.br" todos os posts do meu blog apareciam como resultados, e depois de usa-los, apenas aparece 1 resultado e ainda contém um erro... eu desativei os robots no menu configurações>preferencias de pesquisas>rastreadores e indexação, porém ainda n aparece os resultados esperados. é normal a demora ou eu não corrigi da forma correta? obrigado, e valeu pelo gadget ^^

    ResponderExcluir
  32. Obrigado por corrigir o problema com a box do Twitter Marcelo.

    Tudo tá funcionando agora na mais perfeita paz! =]

    Recomendo muito esse gadget. Bonito, prático e simples de manusear.

    Abração e Feliz Natal a todos!!!!

    ResponderExcluir
  33. Perfeito! Muito bom o widget.

    Gostaria de saber tbm como colocar essa barra da esquerda pra compartilhar o post?

    Att,
    Adoniran Camilo

    ResponderExcluir
  34. Olá!

    Marcelo quando instalo este GADGET da erro de de wiget.content você pode me enviar por e - mail este Código pois ele tem do youtube esta completo este preciso muito colocar no meu blogger e configurar certinho eu agradeço caso enviar para meu e-mail este código esta bloqueado no seu site e possível me enviar por este email durval.montanhas@gmail.com

    ResponderExcluir
  35. Oi boa noite você poderia me passa o código da barra lateral do youtube, pelo comentário ou pelo email equipepedaldascachoeiras@gmail.com
    Obrigado!

    ResponderExcluir
  36. Amigo fiz tudo certo,só estou com problemas de inserir o id do Twitter,coloco como ensina e ñ aparece nada além disso "Make your own twitter website widget" o que devo fazer? vou deixar meu blog pra vc da uma olhada http://loborelato.blogspot.com.br/ aguardo um retorno e ótimo trabalho parabéns.

    ResponderExcluir
  37. Amigo, parabéns pelo trabalho, foi de ótima ajuda. Só estou com um problema, não consegui configurar o twitter, aparece a mensagem "Make your own twitter website widget", pode me ajudar por favor?

    ResponderExcluir
  38. O botão onde diz para instalar o gadget NÃO ESTÁ FUNCIONANDO!

    ResponderExcluir