Adicionar Automaticamente Botão de “Inscreva-se” Abaixo dos Vídeos do Youtube nos Posts do WordPress - Bruno Devx - BR Criativus

post #4650

Adicionar Automaticamente Botão de “Inscreva-se” Abaixo dos Vídeos do Youtube nos Posts do WordPress

Publicado em: 07/03/2024 / Atualizado em: 07/03/2024

Categorias: BlogCSSJavaScript (JS)JSWordpress

Com este código abaixo, será possível adicionar um botão automaticamente logo abaixo dos vídeos do YouTube adicionados nas publicações do seu site WordPress, como mostra a imagem abaixo:

Exemplo abaixo:

image 11
Botão adicionado dinamicamente com javascript

Desse jeito, sempre que você adicionar um video dentro do seu post wordpress, ele vai carregar esse botão em vermelho, chamando o usuário a se inscrever em seu canal.

document.addEventListener('DOMContentLoaded', function() {
    // Seleciona todos os elementos figure com a classe 'is-provider-youtube' dentro de elementos com a classe 'content'
    var youtubeFigures = document.querySelectorAll('.content figure.is-provider-youtube');

    youtubeFigures.forEach(function(figure) {
        // Cria um novo elemento de link (a)
        var subscribeButton = document.createElement('a');
        
        // Define o href para o link do seu canal do YouTube
        subscribeButton.href = 'https://www.youtube.com/@brunoartbr?sub_confirmation=1';
        
        // Adiciona classes ao botão para estilização, se necessário
        subscribeButton.className = 'youtube-subscribe-button';
        
        // Define o texto do botão
        subscribeButton.textContent = 'Inscreva-se no Canal';
        
        // Define o target para abrir em uma nova aba
        subscribeButton.target = '_blank';
        
        // Insere o botão de inscrição logo após a figura do vídeo do YouTube
        figure.parentNode.insertBefore(subscribeButton, figure.nextSibling);
    });
});

O código CSS abaixo serve para estilizar o botão para ter uma aparência de destaque, mas você pode personalizar como quiser.

a.youtube-subscribe-button {
    background: #f00;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-radius: 8px;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    transition: all linear .2s;
}

a.youtube-subscribe-button:hover {
    scale: 1.05;
    transition: all linear .2s;
}

Publicações recomendadas:



Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato