Box do Facebook, Google+ e Twitter na lateral do blog, juntos em um único gadget!

em 26 de dezembro de 2013

Ontem eu mostrei como inserir uma aba lateral no blog com os seguidores do Google+.
Relembre aqui:

Seguidores do Google+ em box expansível na lateral do blog 

Conforme prometi vou mostrar hoje como inserir várias abas ao mesmo tempo, em um gadget apenas, com os seguidores do Google+, do Twitter e s pessoas que curtiram a fanpage do blog.
Ficará assim:
http://portfolio.elainegaspareto.com/

Para ter em seu blog é muito simples, mas tem que prestar atenção e seguir uns passos.
Leia com atenção e siga os passos que dará tudo certo.

1º passo:
Caso você tenha inserido abas laterais anteriormente, seja do Google+ ou do Facebook, terá que retirar pois ficaria estranho e repetitivo.

 2º passo:
Copie o código abaixo:


Copiar o código


Com dificuldades para copiar o código? 
Leia: Como usar os tutoriais deste blog?

3º passo:
Depois de copiar cole o código em um bloco de notas. Reserve porque vamos fazer alterações nele antes de inserir em seu blog.

4º passo:
A seguir você precisa gerar o box dos seguidores do Twitter.
Clique aqui:
http://www.musicpaax.com/twitter/
Você verá esta página:


Clique em Gerar código.
Caso nunca tenha acessado esse aplicativo será solicitado que você conceda acesso, numa página semelhante a esta:

Autorize o aplicativo e na página que abrir coloque seu username do Twitter, defina largura e altura do box e copie o código gerado.

5º passo:
Volte ao bloco de notas onde colou o código das abas e onde está escrito AQUI O CÓDIGO DO TWITTER  cole, claro, o código que copiou do aplicativo.

6º passo:
Copie este código:



E cole no bloco de notas onde você lê COLE AQUI O CÓDIGO DE SUA FANPAGE.
A única alteração necessária é colocar o nome exato de sua fanpage onde você lê AQUI O NOME DE SUA FANPAGE.
Algumas são uma sequência numérica, outras é um nome mesmo. a minha, por exemplo, é ElaineGaspareto.
Veja como a sua é escrita e coloque exatamente como é, seja nome seja sequência numérica. Ficará assim, veja meu exemplo:

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FElaineGaspareto&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"> </iframe> 

7º passo:
Onde você lê ENDEREÇO COMPLETO DE SEU PERFIL G+ coloque, claro, o endereço de seu perfil Google+.
Novamente alguns são sequência numérica, outros são nomes, sempre precedidos de +.
O meu, por exemplo, é assim:
https://plus.google.com/+ElaineGasparetoParada
Veja qual é o seu, copie o endereço e cole no local indicado no código que está no bloco de notas.

Depois de todas as alterações feitas é hora de inserir em seu blog. 
Acesse a aba Layout de seu blog, clique em Adicionar um gadget, escolha a opção HTML/JAVASCRIPT  e na janela que expandir cole todo o código que está no bloco de notas.
Salve, arraste para onde desejar (isso não afetará a exibição do gadget, que será sempre na laterla direita de seu blog) e salve as alterações.

Prontinho!
Bem facinho, apenas é preciso seguir os passos direitinho e não tem erro.

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

29 comentários , comente também!

  1. Xiiiiiiii rsrsrsrsrsr agora ficou complicado!
    Que código grandão!
    Mas depois de todo o trabalho, fica bonita a barra no Blog.
    Beijos querida.

    ResponderExcluir
  2. Olha eu te dando trabalho de novo... Amiga, não deu certo. Ficam as abinhas do Face e do Google + certinho, só que não abrem. E a do Twitter fica aberta toda sem os seguidores dentro.
    Estou enviando um print via e-mail pra vc ver, se não for mto incômodo.
    Até tirei o gadget do blog por enqto pra ver o que vc acha.
    Bjs e obrigada com carinho!

    ResponderExcluir
    Respostas
    1. Karin, releia o tutorial, certamente você pulou algo ou esqueceu algo.
      Também pode ser que haja algo em seu blog que cause conflito, às vezes acontece.
      bjsss

      Excluir
    2. Tá, amiga, combinado, então.
      Tomara que dê certo, né?
      Obrigadão!
      Bjs!!!

      Excluir
  3. Oi Elaine!
    Adorei a dica! Mas como já tenho o box do Face e do Google+ na lateral do blog (e nem tenho tuínter!), e foi você que colocou para mim, não vou nem mexer!
    ...mas que é uma tentação, é! Eu amei!!!
    Beijinhos,
    Cris

    ResponderExcluir
  4. Nossa adorei Elaine!
    Obrigada pelo carinho de sempre querida!
    Que vc tenha um Natal cheio de bênçãos e que venha um Ano Novo espetacular!
    Beijinhos até o infinito...

    ResponderExcluir
  5. Olá Elaine! Só passei aqui pra te desejar uma boa madrugada!
    Beijinhos e Feliz Ano Novo pra você querida!
    http://dulcineiadesa.blogspot.com

    ResponderExcluir
  6. Nossa muito legal a sua dica achei muito bem explicada , obrigado


    http://horahaga.blogspot.com.br/ (Moda Masculina , Musica , Humor e Muito mais )

    ResponderExcluir
  7. Elaine,
    Adorei o site... me ajudou muito a arrumar o meu e me incentivou a não larga-lo mais. ^^
    Te levei pra la e dei os merecidos créditos.

    Bjos e bom fim de ano

    ResponderExcluir
  8. Oi Elaine,

    Adorei o blog.
    e me ajudou muito com as dicas para melhorar o meu.
    te levei pra lá e dei os merecidos creditos.
    Me incentivou também a não largar mais o meu.
    Te desejo otimo fim de ano.

    bjos

    ResponderExcluir
  9. Eu fiz e ficou lindo! kkk Sigo seu blog desde o início do meu há séculos kkk e suas dicas são maravilhosas!

    Estou querendo mudar o domínio do meu blog, poderia me indicar algo, como ,aonde!
    Ficarei muito grata!
    http://martaeunice.blogspot.com.br/
    martavictor@hotmail.com

    ResponderExcluir
  10. Olá querida!
    Passei pra te desejar um Feliz 2014!!!!
    Que este ano que se inicia seja repleto de luz, paz, saúde e alegrias, muitas alegrias!!!
    E que Deus te dê força e fé para passar pelos momentos menos alegres!
    Conta comigo sempre, tá?!
    Beijinhos,
    Cris

    ResponderExcluir
  11. Oi Cristina, ótimo blog e principalmente este post,
    eu coloquei no meu blog, porém quando eu passo o mouse em cima do Google Plus, a aba do Twitter abre junto. O que eu fiz de errado será?

    abraço!

    ResponderExcluir
  12. o meu ficou ñ aparece os sseguidores

    ResponderExcluir
    Respostas
    1. Rebeka, você colocou o endereço de seus perfis certinho?

      Excluir
  13. Oi Elaine eu instalei esse gadget no meu blog só que o botão do twitter no começo quando carrega a página ele começa no meio da página e depois passando o mouse nele que ele volta pro canto direito, tem como arrumar isso? ou será conflito com algum outro script?
    veja http://jesussuasalvacao.blogspot.com.br/2014/01/o-que-e-um-profeta.html

    ResponderExcluir
    Respostas
    1. Willian, pode ser conflito com algum script, talvez o passarinho do Twitter.
      Mas não sei dizer ao certo porque não conheço seu blog a fundo. Tem que testar, de preferência em um blog de testes, até achar o que causa a incompatibilidade.
      bjssss

      Excluir
    2. AH eu vou verificar o que é ^^
      mesmo assim ótimo scritp, só me explica uma coisa como ponho no topo no meio do blog?

      Excluir
  14. Oi Elaine,
    Como sempre, você nos ensina coisas muito legais pra incrementar o nosso cantinho.
    Eu tive o mesmo problema que o WiLLiaN acima, a aba do Twitter ficava sempre no meio quando carregava e só depois de passar o cursor ela sumia. Insisti muito, refiz várias vezes, e o erro sempre acontecia. Hoje resolvi retirar a parte do Twitter, deixando só do Facebook e Google+. Ficaram separados mas pelo menos não carrega no meio. Tem problema alterar assim o seu código?
    Adorei a dica e aproveitei pra colocar o coraçãozinho com o botão de comentar e as últimas postagens em slides.
    E claro, enquanto brinco e aplico tudo isso estou aprendendo um bocado. Adoro. Obrigada mais uma vez pela sua generosidade em compartilhar tudo isso com a gente.

    Beijos

    ResponderExcluir
    Respostas
    1. Patrícia, acho que o problema é causado em alguns templates. Em um meu aconteceu, acho que é conflito do script do Twitter.
      Pode alterar o código à vontade, vou tentar e ver se consigo eliminar o espaço.

      Muito obrigada pelo comentário fofo.
      Olhei seu blog e fico orgulhosa quando vejo que as coisas que ensino estão sendo úteis.
      beijosssss

      Excluir
  15. O meu do twiitter ficou igual ao da menina , ele fica aberto , e fiz 4 vezes o processo tem nada n !

    ResponderExcluir
  16. era esse o código que eu estava procurando, só que ja tenho a abinha do twitter no meu blog e ela não abre e não consigo remover, será que você faz ideia do que pode ser?

    ResponderExcluir
  17. Deu certo!
    Somente o facebook que nao ficou, eu fiz de tudo mudei e também verifiquei como a ordem númerica era. E agora?

    ResponderExcluir
  18. Quando entro no meu blog a aba do twitter já fica acionada e quando vou no do google+ abre também a do twitter. O que aconteceu?

    ResponderExcluir
    Respostas
    1. Provavelmente algum conflito com gadgets já instalados em seu blog. Ou conflito com o template.

      Excluir
  19. Olá tudo bem? eu não estou conseguindo copiar os códigos ... você pode me ajudar....porfavorrr..rsrsrss.... abraços!!!!!

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…