Bluesky, a rede social descentralizada construída no AT Protocol, permite compartilhar postagens individuais fora da plataforma. Incorporar uma postagem do Bluesky em seu site ou blog permite que os visitantes vejam o conteúdo, respostas e engajamento diretamente na sua página. Este recurso funciona para qualquer postagem pública, seja sua ou de outro usuário. Neste artigo, você aprenderá a gerar o código embed de uma postagem do Bluesky e adicioná-lo ao seu site usando HTML padrão ou um CMS como WordPress.
Principais Pontos: Incorporar uma Postagem do Bluesky no Seu Site
- Aplicativo web Bluesky > Menu da postagem > Incorporar postagem: Gera o código HTML para qualquer postagem pública.
- Cole o código embed no CMS do site ou editor HTML: Exibe a postagem com informações do autor, texto e mídia.
- Design responsivo: O embed se ajusta automaticamente a telas móveis e desktop sem CSS extra.
O Que o Recurso de Incorporação do Bluesky Faz
O Bluesky oferece uma opção oficial de incorporação para cada postagem pública. Ao incorporar uma postagem, você insere um iframe interativo que exibe o conteúdo completo da postagem, incluindo texto, imagens, links e mídia incorporada. O embed também mostra o nome de exibição do autor, o handle e o avatar. Respostas e quote posts não são incorporados; apenas a postagem original aparece. Este recurso funciona em qualquer site que suporte iframes HTML, incluindo WordPress, Squarespace, Wix e sites HTML estáticos. Não é necessária chave de API ou conta de desenvolvedor. O código embed é gerado diretamente do aplicativo web do Bluesky.
Requisitos Antes de Começar
Você precisa da URL da postagem pública do Bluesky que deseja incorporar. Você pode encontrar essa URL abrindo a postagem em um navegador de desktop e copiando o link da barra de endereços. A postagem deve ser de uma conta pública; postagens de contas privadas não podem ser incorporadas. Seu site deve suportar iframes HTML. A maioria dos sistemas de gerenciamento de conteúdo modernos permite tags iframe no editor HTML ou através de um bloco HTML personalizado. Se o seu CMS remover tags iframe, talvez seja necessário um plugin ou um bloco de código que preserve HTML bruto.
Passos para Incorporar uma Postagem do Bluesky em um Site
- Abra a postagem do Bluesky em um navegador de desktop
Acesse o aplicativo web do Bluesky em bsky.app e faça login. Navegue até a postagem que deseja incorporar. Clique na postagem para abrir sua página dedicada se você a estiver visualizando em um feed. A URL na barra de endereços agora termina com o ID da postagem, por exemplo:https://bsky.app/profile/username.bsky.social/post/3abc123. - Abra o menu da postagem e selecione Incorporar postagem
Na página da postagem, clique no ícone de menu de três pontos localizado no canto superior direito da postagem. No menu suspenso, selecione Incorporar postagem. Uma caixa de diálogo aparece contendo o código HTML embed. - Copie o código embed
Na caixa de diálogo, o código embed é exibido em uma área de texto. Clique no botão Copiar código ou selecione manualmente todo o trecho HTML e pressione Ctrl+C no Windows ou Command+C no Mac. O código se parece com isto:<blockquote class="bluesky-embed" ...>seguido por uma tag script. - Cole o código no editor do seu site
Abra o editor de página ou postagem no CMS do seu site. Mude para a visualização de código HTML ou edição de código. No WordPress, use o bloco HTML personalizado ou o editor de Texto. No Squarespace, adicione um bloco de Código. Cole o código embed copiado onde deseja que a postagem apareça. - Salve e visualize a página
Salve ou publique a página. Visite a página ao vivo para verificar se o embed é exibido corretamente. A postagem deve aparecer com um fundo cinza claro, o avatar do autor e elementos interativos como contagens de resposta, repost e curtida. O embed é responsivo e redimensiona automaticamente em diferentes tamanhos de tela.
Problemas Comuns ao Incorporar Postagens do Bluesky
O embed não aparece na página
Se o embed mostrar um espaço em branco ou um erro, seu CMS pode estar bloqueando o iframe ou script. Verifique se seu CMS permite JavaScript em blocos embed. No WordPress, certifique-se de estar usando o bloco HTML personalizado em vez do bloco Parágrafo. Alguns plugins de segurança como Wordfence podem bloquear scripts externos. Adicione o domínio do Bluesky às fontes de script permitidas nas configurações do seu plugin.
O embed mostra a postagem, mas o layout está quebrado
Isso geralmente acontece quando o CSS do seu site entra em conflito com os estilos do embed. O embed do Bluesky usa um elemento blockquote com a classe bluesky-embed. Se o seu tema aplicar estilos globais a elementos blockquote, o embed pode parecer desalinhado. Adicione o seguinte CSS aos estilos personalizados do seu tema para redefinir a estilização do blockquote para embeds: .bluesky-embed { all: revert; }. Isso preserva a aparência padrão do embed.
O código embed está faltando a tag script
O código embed consiste em um blockquote e uma tag script. Se você copiar apenas o blockquote, o embed não será renderizado. Sempre copie o trecho inteiro da caixa de diálogo. Se você estiver usando um CMS que remove tags script, precisará de um plugin que permita JavaScript personalizado. Para WordPress, o plugin Insert Headers and Footers permite adicionar o script embed do Bluesky ao rodapé do site. Alternativamente, você pode adicionar manualmente a tag script ao arquivo footer.php do seu tema.
Embed do Bluesky vs Método Manual com Iframe
| Item | Código Embed do Bluesky | Iframe Manual |
|---|---|---|
| Facilidade de uso | Cópia com um clique da interface do Bluesky | Requer construção manual da URL do iframe e parâmetros |
| Responsividade | Automaticamente responsivo | Deve definir largura e altura manualmente |
| Elementos interativos | Mostra contagens de resposta, repost e curtida | Mostra apenas o conteúdo da postagem sem dados de interação |
| Dependência de script | Requer carregar um arquivo JS externo | Nenhum script externo necessário |
O método embed do Bluesky é a abordagem recomendada porque lida com estilização, responsividade e interatividade prontas para uso. O método manual com iframe só é útil se o seu CMS bloquear scripts externos e você precisar de uma prévia estática da postagem.
Conclusão
Agora você pode incorporar qualquer postagem pública do Bluesky em seu site usando o recurso de incorporação integrado. O processo leva menos de um minuto: abra a postagem, copie o código da caixa de diálogo Incorporar postagem e cole-o no editor HTML do seu site. Se você usa WordPress, o bloco HTML personalizado é o local mais seguro para inserir o código. Para usuários avançados, a classe CSS .bluesky-embed pode ser direcionada para ajustar espaçamento ou bordas sem quebrar o layout do embed. Experimente incorporar uma postagem com várias imagens para ver como o carrossel de galeria se comporta dentro do embed.