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.
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&width=250&height=250&colorscheme=light&show_faces=true&border_color&stream=false&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>
<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
Deixe um comentário
Artigo escrito por Marcelo
Sou formado em Sistemas de Informação pela UFMG e pós-graduado em Segurança da Informação. Trabalho com TI há mais de 5 anos e sou professor particular de inglês. Nas horas bem vagas costumo arranhar uma guitarra e sou fã do bom e eterno rock'n'roll.
Receba as atualizações automaticamente
Não tem como colocar do lado esquerdo?
ResponderExcluirCara, perfeito! Funcionou maravilhosamente bem no meu blog.
ResponderExcluirEra 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!
Puts...matou a pau. tava precisando disso tb a um bom tempo.
ResponderExcluirObrigado brother...funfou lindo no meu site!!!
como coloca aquela bola que expandi verde
ResponderExcluirBoa 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 ?
ResponderExcluirhttp://smsdccmsnb.blogspot.com.br/
Boa tarde,
ExcluirNão consegui visualizar o box em seu blog para ver o problema. Você desinstalou?
Boa tarde, amigo, sim, eu tinha tirado. Quer que eu volte para você ver qual é o problema ?
ResponderExcluirOlhe o slide atual, aquele bem no centro. Qual você responder eu vou colocar o box e você vai ver como ficar.
Abração
Ah, entendi sua dúvida! Perdão!
ExcluirQuando 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>
Estou no seu aguardo. Qualquer coisa se ficar melhor pra ti, pode me adicionar no facebook.
ResponderExcluirhttps://www.facebook.com/WallaceMalta
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.
ResponderExcluirFUNCIONOU! Você é genial!
ResponderExcluirMuito 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.
Que bom que deu certo!
ExcluirQuanto 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!
Muito obrigado, irei providenciar as mudanças sugeridas. Abração.
ResponderExcluirAmigo, 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.
ResponderExcluirAmigo, pelo menos aqui, a aba "Quem Somos" do seu blog está normal.
ExcluirOBS: 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
Era exatamente o que eu tava precisando cara. Valeeeeu.
ResponderExcluirPS: 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!!!
Perfeito mano! Tb tava precisando mto disso.
ResponderExcluirCara tudo funfo certinho so o facebook q n ta indo eu coloquei o nome certo mas n da
ResponderExcluirmeu blog : www.bandadarkdays.blogspot.com.br
Olá,
ExcluirVocê 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.
Valeu cara funfo agr muito obrigado msm XD
ExcluirDe nada, amigo.
ExcluirAbraços
Achei muito legal, mas o Face deu pau: There was an error fetching the like box for the specified page.
ResponderExcluirhttp://vidaaposanet.blogspot.com.br/
Meu Feedburner tbm não está funcionando. Ajude.
ResponderExcluirWenderson, não está funcionando porque você fez errado.
ResponderExcluirNã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
Fiz os dois:
ExcluirNo 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?
No primeiro caso você ainda está errando. Você apagou parte do código iframe que faz com que o gadget do Facebook funcione.
ExcluirQuanto 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).
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?
ExcluirWenderson, 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.
ExcluirO 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.
Vou tentar excluir todos os gagdets e começar do zero... Qualquer coisa te peço um help.
ExcluirSabe o que é mais estranho? Que se coloco o gadget sem alteração ele funciona, ele para qdo os nomes...
ExcluirCara limpei meu blog troquei a template e mesmo assim não funcionou. Tá osso...
ResponderExcluirWenderson, descobri a causa do seu problema.
ExcluirNã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.
Obrigado cara..funfou 100% no meu blogger.
ResponderExcluirmuito fera
ResponderExcluirera exatamente o q eu tava precisando
bem q vcs poderiam add o do youtube tb,mais é só uma dica
vlwssss
Meu Isso Que é codigo Veja como Ficou No Meu Site
ResponderExcluirhttp://junior-pes.blogspot.com
por favor cara, tem como vc alterar o codigo para deixar só o do facebook e o de novidades juntos?
ResponderExcluirAgradeço desde já!
o cara tem como c me passar o css desse botão => DEMO ??
ResponderExcluirFalow...
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.
ResponderExcluirKarl 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.
ExcluirHomemDeMilAlmas
Na onde está "seututorial" em vermelho no código, coloque essa ID acima no lugar. Não altere mais nada. Somente isto.
Ops, desculpe, segue endereço do facebook... Grato.
ExcluirAcabei de seguir sua orientação, funcionou beleza, está tudo 100%... Grato, e parabéns pelo seu trabalho.... Abraços.
ExcluirSem 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.!
ExcluirVocê pode utilizar um encurtador de links. É a única maneira.
ExcluirSugiro 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.
Entendi... Mais uma vez, muito obrigado... Abraços!
ExcluirBoa tarde Marcelo!
ResponderExcluirDepois 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/
Boa tarde, Hwerto!
ExcluirO 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.
Obrigado pela atenção...fico na expectativa de uma solução positiva.
ExcluirHwerto, 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.
ExcluirEu 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
Obirgado Marcelo mais uma vez pela atenção, vou seguir sua sugestão e ver o resultado.
ExcluirNossa, muito obrigada por compartilhar!! Há tempos que procuro um Box assim!Um abraço!
ResponderExcluirhttp://larisanders.blogspot.com.br/
De nada Larissa. Qualquer dúvida é só dizer.
ExcluirAbraços
adorei esta pag tem muito comteudo, bacana eu tenha um blog
ResponderExcluircomo devo aperfeiçoar.
abraço
obrigado! ajudou...
ResponderExcluirOlá Marcelo,
ResponderExcluirBoa 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
Olá Emanuel, boa noite!
ExcluirPrimeiramente, 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!
Marcelo co seguiu resolver o bug do Twitter? Se sim favorvme enviar no email, grato.
ExcluirObrigado Marcelo.
ResponderExcluirAguardo retorno.
Meu e-mail é: emanuelpoeta@gmail.com
Meu blog é: www.poesiagalvaneana.com.br
Grande abraço!
Olá!
ResponderExcluirAmigo 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!
Olá Wendell,
ExcluirComo 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
Legal.
ResponderExcluirSó uma dúvida, todos funcionam, menos o twitter, fica com uma imagem azul e não mostra nada.
Grato.
estou com problema no twitter também... meu id do twitter seria uma série de numeros, não meu nome, correto?
ResponderExcluir153219340
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 ^^
Obrigado por corrigir o problema com a box do Twitter Marcelo.
ResponderExcluirTudo 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!!!!
Perfeito! Muito bom o widget.
ResponderExcluirGostaria de saber tbm como colocar essa barra da esquerda pra compartilhar o post?
Att,
Adoniran Camilo
Olá!
ResponderExcluirMarcelo 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
Oi boa noite você poderia me passa o código da barra lateral do youtube, pelo comentário ou pelo email equipepedaldascachoeiras@gmail.com
ResponderExcluirObrigado!
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.
ResponderExcluirAmigo, 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?
ResponderExcluirO botão onde diz para instalar o gadget NÃO ESTÁ FUNCIONANDO!
ResponderExcluir