Gerador de Links DM - Multi-Redes | Blogueiros United

🔗 Gerador de Link DM Multi-Redes (6x)

Links diretos para Instagram, X, LinkedIn, Telegram, Messenger e E-mail!

Instagram DM (ig.me)

Link: ig.me/m/USUARIO

Nome de Usuário do Instagram (@)

X (Twitter) DM

Link: twitter.com/intent/tweet?screen_name=...

Nome de Usuário do X (@)

Mensagem Padrão (Opcional)

Telegram Chat

Link: t.me/USUARIO?text=MENSAGEM

Nome de Usuário do Telegram (@)

Mensagem Padrão (Opcional)

Facebook Messenger

Link: m.me/USUARIO_DA_PÁGINA

Nome de Usuário da Página/Perfil (após facebook.com/)

E-mail (Mailto)

Link: mailto:ENDEREÇO?subject=ASSUNTO&body=MENSAGEM

Seu Endereço de E-mail

Assunto Padrão (Opcional)

Corpo da Mensagem Padrão (Opcional)

LinkedIn (Perfil)

Link: linkedin.com/in/SUA_URL

URL Personalizada do LinkedIn Apenas a parte final da URL (linkedin.com/in/SUA_URL_AQUI)

Seu Link Mágico (DM) Testar Link

Criado com 💚 e Gemini por Pejotta. Multi-Redes Edition.

Adicione esta ferramenta ao seu blog

Clique no botão abaixo para pegar o link, copie o link e cole em uma página estática

×

Por favor, aguarde a liberação do código.

Seu acesso será liberado em:

15

Segundos. Não feche esta janela.

Seu Código (Copie e Cole)

<div class="dm-generator-wrapper"> <div class="social-dm-bg"> <div class="container"> <header> <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyg-2mYB2O0bXWA3YGzO07jfXMAWcumdnK7p-5mrzfZIqYiCARvnmAHBHkgXTyv6_YfL9gp2Z0HH7iy2GhinhaQ4d6xNJU0xTwse6dzfVpAEKh1e1VKFTktHfaScsWA0jOIHshTeeqxOQeqcfO3nDwP219YrX-vgXTNd_ux8F3KvjefkN1a5Us8ufY0A/s1600/9.png"><img alt="Gerador de Links DM - Multi-Redes | Blogueiros United" border="0" data-original-height="264" data-original-width="1000" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyg-2mYB2O0bXWA3YGzO07jfXMAWcumdnK7p-5mrzfZIqYiCARvnmAHBHkgXTyv6_YfL9gp2Z0HH7iy2GhinhaQ4d6xNJU0xTwse6dzfVpAEKh1e1VKFTktHfaScsWA0jOIHshTeeqxOQeqcfO3nDwP219YrX-vgXTNd_ux8F3KvjefkN1a5Us8ufY0A/s1600/9.png"/></a></div> <h1>🔗 Gerador de Link DM Multi-Redes</h1> <p>Crie links diretos para Instagram, X (Twitter) e LinkedIn!</p> </header> <div class="tab-buttons"> <button class="tab-button active" data-tab="instagram"> <span style="font-size: 1.2em;"><i class="fa-brands fa-instagram"></i></span> Instagram DM </button> <button class="tab-button" data-tab="twitter"> <span style="font-size: 1.2em;"><i class="fa-brands fa-x-twitter"></i></span> X (Twitter) DM </button> <button class="tab-button" data-tab="linkedin"> <span style="font-size: 1.2em;"><i class="fa-brands fa-linkedin"></i></span> LinkedIn (Perfil) </button> </div> <div class="glass-card"> <div id="instagram" class="tab-content active"> <h2 style="color: white; margin-top: 0;">Instagram DM (ig.me)</h2> <p style="color: #eee;">Links ig.me/m/USUARIO</p> <div class="input-group"> <label for="instaUsername">Nome de Usuário do Instagram (@)</label> <input type="text" id="instaUsername" placeholder="Ex: meuusuario" required> </div> <div class="input-group"> <label for="instaMessage">Mensagem Padrão (Obs.)</label> <textarea id="instaMessage" placeholder="Links para DM do Instagram não suportam mensagem pré-preenchida de forma nativa."></textarea> </div> <button class="cta-button" data-network="insta">Gerar Link Instagram</button> </div> <div id="twitter" class="tab-content"> <h2 style="color: white; margin-top: 0;">X (Twitter) DM</h2> <p style="color: #eee;">Links twitter.com/intent/tweet</p> <div class="input-group"> <label for="twitterUsername">Nome de Usuário do X (@)</label> <input type="text" id="twitterUsername" placeholder="Ex: meuusuarioX" required> </div> <div class="input-group"> <label for="twitterMessage">Mensagem Padrão (Opcional)</label> <textarea id="twitterMessage" placeholder="Ex: Olá! Vim pelo seu link e gostaria de falar sobre..."></textarea> </div> <button class="cta-button" data-network="twitter">Gerar Link X (Twitter)</button> </div> <div id="linkedin" class="tab-content"> <h2 style="color: white; margin-top: 0;">LinkedIn (Perfil)</h2> <p style="color: #eee;">Link direto para o seu Perfil</p> <div class="input-group"> <label for="linkedinCustomUrl">URL Personalizada do LinkedIn</label> <input type="text" id="linkedinCustomUrl" placeholder="Ex: fulanodetal" required> <small style="color: #ddd;">Apenas a parte final da URL (linkedin.com/in/SUA_URL_AQUI)</small> </div> <button class="cta-button" data-network="linkedin">Gerar Link LinkedIn</button> </div> <div id="resultBox" class="result-box hidden"> <label for="generatedLink">Seu Link Mágico (DM)</label> <input type="text" id="generatedLink" readonly> <button id="copyButton" class="copy-button">Copiar Link</button> <a id="openButton" class="open-button" href="#" target="_blank" rel="noopener noreferrer">Testar Link</a> </div> </div> <footer style="text-align:center;"> <p>Criado com 💚 e Gemini por Pejotta. Multi-Redes Edition.</p> </footer> </div> </div> </div> <style> #content-wrapper {max-width:100%;} /* * ESTILOS CSS ISOLADOS * Toda regra começa com .dm-generator-wrapper */ .dm-generator-wrapper { --social-blue: #0077b5; /* LinkedIn */ --social-pink: #d62976; /* Instagram */ --social-dark: #14171a; /* X/Twitter */ --glass-bg: rgba(255, 255, 255, 0.15); --glass-border: rgba(255, 255, 255, 0.4); box-sizing: border-box; margin: 20px auto; width: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .dm-generator-wrapper .container{ margin: 0 auto; max-width: 600px; } .dm-generator-wrapper *, .dm-generator-wrapper *::before, .dm-generator-wrapper *::after { box-sizing: inherit; } .dm-generator-wrapper .social-dm-bg { background: linear-gradient(135deg, #1f50a8 0%, #d62976 50%, #feda75 100%); padding: 30px 15px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); } .dm-generator-wrapper header h1, .dm-generator-wrapper header p, .dm-generator-wrapper footer p, .dm-generator-wrapper .glass-card label, .dm-generator-wrapper .glass-card small { color: white; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .dm-generator-wrapper .glass-card { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 20px; padding: 30px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); margin-bottom: 20px; } .dm-generator-wrapper .tab-buttons { display: flex; justify-content: space-between; margin-bottom: 20px; } .dm-generator-wrapper .tab-button { flex-grow: 1; padding: 10px 15px; margin: 0 5px; border: none; border-radius: 10px; background-color: rgba(255, 255, 255, 0.2); color: white; font-weight: bold; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .dm-generator-wrapper .tab-button:first-child { margin-left: 0; } .dm-generator-wrapper .tab-button:last-child { margin-right: 0; } .dm-generator-wrapper .tab-button:hover { background-color: rgba(255, 255, 255, 0.4); } .dm-generator-wrapper .tab-button.active { background-color: white; color: var(--social-blue); /* Cor de destaque */ box-shadow: 0 0 15px rgba(255, 255, 255, 0.8); transform: translateY(-2px); } .dm-generator-wrapper .tab-content { display: none; padding: 10px; } .dm-generator-wrapper .tab-content.active { display: block; } .dm-generator-wrapper .input-group { margin-bottom: 20px; text-align: left; } .dm-generator-wrapper input[type="text"], .dm-generator-wrapper textarea { width: 100%; padding: 12px 15px; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); font-size: 16px; transition: all 0.3s ease; box-sizing: border-box; } .dm-generator-wrapper input:focus, .dm-generator-wrapper textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--social-blue); } .dm-generator-wrapper textarea { resize: vertical; min-height: 50px; } .dm-generator-wrapper .cta-button, .dm-generator-wrapper .copy-button, .dm-generator-wrapper .open-button { width: 100%; padding: 15px; border: none; border-radius: 10px; font-size: 18px; font-weight: bold; cursor: pointer; margin-top: 15px; transition: all 0.3s ease; text-decoration: none; display: block; text-align: center; color: white; } .dm-generator-wrapper .cta-button { background-color: var(--social-pink); box-shadow: 0 5px 15px rgba(214, 41, 118, 0.4); } .dm-generator-wrapper .cta-button[data-network="twitter"] { background-color: var(--social-dark); box-shadow: 0 5px 15px rgba(20, 23, 26, 0.6); } .dm-generator-wrapper .cta-button[data-network="linkedin"] { background-color: var(--social-blue); box-shadow: 0 5px 15px rgba(0, 119, 181, 0.4); } .dm-generator-wrapper .cta-button:hover { transform: translateY(-2px); opacity: 0.9; } .dm-generator-wrapper .result-box { margin-top: 25px; padding: 20px; background: rgba(255, 255, 255, 0.2); border-radius: 15px; border: 1px solid var(--glass-border); box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5); } .dm-generator-wrapper .result-box.hidden { display: none; } .dm-generator-wrapper #generatedLink { background: rgba(0, 0, 0, 0.05) !important; color: white; } .dm-generator-wrapper .copy-button { background-color: #34b7f1; } .dm-generator-wrapper .open-button { background-color: #4CAF50; } .dm-generator-wrapper .copy-button:hover, .dm-generator-wrapper .open-button:hover { transform: translateY(-2px); opacity: 0.9; } /* NOVAS REGRAS: Backgrounds Específicos */ .dm-generator-wrapper .social-dm-bg { padding: 30px 15px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); transition: background 0.5s ease; /* Transição suave na troca de background */ } /* Background do Instagram (Gradiente Rosa/Roxo) */ .dm-generator-wrapper .social-dm-bg.bg-instagram { background: linear-gradient(135deg, #405DE6 0%, #D62976 50%, #FEDA75 100%); } /* Background do X / Twitter (Cor Escura) */ .dm-generator-wrapper .social-dm-bg.bg-twitter { background-color: #14171a; background-image: radial-gradient(#293035 15%, transparent 15%); /* Textura sutil */ background-size: 10px 10px; } /* Background do LinkedIn (Cor Azul) */ .dm-generator-wrapper .social-dm-bg.bg-linkedin { background-color: #0077b5; background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 50%, transparent 50%); background-size: 1px 20px; } @media screen and (max-width: 1100px) { #content-wrapper { padding: 0; } } </style> <script> // LÓGICA JAVASCRIPT EMBUTIDA document.addEventListener('DOMContentLoaded', () => { const wrapper = document.querySelector('.dm-generator-wrapper'); if (!wrapper) return; const tabButtons = wrapper.querySelectorAll('.tab-button'); const tabContents = wrapper.querySelectorAll('.tab-content'); const generateButtons = wrapper.querySelectorAll('.cta-button'); const resultBox = wrapper.querySelector('#resultBox'); const generatedLinkInput = wrapper.querySelector('#generatedLink'); const copyButton = wrapper.querySelector('#copyButton'); const openButton = wrapper.querySelector('#openButton'); const socialDmBg = wrapper.querySelector('.social-dm-bg'); // Novo elemento a ser manipulado // Array de classes de background que serão removidas a cada troca const bgClasses = ['bg-instagram', 'bg-twitter', 'bg-linkedin']; // Função para trocar o background const updateBackground = (network) => { // 1. Remove todas as classes de background socialDmBg.classList.remove(...bgClasses); // 2. Adiciona a classe da rede atual socialDmBg.classList.add(`bg-${network}`); }; // --- Lógica de Abas (Paginação) e Background --- tabButtons.forEach(button => { button.addEventListener('click', () => { const targetTab = button.getAttribute('data-tab'); // Troca de Abas tabButtons.forEach(btn => btn.classList.remove('active')); tabContents.forEach(content => content.classList.remove('active')); resultBox.classList.add('hidden'); button.classList.add('active'); wrapper.querySelector(`#${targetTab}`).classList.add('active'); // Troca de Background (Chama a nova função!) updateBackground(targetTab); }); }); // --- Lógica de Geração de Link (Mantida como antes) --- generateButtons.forEach(button => { button.addEventListener('click', (e) => { const network = e.target.getAttribute('data-network'); let fullLink = ''; // Lógica de geração de links (a mesma que já funciona) if (network === 'insta') { const usernameInput = wrapper.querySelector('#instaUsername'); const username = usernameInput.value.replace('@', '').trim(); if (!username) { alert('Por favor, insira seu nome de usuário do Instagram, Pejotta!'); usernameInput.focus(); return; } fullLink = `https://ig.me/m/${username}`; } else if (network === 'twitter') { const usernameInput = wrapper.querySelector('#twitterUsername'); const messageInput = wrapper.querySelector('#twitterMessage'); const username = usernameInput.value.replace('@', '').trim(); const message = messageInput.value; if (!username) { alert('Por favor, insira seu nome de usuário do X (Twitter)!'); usernameInput.focus(); return; } const encodedMessage = encodeURIComponent(message); fullLink = `https://twitter.com/intent/tweet?screen_name=${username}&text=${encodedMessage}`; } else if (network === 'linkedin') { const urlInput = wrapper.querySelector('#linkedinCustomUrl'); const customUrl = urlInput.value.trim(); if (!customUrl) { alert('Por favor, insira sua URL personalizada do LinkedIn!'); urlInput.focus(); return; } fullLink = `https://linkedin.com/in/${customUrl}`; } // Atualiza a caixa de resultados generatedLinkInput.value = fullLink; openButton.href = fullLink; resultBox.classList.remove('hidden'); generatedLinkInput.focus(); generatedLinkInput.select(); }); }); // --- Lógica de Copiar (Mantida como antes) --- copyButton.addEventListener('click', () => { generatedLinkInput.select(); generatedLinkInput.setSelectionRange(0, 99999); try { document.execCommand('copy'); const originalText = copyButton.textContent; copyButton.textContent = '✅ Copiado! Que rapidez!'; copyButton.style.backgroundColor = '#4CAF50'; setTimeout(() => { copyButton.textContent = originalText; copyButton.style.backgroundColor = ''; }, 2000); } catch (err) { alert('Não foi possível copiar automaticamente. Copie o link manualmente!'); } }); // Garante que a primeira aba esteja ativa e o BG seja carregado no início setTimeout(() => { const firstTabButton = wrapper.querySelector('.tab-button'); if (firstTabButton) { firstTabButton.click(); // Isso dispara a troca de aba E a troca de background! } }, 100); }); </script>