Você quer exibir uma publicação do Mastodon diretamente no seu site. Uma captura de tela estática não preserva a interatividade, e copiar o texto perde os metadados da postagem. O Mastodon oferece um recurso de incorporação oficial que gera um código iframe para qualquer postagem pública. Este artigo explica como localizar a opção de incorporação, copiar o snippet HTML e personalizar o tamanho do embed para o layout do seu site.
Principais Conclusões: Incorporar uma Publicação do Mastodon em um Site
- Postagem > … > Incorporar: Abre a caixa de diálogo de incorporação que gera o código iframe para a postagem selecionada.
- Copiar o código HTML: Cola o snippet iframe completo na área de transferência para inserção no código-fonte do seu site.
- Atributos de largura e altura: Ajuste os valores numéricos na tag iframe para controlar as dimensões do embed.
Como Funciona a Incorporação de Postagens do Mastodon
O Mastodon usa um sistema de incorporação baseado em iframe. Quando você solicita um embed para uma postagem pública, o servidor do Mastodon retorna um snippet HTML que contém um iframe apontando para uma página de embed dedicada. Essa página renderiza o conteúdo da postagem, o avatar do autor, o timestamp e botões de ação como responder e impulsionar. A abordagem iframe mantém a postagem interativa enquanto a isola do estilo do seu site.
O recurso funciona em qualquer instância do Mastodon que suporte a interface web padrão. Você não precisa de chave de API ou permissão especial. A postagem deve ser pública. Postagens configuradas como seguidores apenas ou não listadas não podem ser incorporadas em sites externos.
Pré-requisitos para Incorporar uma Publicação do Mastodon
Antes de começar, confirme as seguintes condições:
- A postagem que você deseja incorporar é pública. Verifique o ícone de visibilidade ao lado do timestamp da postagem. Um ícone de globo indica visibilidade pública.
- Você tem acesso ao código-fonte HTML do seu site. Você precisa de um sistema de gerenciamento de conteúdo que aceite HTML bruto, como WordPress no bloco HTML personalizado, ou um editor de site estático.
- A instância do Mastodon que hospeda a postagem está acessível para os visitantes do seu site. Algumas redes corporativas ou países bloqueiam certas instâncias. Se o seu público não conseguir carregar a instância, o embed mostrará um iframe quebrado.
Passos para Incorporar uma Publicação do Mastodon em um Site
Siga estes passos para gerar e inserir o código de incorporação para qualquer postagem pública do Mastodon.
- Abra a postagem do Mastodon em um navegador web
Navegue até a postagem na instância do Mastodon onde foi publicada. Você pode usar a interface web ou o URL da postagem diretamente. A postagem deve estar totalmente carregada no seu navegador. - Clique no menu de três pontos na postagem
Procure o ícone de três pontos horizontais no canto superior direito da postagem. Em visualizações móveis, o ícone pode aparecer na parte inferior da postagem. Clicar nele abre um menu suspenso. - Selecione a opção Incorporar no menu
No menu suspenso, escolha a opção Incorporar. Uma caixa de diálogo aparece mostrando uma prévia do embed e o código HTML dentro de uma área de texto. O código é uma tag iframe com um atributo src apontando para o URL de embed da instância. - Copie o código HTML da caixa de diálogo de incorporação
Clique dentro da área de texto para selecionar todo o snippet de código. Pressione Ctrl+C no Windows ou Command+C no Mac para copiá-lo. O código se parece com isto:<iframe src="https://mastodon.exemplo.com/@usuario/123456/embed" class="mastodon-embed" style="max-width:100%;border:0" width="400" allowfullscreen="allowfullscreen"></iframe> - Cole o código de incorporação no HTML do seu site
Abra o editor da página ou postagem onde deseja que o embed apareça. Insira um bloco HTML personalizado no WordPress, ou mude para a visualização de código-fonte em outros editores. Cole a tag iframe copiada no local desejado. Salve ou publique a página. - Ajuste a largura e altura do embed, se necessário
A largura padrão é de 400 pixels. Altere o valor do atributo width para corresponder à sua área de conteúdo. Para layouts responsivos, remova a largura fixa e use CSS. Você também pode envolver o iframe em um contêiner com um estilo max-width.
Problemas Comuns ao Incorporar Postagens do Mastodon
A Opção Incorporar Está Ausente no Menu da Postagem
Se o menu de três pontos não mostrar a opção Incorporar, a visibilidade da postagem não está definida como pública. Verifique a configuração de privacidade da postagem. Apenas postagens com o ícone de globo podem ser incorporadas. Se você é o autor, edite a postagem e altere a visibilidade para pública. Se a postagem pertence a outro usuário, você não pode alterar sua visibilidade. Procure uma postagem pública diferente para incorporar.
Postagem Incorporada Mostra um Iframe em Branco ou Quebrado
Um embed em branco geralmente significa que a instância do Mastodon está bloqueada por uma política de segurança de conteúdo no seu site, ou a instância está inacessível. Teste o URL do embed diretamente em uma nova aba do navegador. Se o URL carregar, o problema está nos cabeçalhos CSP do seu site. Adicione o domínio da instância à diretiva frame-src na configuração do seu servidor. Se o URL não carregar, a instância pode estar fora do ar ou bloqueada na sua região.
Postagem Incorporada Não Redimensiona em Dispositivos Móveis
O código de incorporação padrão inclui um atributo de largura fixa. Em telas móveis, o embed pode transbordar a viewport. Substitua o atributo width por uma classe CSS que defina max-width como 100 por cento. Adicione o seguinte estilo à folha de estilos do seu site: .mastodon-embed { max-width: 100%; width: 100%; }. Alternativamente, envolva o iframe em uma div com a classe responsive-embed e aplique CSS padding-bottom para manter a proporção.
Comparação entre Embed do Mastodon e Embed do Twitter
| Item | Embed do Mastodon | Embed do Twitter |
|---|---|---|
| Método de incorporação | Snippet iframe do menu da postagem | Widget JavaScript do publish.twitter.com |
| Impacto na privacidade | Nenhum script de rastreamento carregado | Twitter carrega cookies e rastreamento |
| Personalização | Apenas atributos de largura e altura | Opções de tema, idioma e cor do link |
| Dependência | Iframe carregado da instância do Mastodon | JavaScript carregado dos servidores do Twitter |
Agora você pode incorporar qualquer postagem pública do Mastodon no seu site usando a caixa de diálogo de incorporação integrada. A abordagem iframe mantém a postagem interativa e não depende de scripts de terceiros. Para um layout responsivo, sempre substitua a largura fixa por CSS. Se você gerencia um site com vários autores, considere adicionar uma caixa de metadados personalizada para armazenar o URL do embed e automatizar a geração do iframe.