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
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:

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:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=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.