Botões de compartilhamento nativos para seu site

Marcar Para Assistir Mais Tarde

<!-- Carregando o Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<div id="social-share" style="display: flex; justify-content: center; gap: 10px; margin: 20px 0;">
  <button onclick="shareFacebook()"><i class="fab fa-facebook-f"></i></button>
  <button onclick="shareInstagram()"><i class="fab fa-instagram"></i></button>
  <button onclick="shareX()"><i class="fab fa-x-twitter"></i></button>
  <button onclick="shareTikTok()"><i class="fab fa-tiktok"></i></button>
  <button onclick="shareFlogao()"><i class="fas fa-star"></i></button>
</div>

<script>
  const shareUrl = window.location.href;

  function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
      alert("URL copiada para a área de transferência!\nAgora cole e compartilhe manualmente.");
    }).catch(() => {
      alert("Não foi possível copiar a URL.");
    });
  }

  function shareFacebook() {
    const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`;
    window.open(url, '_blank');
  }

  function shareX() {
    const url = `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(document.title)}`;
    window.open(url, '_blank');
  }

  function shareInstagram() {
    copyToClipboard(shareUrl);
    window.open("https://www.instagram.com/", "_blank");
  }

  function shareTikTok() {
    copyToClipboard(shareUrl);
    window.open("https://www.tiktok.com/", "_blank");
  }

  function shareFlogao() {
    copyToClipboard(shareUrl);
    window.open("https://flogão.com/", "_blank");
  }
</script>
<a href="https://flogão.com" style="display:none;">flogão</a>

Copiar Código de Compartilhamento

Botões de Compartilhamento Nativos para Seu Site

Facilitar o compartilhamento de conteúdo é essencial para ampliar o alcance do seu site e conquistar mais visitantes. Pensando nisso, este código prático em JavaScript cria botões de compartilhamento para as principais redes sociais do momento: Facebook, Instagram, X (antigo Twitter) e TikTok.

Por que usar este código?

• Simplicidade e praticidade: Os botões abrem diretamente as páginas oficiais de compartilhamento ou postagem nas redes sociais, tornando o processo rápido e intuitivo para o usuário.
• Compatibilidade: Para redes sociais que não possuem uma API pública para compartilhamento direto (como Instagram e TikTok), o código copia automaticamente a URL da página para a área de transferência e abre a página de postagem dessas redes, facilitando o compartilhamento manual.
• Sem configurações complexas: Diferente de muitos plugins ou bibliotecas que exigem configurações específicas, este código é plug-and-play — basta inserir em seu site e os botões já funcionam.
• Principais redes cobertas: Com ele, seus visitantes podem compartilhar conteúdo no Facebook, Instagram, X e TikTok — as plataformas que dominam a cena social atualmente.

Como funciona?

• Facebook e X: O botão abre a janela oficial para compartilhar o link da página atual, com o texto pré-preenchido.
• Instagram e TikTok: Como não há endpoint direto para compartilhamento, o código copia a URL da página para a área de transferência e abre a página de criação de stories ou upload, para que o usuário cole e compartilhe facilmente.
• Alertas úteis: O usuário recebe uma mensagem para saber que o link foi copiado, evitando dúvidas e tornando o processo mais transparente.

Por que usar este código no seu site?

Este é um jeito simples e eficiente de incentivar seus visitantes a compartilharem seu conteúdo nas redes sociais mais usadas. Isso gera:

• Mais visitas orgânicas vindas do compartilhamento espontâneo.
• Maior visibilidade para suas páginas, posts e campanhas.
• Uma experiência de usuário leve, sem depender de plugins pesados ou complicados.

Como usar?

Basta copiar o código do JavaScript e o bloco HTML dos botões para seu site ou template. Não é necessário fazer configurações extras nas redes sociais nem conectar APIs complexas. O código funciona diretamente, ajudando seus visitantes a compartilharem seu conteúdo sem esforço.

---

Compartilhar conteúdo nunca foi tão fácil! Use estes botões no seu site e veja como seus visitantes rapidamente ampliam seu alcance nas redes sociais mais relevantes.