Adicionar um link ou botão na descrição das publicações
Neste artigo vamos te mostrar como adicionar um botão que redireciona seus usuários para a URL que você quiser.
👉 Nesta documentação vamos te ensinar passo a passo como adicionar um botão com link na descrição da sua publicação. Para isso, vamos mostrar como criar o link, compartilhar um código CSS para estilizá-lo e indicar onde adicioná-lo.
Vamos criar um botão que contém uma URL. Por exemplo " Ir para o site ":
1. Vá para Painel de Controle > Publicações. Escolha a publicação na qual você quer exibir o botão.
Se você ainda não enviou sua publicação, aqui tem um tutorial que mostra como fazer isso.
2. Posicione-se na publicação e clique em Editar .
3. Vá até a caixa de descrição. É lá que você pode adicionar a descrição da sua publicação, e é também onde vamos adicionar o link como mostramos abaixo:
a. Digite o texto que você quer que o link exiba. Por exemplo: " Ir para o site ".
b. Selecione o texto:
c. Clique no ícone 🔗 para inserir o link e digite a URL. Por exemplo " https://meusite.com ":
Clique em Link e depois em Atualizar .
Agora a descrição da sua publicação terá um link assim:
Caso você queira apenas adicionar um link, você já terá terminado de criá-lo.
Se quiser que fique com a aparência de um botão ou personalizá-lo como na primeira imagem, continue com os passos abaixo.
4. Agora que criamos o link, vamos transformá-lo em um botão!
Dependendo do plano que você contratou, você deve inserir o código CSS em locais diferentes, mas não se preocupe, o funcionamento é o mesmo nos dois casos.
Ambos são configurados em Painel de Controle > Configurações > Avançado
- No caso de você ter a caixa CSS Personalizado
Você deve inserir o seguinte código CSS:
/* Botão de descrição do modal */
.IssueModal-descriptionText.IssueModal-descriptionText a {
float: left;
color: white;
background: #D580D5;
border-radius: 30px;
padding: 0.5rem 1rem;
}
- Se você não tiver a caixa CSS Personalizado, vamos colocar o código CSS em Custom before </head> code
Você precisará adicionar a tag <style> adicional. O código ficaria assim:
<style>
.IssueModal-descriptionText.IssueModal-descriptionText a {
float: left;
color: white;
background: #D580D5;
border-radius: 30px;
padding: 0.5rem 1rem;
}
</style>
Tenha em mente que você pode modificar alguns valores ao seu gosto (alinhamento, cor do texto, cor de fundo, borda arredondada e espaçamento interno), desde que tenha conhecimento de CSS 🤓
Clique em Salvar .
Pronto! Terminamos e o seu botão agora ficará assim:
Se não foi criado corretamente ou ocorreu algum erro, verifique se você copiou o código corretamente conforme compartilhamos aqui.
Esperamos que este tutorial tenha sido simples para você. Se tiver dúvidas, escreva para support@publica.la.
Atualizado em: 11/05/2026
Obrigado!