Como Reinicializar PartilhaThis Buttons With Specific Sharing Parameters

Neste guia, vamos ensinar-lhe como reinicializar (recarregar) os nossos botões ShareThis para utilizar parâmetros específicos de partilha. Por defeito, o widget loader ShareThis carrega assim que o navegador encontra a tag JavaScript; tipicamente na tag da sua página. ShareThis assets are generally loaded from a CDN closest to the user. Contudo, se desejar alterar a configuração padrão para que o widget carregue após a sua página web ter completado o carregamento, então basta definir um parâmetro na página.

A reinicialização dos botões permitir-lhe-ia fazê-lo:

• Assumir o controlo de quando exibir os botões, por exemplo, até que um modal ou pop-up se abra.
• Ter diferentes instâncias dos botões na mesma página com diferentes configurações, por exemplo, se pretender apresentar apenas o botão do Twitter numa parte específica e o do Facebook noutra. Ou se pretender ter diferentes idiomas em diferentes conjuntos de botões.
• Propriedades dos botões de partilha de actualização automática quando novas ligações são carregadas com botões de partilha (scroll infinito).

Nota: Se não quiser reinicializar os botões com parâmetros específicos, pode simplesmente usar a janela.__sharethis__.initialize() como está sempre que o seu modal, pop-up, etc. for activado. Note que poderá ter de definir um atraso de cerca de 0,3 a 1 segundo antes de adicionar a linha de código acima para dar tempo para o contentor aparecer, caso contrário, a função será chamada demasiado cedo

<strong>Add <div> and Javascript code</strong>

// render the html
<identificação de mergulho="Meus botões de linha".></div>

// load the buttons
janela.__sharethis__.load(botões inline-share-buttons,
{/* aqui é onde as suas configurações devem estar, leia a secção Configuração */

Uma vez que você tenha adicionado a parte acima do código, você agora é capaz de incluir qualquer uma ou todas as seguintes opções de configuração abaixo.

Opções de configuração

 config = { 
   alinhamento: STRING, // left, right, center, justified.
   contentor: STRING, // id of the dom element to load the buttons into
   habilitado: BOOLEAN,
   tamanho_da_fonte: INTEGER, // small = 11, medium = 12, large = 16.
   id: STRING, // load the javascript into a specific dom element by id attribute
   etiquetas: STRING, // "cta", "counts", or "none"
   língua: STRING   // IETF language tag in which the buttons' labels are,
   min_count: INTEGER, // minimum amount of shares before showing the count
   estofamento: INTEGER, // small = 8, medium = 10, large = 12.
   raio: INTEGER, // in pixels
   redes: ARRAY[STRING],
   show_total: BOOLEAN,
   botões_móveis_de_espectáculo: BOOLEAN, // forces sms to show on desktop
   use_native_counts: BOOLEAN, // uses native facebook counts from the open graph api
   tamanho: INTEGER, // small = 32, medium = 40, large = 48.
   espaçamento: INTEGER, // spacing = 8, no spacing = 0.
};

Exemplo

// render the html
<identificação de mergulho="Meus botões de linha".></div>
// load the buttons
janela.__sharethis__.load(botões inline-share-buttons, {
  alinhamento: "esquerda,
  id: "Meus botões de linha".,
  habilitado: verdadeiro,
  tamanho_da_fonte: 11,
  estofamento: 8,
  raio: 0,
  redes: ["mensageiro, "gorjear, 'pinterest', sharethis, 'sms', "wechat],
  tamanho: 32,
  botões_móveis_de_espectáculo: verdadeiro,
  espaçamento: 0,
  url: "https://www.sharethis.com", // custom url
  título: "Meu título personalizado",
  língua: "en",
  imagem: "https://18955-presscdn-pagely.netdna-ssl.com/wp-content/uploads/2016/12/ShareThisLogo2x.png", // useful for pinterest sharing buttons
  descrição: "Minha descrição personalizada",
  nome de usuário: "Compartilhar Isto" // custom @username for twitter sharing
});

//state variable for scrolling
let scrolling = false;

//in case of scrolling, change the state of the scrolling variable to true
window.onscroll = function() {
scrolling = true;
}
/*create an interval that checks every 3 seconds the state of the scrolling variable, if any scrolling has been done in that interval, reinitialize the buttons*/

setInterval(() => {
if (scrolling) {
scrolling = false;
window.sharethis.initialize()
}
}, 3000);

Notas

• Tenha em mente que as tags Open Graph terão precedência quando compartilhar no Facebook e em outros canais sociais. Se estiver ligando a uma URL personalizada, certifique-se de ter as tags de Open Graph preenchidas também para essa página.
• Tal como com as nossas outras ferramentas, recomendamos a mudança do sítio para produção ao vivo antes de o experimentar, uma vez que existem alguns recursos que não são passados durante um ambiente local/de teste.

Ordem de Precedência

É importante lembrar a ordem de precedência pela qual o código ShareThis processa propriedades compartilhadas. Geralmente, recomendamos usar uma abordagem pela qual as propriedades de compartilhamento são especificadas em suas páginas para evitar erros.

1. Qualquer propriedade JavaScript dinamicamente especificada (i.e. precedência máxima)
2. Propriedades especificadas nas etiquetas (ou seja, segunda precedência)
3. Etiquetas de Protocolo Gráfico Aberto (ou seja, menor precedência)