Detalhes da dúvida

Versão do fórum : phpBB3
Nível de acesso : Fundador
Navegador usado : Google Chrome
Membros afetados : Vários usuários, uns sim e outros não
Endereço do fórum : projetokf.forumeiros.com

Descrição do problema

Como colocar os botões de redes sociais igual aqui no "Siga as novidades do forumeiros"

Boa tarde!

Peço que leia: https://ajuda.forumeiros.com/t98510-icones-redes-social

Até mais.

Colocar os botões num widget, só o face, twitter e youtube?

Olá!

Não é preciso colocar em um widget basta adicionar o javascript e o CSS.

Cumprimentos.

Altera o java pfvr pra ficar só o twitter, fb e youtube?

Claro que sim!

Aqui tem:

Código:

jQuery(function(){var facebook="http://www.facebook.com/forumeirospt";var twitter="https://twitter.com/Forumeiros_PT";var google="https://plus.google.com/u/0/106647941075849166848/posts";var youtube="https://www.youtube.com/user/tvforumeiros";jQuery('#search-box').before('<div id="siga_fdf"><a class="social-button fb-but" href="'+facebook+'" target="_blank" title="Facebook"></a><a class="social-button tw-but" href="'+twitter+'" target="_blank" title="Twitter"></a><a class="social-button yt-but" href="'+youtube+'" target="_blank" title="Youtube"></a></div>')});


Até mais.

Deu certo, sei que to pedindo demais, sério, desculpa, mas o do insta padronizado assim como ficaria?

Saudações,

Estamos aqui para lhe dar suporte no que for preciso, então pare de pedir desculpas, por favor?
Bem, mas aí precisaríamos de uma imagem do Instagram com o mesmo efeito das outras...

A senhora tem aí para ajudar?
Até mais.
Sennior

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre JavaScript & jQuery'

Td bem ><
Nop, peguei tudo daqui como me foi fornecido.

Saudações,

Bem, o código é esse:

Código:

jQuery(function () {
  var facebook = "http://www.facebook.com/forumeirospt";
  var instagram = "https://instagram.com/";
  var twitter = "https://twitter.com/Forumeiros_PT";
  var google = "https://plus.google.com/u/0/106647941075849166848/posts";
  var youtube = "https://www.youtube.com/user/tvforumeiros";
  jQuery('#search-box').before('<div id="siga_fdf"><a class="social-button fb-but" href="' + facebook + '" target="_blank" title="Facebook"></a><a class="social-button tw-but" href="' + twitter + '" target="_blank" title="Twitter"></a><a class="social-button ins-but" href="' + instagram + '" target="_blank" title="Instagram"></a><a class="social-button yt-but" href="' + youtube + '" target="_blank" title="Youtube"></a></div>');
});

E o CSS, só que:

Código:

/* PERSONALIZAR REDES SOCIAIS */
#siga_fdf { background: url(http://i.imgur.com/oW7B8sP.png) no-repeat scroll 10px 5px transparent; float: left; padding-left: 170px; }

.social-button {
  background:no-repeat 50% 50% #333;
  border-radius:3px;
  display:inline-block;
  margin:3px;
  height:32px;
  width:32px;
  -webkit-transition:300ms;
    -moz-transition:300ms;
      -o-transition:300ms;
          transition:300ms;
}
.social-button:hover { background-color:#000 }

/* facebook */
.social-button.fb-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/fb11.png) }
.social-button.fb-but:hover { background-color:#3B5998 }

/* twitter */
.social-button.tw-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/tw10.png) }
.social-button.tw-but:hover { background-color:#5EA9DD }

/* instagram */
.social-button.ins-but { background-image:url(LINK DO BOTÃO DO INSTAGRA) }
.social-button.ins-but:hover { background-color:#BB0000 }

/* youtube */
.social-button.yt-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/yt10.png) }
.social-button.yt-but:hover { background-color:#E52C27 }

/* rss feed */
.social-button.rs-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/rs10.png) }
.social-button.rs-but:hover { background-color:#FAA21B }
/* PERSONALIZAR REDES SOCIAIS */

Precisamos de um link de botão para o Instagram. Se encontrar, modifique onde esta escrito LINK DO BOTÃO DO INSTAGRA para o link do botão.
Até mais.
Sennior

obrigada