Como podemos ajudar?

FC 11268 :: Como personalizar os ícones de compartilhar das redes sociais?

As tags especiais share apresentam ícones padronizados das redes sociais, que o lojista pode alterar se desejar.

Ao utilizar as tags de redes sociais <ShareFacebook>, <ShareTwitter>, <ShareGooglePlus> e <SharePinterest> os ícones padronizados abaixo serão inseridos no design da loja:

É possível personalizar estes ícones:

Ícones padrõesExemplos de ícones personalizados

Ícones padrões

Exemplos de ícones personalizados

Segue exemplo de código para personalização destes ícones. Insira este código no arquivo rodape.htm da loja:

<table id=IconesRedesSociais_Rodape><tr>
  <td><ShareFacebook></td>
  <td><ShareTwitter></td>
  <td><ShareGooglePlus></td>
  <td><SharePinterest></td>
  <td><Facebook type="like" send="true" layout="button_count" width="150" show_faces="false"></td>
  <td><GooglePlusOne size="small"></td>
</tr></table>

No exemplo acima, o id IconesRedesSociais_Rodape foi colocado na table que exibe os botões de compartilhamento. Se preferir, utilize uma <div> com este ID.

No arquivo Rodape.htm insira o seguinte código para personalizar os ícones:

<script>
var sRodapeContent=document.getElementById("IconesRedesSociais_Rodape");
if(sRodapeContent)var aImgsShare=sRodapeContent.getElementsByTagName('img');
if(aImgsShare)
  for(var i=0;i<aImgsShare.length;i++){
    if(aImgsShare[i].className=='EstImgShareFacebook'){
     aImgsShare[i].setAttribute('data-src',FC$.PathImg +'icofacebook.png');
     aImgsShare[i].src=FC$.PathImg +'icfacebook.png';
   }
    if(aImgsShare[i].className=='EstImgShareTwitter'){
     aImgsShare[i].setAttribute('data-src',FC$.PathImg +'icotwitter.png');
     aImgsShare[i].src=FC$.PathImg +'ictwitter_1.png';
   }
    if(aImgsShare[i].className=='EstImgShareGooglePlus'){
     aImgsShare[i].setAttribute('data-src',FC$.PathImg +'icogoogleplus.png');
     aImgsShare[i].src=FC$.PathImg +'icogoogleplus.png';
   }
    if(aImgsShare[i].className=='EstImgSharePinterest'){
     aImgsShare[i].setAttribute('data-src',FC$.PathImg +'icopinterest.png');
     aImgsShare[i].src=FC$.PathImg +'icopinterest.png';
   }
  }
</script>

No exemplo acima, a loja deve enviar as imagens IcTwitter.png, IcFacebook.png, IcoGooglePlus.png e IcoPinterest personalizadas para a pasta IMAGES, através do gerenciador de arquivos da loja.