Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Redes Sociais Widget Vanessa S.

Incluir Gadget Social Follow na Sidebar do blog

É sempre bom exibir no seu blog, as redes sociais as quais participa. Ao incluir gadget social follow na sidebar, fará com que seus leitores tenham outras opções de acompanhar as novidades que você publica, ou até mesmo como forma de interação.

Hoje veremos como instalar na barra lateral (sidebar) um gadget com botões de acompanhamento para as principais redes sociais: Google+, Facebook, Twitter, Pinterest e subscrição de feed por email.

Antes de continuar gostaria de indicar um artigo. Você sabia que é possível ganhar dinheiro na internet com blogs e outros tipos de negócios? Clique no link e saiba mais.

gadget social follow
A instalação é bem simples.

Gadget Social Follow

1º passo – Acesse o painel do blogger e vá ao menu “layout“, clique em “adicionar um gadget”, escolha o modo HTML/javascript e cole o seguinte código:


<style type="text/css">
/*<!CDATA[*/
#socialfollow{
width:270px; /*--edite largura se quiser--*/
margin:auto;padding:0;
background:#FFFFFF; /*--edite cor de fundo se quiser--*/
border: 1px solid #ccc;
}
.googleplus {height: 57px;border:0;}
.facebook {
	border-bottom: 1px solid #ccc;margin-top: -2px;padding: 5px 10px;}
.gplusone {
	border-top: 1px solid #ccc;border-top: 1px solid white;
	font-size: .87em;color: black;padding: 9px 0 0 11px;
	line-height: 24px;height:30px;}
.gplusone span {
	display: inline-block;vertical-align: middle;height: 20px;
	margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.twitter {
	border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
.twitter a.twitter-follow-button {
	width:200px;display: block;}
.twitter iframe {margin: 9px 11px;}
.pinterest{margin: 9px 11px;}

.emailbox {
border-top: 1px solid #ccc;
padding: 12px 16px;overflow: hidden;}
.emailbox form{
width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.emailbox input.emailu {
float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border:1px solid #eee;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.emailbox input.emailu:focus {color: #333;}
.emailbox input.submitu {
-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.emailbox input.submitu:hover {
text-decoration: none;}
.submitu{
color:#444 !important;
border:1px solid #CCC;text-shadow:0 1px 0 #fff;background: #dbdbdb;background: -moz-linear-gradient(top, #dbdbdb 0%, #bbbbbb 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(100%,#bbbbbb));background: -webkit-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: -o-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: -ms-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#bbbbbb',GradientType=0 );}
.submitu:hover{
background: #e6e6e6;background: -moz-linear-gradient(top, #e6e6e6 0%, #bbbbbb 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#bbbbbb));background: -webkit-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: -o-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: -ms-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#bbbbbb',GradientType=0 );}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.getmore a {
display: inline-block;font-weight: normal;text-decoration: none;text-shadow: 1px 1px 1px #fff;font-size:10px; float:right;}
/*]]>*/
</style>
    <div id="socialfollow">
	<div class="googleplus">
	    <script type="text/javascript">
		/*<![CDATA[*/
		window.___gcfg = {lang: 'pt'};
		(function(){
		    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 class="g-plus" data-href="https://plus.google.com/ID-PAGINA-GOOGLE-PLUS" data-width="270" data-height="69" data-theme="light"></div>
	</div>
	<div class="facebook">
	    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2FNOME-DA-SUA-PAGINA&send=false&layout=standard&width=250&show_faces=true&action=like&colorscheme=light&font=arial&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:90px;" allowtransparency="true"></iframe>
	</div>
	<div class="gplusone">
	    <script type="text/javascript">/*<![CDATA[*/
	      (function() {
		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 class="g-plusone" data-size="medium" data-href="URL-DO-SEU-BLOG/"></div>
	    <span>Recomende no Google+</span>
	</div>
	<div class="twitter">
	    <a href="https://twitter.com/USERNAME-TWITTER" class="twitter-follow-button" data-show-count="true">Follow @mundo_blogger</a>
	    <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
	</div>
<div class="pinterest">
<a href="http://pinterest.com/USERNAME-PINTEREST/"><img src="http://passets-lt.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a></div>


		<div class="emailbox">
	    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOME-DO-SEU-FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
		<table width="100%">
		    <tr>
			<td>
			    <input class="emailu" name="email" placeholder="Digite seu email" type="text"/>
			</td>
			<td width="64px">
			    <input class="submitu" type="submit" value="ASSINE"/>
			</td>
		    </tr>
		</table>
		<input name="uri" type="hidden" value="NOME-DO-SEU-FEED"/>
		<input name="loc" type="hidden" value="pt_BR"/>
	    </form>
	</div>
	<div class="getmore">
	    <a href="https://www.mundoblogger.com.br/2012/08/gadget-social-follow-no-blogger.html">Instale este gadget</a>
	</div>
    </div>

 
Não esqueça que você deve ALTERAR os trechos destacados em amarelo:

1. Substitua ID-PAGINA-GOOGLE-PLUS pela numeração correspondente a sua página do Google Plus. Para descobrir esta numeração, entre em sua página do Google Plus e verifique toda a URL de sua página, copia apenas o código em número, conforme imagem abaixo:

gadget-social-follow

2. Substitua URL-FACEBOOK-PAGE pelo link da página no Facebook do seu blog.
3. Altere URL-DO-SEU-BLOG pelo link do seu blog.
4. Substitua USERNAME-TWITTER pelo nome de usuário no twitter.
5. Substitua USERNAME-PINTEREST pelo nome de usário do seu perfil no Pinterest.
6. Altere NOME-DO-SEU-FEED por apenas o nome dele (duas vezes).

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

21 Comentários

  1. luka disse:

    eu queria saber como colocar esses botoes de redes sociais que você tem abaixo do titulo das postagens

  2. Victtor Mello disse:

    Nossa, muito obrigado ficou perfeito aqui velho.

  3. Vanessa,estou levando.
    Obrigada por partilhar,bjs

  4. ola a imagem dos meus fans do facebook e do google
    + nao aparece no blog, porque?

  5. Camila disse:

    Olá Vanessa, agradeço muito pelas dicas, me ajudaram a deixar meu blog melhor e do jeito q eu queria, linkei vc lá no meu blog falando isso.
    Bom, eu estou com uma dúvida e queria ver se tem conserto. Com relação ao Follow do google+…. ele fica bastante distante da margem da direita, então por ex. se eu tento diminuir a margem, ele ainda caberia dentro da bordam(certo?), no entanto é apagado parte do meu nome ou da minha pág no google+ ficando um espação entre o botão Follow e a margem, horrível né. Teria como arrumar isso? já tentei mexer nas margin, padding e por aí vai e nada deu certo.
    Aguardo e obrigada, Camila.

    • Vanessa disse:

      Lamento, mas para tentar descobrir teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelo comentário.

      • Camila disse:

        Olá! Muito obrigada pelo retorno.
        Mas não teria como me dar só uma luz, uma dica do q eu posso mexer, aí o restante eu fuço..rs… vc q conhece bem.
        Obrigada, bjos.

        • Olá Camila! O seu problema é muito simples e não precisa de um busca minuciosa não! Isso aconteceu comigo também! Oque ocorre é que nós estamos sem pessoas curtindo a a pagina, quando começarem a curtir já vai aparecer! entendeu? Aquele espaço é para mostrar as fotos de quem curte e não que o código deu Bug, não aconteceu isso com a vanessa porque ela tem milhões de likes kkk

      • Liandro Melo disse:

        Como aumento o tamanho da imagem dos fãs do facebook?

  6. Camila disse:

    Olá Vanessa, tudo bem?
    Quero agradecer pelas dicas, na página ‘sobre’ do meu blog eu cito o Mundo Blogger além de outros q me ajudaram a deixar o blog como eu gostaria.

    Mas fiquei com uma dúvida na parte do google +. Não sei se outros tb perceberam, mas a margem direita, ou melhor, a distância da margem até onde termina o Seguir/Follow é grande. Então se eu coloco um width de 230 por ex. ele acaba apagando o nome ‘GeCah’ cadastrado no google +…. sobrando no final somente o g+ e o botão seguir. A largura da lateral do meu blog é em torno de 240, e esse do google+ caberia tranquilamente, mas ele insiste em deixar uma distância enorme da margem! rs
    Teria jeito isso?
    Aguardo e obrigada por tudo.
    Camila.

  7. Bia disse:

    mas e se o blog não tiver pagina no face, que link coloco?

  8. junior disse:

    as imagens dos amigos da fã page e do Google + não aparece pq??

  9. Ananda Maciel disse:

    Olá Nessa, eu não poderia deixar de vir aqui lhe parabenizar e agradecer por este gadget tão completo e útil, sem falar que o visual dele nem é feio, gostei bastante mesmo, principalmente porque não precisa editar o HTML lá do template, o que já é bem mais em conta.

    Também retirei esse tal de Pinterest, até o presente momento nunca havia ouvido falar rsrsrs’ Adoro os tutorias aqui do MB, alguns chegaram a não funcinar, como aquele de Artigos Relacionados com Imagem que não pegou de forma alguma :/

    Mais este widget funcionou perfeitamente e ficou super bacaninha, bom trabalho e dois abraços! =)

  10. Daniii :3 disse:

    OMG ,Nossaaaaa *—* Ameiii vlw

  11. Frank disse:

    olá, eu estou com uma duvida… tem como colocar borda arredondado nesse gadget?

  12. Yan Gomes disse:

    Verdade, ultimamente a maior divulgação que temos para nosso blog é as Redes Sociais e você está ensinando muito a gente, botando como buttons e até mesmo nesse estilo. Enfim, usei e creditei, ok? Mas eu queria só mais uma coisinha… tem como ensinar a gente a colocar um contador? Não precisa ser tão “personalizado” como o seu, só botar os números e apenas umas logozinha, sem efeito hover. Estou aqui esperando, beleza? E parabéns para o seu site, cada dia melhor!

    • Vanessa disse:

      Yan, Eu já publiquei um tutorial com um widget Contador Twitter+Feed+Posts+Comentários . Dá uma olhada pra ver se te agrada.
      Eu estou preparando um tutorial com mais um modelo diferente de contadores, depois eu publico.

      • Luan Ferraz disse:

        Como Faço para retirar do código só este “PINTEREST”? pois esse eu não tenho e nem sei como usa pode me ajudar?

        • Vanessa disse:

          Luan,
          Retira este trecho:

          <div class="pinterest">
          <a href="http://pinterest.com/USERNAME-PINTEREST/"><img src="http://passets-lt.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a></div>
          
Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.