Menu fechado

Botões de compartilhamento nativos para seu site

LoadingMarcar Para Assistir Mais Tarde

URL copiada! Compartilhar agora?

<style>
  .social-share-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 20px 0 !important;
  }
  .share-btn {
    background-color: #1d4ed8 !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s !important;
    box-sizing: border-box !important;
  }
  .share-btn:hover {
    background-color: #2563eb !important;
  }
  .share-icon {
    width: 24px !important;
    height: 24px !important;
    fill: white !important;
    display: block !important;
  }

  /* Modal */
  #share-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  #share-modal .modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    min-width: 200px;
  }
  #share-modal .modal-content p {
    margin-bottom: 16px;
    font-size: 16px;
  }
  #share-modal .modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  .modal-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .modal-button.cancel {
    background: #ddd;
  }
  .modal-button.confirm {
    background: #1d4ed8;
    color: white;
  }
</style>

<div class="social-share-wrapper">
  <button id="btn-facebook" class="share-btn" onclick="shareFacebook()" aria-label="Facebook">
    <svg id="icon-facebook" class="share-icon" viewBox="0 0 24 24"><path d="M22.675 0h-21.35C.6 0 0 .6 0 1.342v21.316C0 23.4.6 24 1.325 24h11.495v-9.294H9.691v-3.622h3.13V8.413c0-3.1 1.894-4.788 4.66-4.788 1.325 0 2.464.099 2.797.143v3.24l-1.918.001c-1.504 0-1.794.715-1.794 1.763v2.31h3.587l-.467 3.622h-3.12V24h6.116c.725 0 1.324-.6 1.324-1.342V1.342C24 .6 23.4 0 22.675 0z"/></svg>
  </button>
  <button id="btn-instagram" class="share-btn" onclick="shareInstagram()" aria-label="Instagram">
    <svg id="icon-instagram" class="share-icon" viewBox="0 0 24 24"><path d="M7.75 2h8.5A5.75 5.75 0 0122 7.75v8.5A5.75 5.75 0 0116.25 22h-8.5A5.75 5.75 0 012 16.25v-8.5A5.75 5.75 0 017.75 2zm0 2A3.75 3.75 0 004 7.75v8.5A3.75 3.75 0 007.75 20h8.5A3.75 3.75 0 0020 16.25v-8.5A3.75 3.75 0 0016.25 4h-8.5zm8.5 1.5a1 1 0 110 2 1 1 0 010-2zM12 7a5 5 0 110 10 5 5 0 010-10zm0 2a3 3 0 100 6 3 3 0 000-6z"/></svg>
  </button>
  <button id="btn-x" class="share-btn" onclick="shareX()" aria-label="X">
    <svg id="icon-x" class="share-icon" viewBox="0 0 24 24"><path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 9.98 9.98 0 01-3.127 1.195 4.92 4.92 0 00-8.384 4.482A13.978 13.978 0 011.671 3.149a4.902 4.902 0 001.523 6.573 4.903 4.903 0 01-2.229-.616c-.054 2.28 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.927 4.927 0 004.6 3.417A9.868 9.868 0 010 19.54a13.952 13.952 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646a9.936 9.936 0 002.411-2.538z"/></svg>
  </button>
  <button id="btn-tiktok" class="share-btn" onclick="shareTikTok()" aria-label="TikTok">
    <svg id="icon-tiktok" class="share-icon" viewBox="0 0 16 16"><path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3z"/></svg>
  </button>
  <button id="btn-flogao" class="share-btn" onclick="shareFlogao()" aria-label="Flogao">
    <a href="https://xn--flogo-dra.com/" rel="noopener"><svg id="icon-flogao" class="share-icon" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></a>
  </button>
</div>

<!-- Modal customizado -->
<div id="share-modal">
  <div class="modal-content">
<p style="background-color: white; color: black; padding: 8px; border-radius: 4px;">URL copiada! Compartilhar agora?</p>

    <div class="modal-buttons">
      <button class="modal-button cancel" onclick="closeModal()">CANCELAR</button>
      <button class="modal-button confirm" id="modal-confirm-btn">COMPARTILHAR</button>
    </div>
  </div>
</div>

<script>
  const shareUrl = window.location.href;
  let pendingOpenLink = null;

  function copyAndConfirm(openLink) {
    navigator.clipboard.writeText(shareUrl)
      .then(() => {
        pendingOpenLink = openLink;
        document.getElementById('share-modal').style.display = 'flex';
      })
      .catch(() => alert('Não foi possível copiar a URL.'));
  }

  function closeModal() {
    document.getElementById('share-modal').style.display = 'none';
    pendingOpenLink = null;
  }

  document.getElementById('modal-confirm-btn').onclick = () => {
    if (pendingOpenLink) pendingOpenLink();
    closeModal();
  };

  function shareFacebook() {
    copyAndConfirm(() =>
      window.open(
        `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`,
        '_blank'
      )
    );
  }
  function shareInstagram() {
    copyAndConfirm(() =>
      window.open('https://instagram.com/', '_blank')
    );
  }
  function shareX() {
    copyAndConfirm(() =>
      window.open(
        `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(document.title)}`,
        '_blank'
      )
    );
  }
  function shareTikTok() {
    copyAndConfirm(() =>
      window.open('https://tiktok.com/', '_blank')
    );
  }
  function shareFlogao() {
    copyAndConfirm(() =>
      window.open('https://xn--flogo-dra.com/', '_blank')
    );
  }
</script>

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.

Por favor, não esqueça de colocar este link como Referência Bibliográfica em sua Publicação:

Please complete the required fields.




🙏 POR FAVOR COMPARTILHE ISSO 👇

Assistir Online Grátis Botões de compartilhamento nativos para seu site, Ver Online de Graça Botões de compartilhamento nativos para seu site, Filme Online Grátis Botões de compartilhamento nativos para seu site, Assistir Online de Graça Botões de compartilhamento nativos para seu site, Filme Completo de Graça Botões de compartilhamento nativos para seu site, Assista o que é Botões de compartilhamento nativos para seu site? Entenda a notícia sobre o que aconteceu sobre Botões de compartilhamento nativos para seu site.

Publicado em:Diário do Flogão - Previsão do Futuro e do Passado | Máquina do Tempo Online

Deixe um comentário

Nova denúncia

Fechar