post

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:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/4650

ID de Referência: 4650

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