Você já pensou em como o embed pode transformar seu site? Incorporar conteúdo externo é uma maneira poderosa de aumentar o engajamento e a relevância do seu site. Vamos explorar como fazer isso de forma simples e eficaz!
O Poder do Embed: Como Incorporar Conteúdo Externo no Seu Site
Como consultor de marketing digital, passo muito tempo divulgando conteúdo em redes sociais. Mas e o contrário? Já pensou em usar seu site para promover sua presença social? É aí que o embed entra em cena! Essa técnica permite exatamente isso. Eu, por exemplo, uso muito para vídeos, uma forma de reaproveitar o material e aumentar seu alcance.
O que significa embed?
Quando falamos em “embed” (ou incorporar), estamos nos referindo à prática de exibir conteúdo de uma fonte externa diretamente no seu site. Pense em um vídeo do YouTube que você vê em um blog, ou um post do Instagram que aparece em uma notícia. Esse conteúdo não está hospedado no seu servidor; ele é “puxado” de outro lugar e exibido ali, como se fizesse parte da sua página.
O que é um código de embed?
Para que o conteúdo externo apareça no seu site, usamos um “código de embed”. Esse código é, na verdade, um trecho de HTML – a linguagem básica que estrutura as páginas da web. Você geralmente encontra esse código no “back-end” do seu site, como no editor de um post de blog. A maioria dos editores de site, desde temas do WordPress até construtores de arrastar e soltar, oferece blocos de HTML onde você pode colar esse código.
Eu, por exemplo, uso bastante códigos de embed para incorporar posts do X (antigo Twitter) ou do LinkedIn. É uma forma rápida e fácil de adicionar uma dimensão de liderança de pensamento ao conteúdo do blog. A maioria dos sites de redes sociais e multimídia oferece uma opção para gerar esse código diretamente de cada post individual. Veja um exemplo de um código de embed para um vídeo do YouTube da HubSpot:
<iframe width=“560” height=“315” src=“https://www.youtube.com/embed/eGUEAvNpz48” title=“YouTube video player” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
Quer fazer o mesmo em seus posts e páginas? A seguir, vou detalhar como gerar um código de embed nas plataformas sociais mais populares. Minha experiência mostra que, uma vez que você aprende em uma plataforma, os passos são bem parecidos em qualquer lugar que ofereça essa funcionalidade.
Como adicionar código HTML de embed ao seu site
Antes de incorporar qualquer conteúdo externo, o primeiro passo é sempre gerar o código de embed para o post ou página que você quer exibir. Uma dica profissional: muitos construtores de sites e CMSs (Sistemas de Gerenciamento de Conteúdo) permitem que você simplesmente cole o link do post e ele seja incorporado automaticamente, sem precisar pegar o código. Mas isso varia de plataforma para plataforma.
Vamos ver como gerar o código de embed nas principais redes sociais e de conteúdo.
Como incorporar um post do Facebook
Para incorporar um post do Facebook, o processo é simples:
- Abra o Facebook em um navegador de desktop.
- Encontre o post que deseja incorporar.
- Clique nos três pontos no canto superior direito do post. Um menu suspenso aparecerá.
- No menu, clique em “Embed” (Incorporar).
- Uma janela pop-up surgirá. Você terá a opção de incluir o post completo e acessar configurações avançadas. Para iniciantes, recomendo deixar as configurações avançadas como estão e simplesmente clicar em “Copy Code” (Copiar Código).
- Pronto! O código de embed estará copiado para sua área de transferência, pronto para ser colado no back-end do seu site.
Como incorporar um post do Instagram
Incorporar um post do Instagram é bem parecido, mas lembre-se que só é possível fazer isso pela versão desktop. Veja como eu faço:
- Encontre o post que quer incorporar e clique nele para abri-lo completamente no navegador.
- Clique nos três pontos no canto superior direito do post. Um menu pop-out aparecerá.
- Selecione a opção “Embed” (Incorporar) na lista.
- O código de embed aparecerá com um botão para copiá-lo para sua área de transferência.
- Às vezes, quero incluir a legenda, mas muitas vezes desmarco a caixa “Include caption” (Incluir legenda), especialmente para incorporar vídeos.
- Depois de clicar em “Copy embed code” (Copiar código de incorporação), você estará pronto para voltar ao seu site e incorporar o post.
Como incorporar um vídeo do YouTube
Se você dedicou tempo para criar conteúdo de vídeo para um canal do YouTube, é natural querer que ele seja visto o máximo possível. Incorporar vídeos do YouTube é uma das formas mais frequentes de usar a funcionalidade de embed. Isso torna seu conteúdo de vídeo acessível aos usuários do site, ampliando seu alcance.
Outra grande vantagem de incorporar vídeos é a economia de largura de banda para o seu site. Vídeos são arquivos muito grandes, e carregá-los diretamente no seu site pode diminuir drasticamente o tempo de carregamento da página. Por isso, se você quer vídeos no seu site, recomendo usar plataformas como YouTube ou Vimeo.
Para incorporar vídeos do YouTube, siga estes passos:
- Clique no vídeo que deseja incorporar e selecione “Share” (Compartilhar) na linha de opções abaixo do player de vídeo.
- “Embed” (Incorporar) é a primeira opção na lista após clicar no botão “Share”.
- Depois de clicar em “Embed”, o vídeo reaparece com o código de incorporação à direita.
- Basta clicar em “Copy” (Copiar) no canto inferior direito.
- Agora você tem o código de incorporação na sua área de transferência, pronto para colar no editor do seu site.
Como incorporar um post do X (antigo Twitter)
Há muito conteúdo valioso e de liderança de pensamento no X, e eu gosto de incorporar tweets em conteúdo editorial ou de blog para aumentar a autoridade e a prova social. É também uma boa maneira de citar especialistas sem precisar contatá-los diretamente ou obter algo personalizado para seu post.
Veja como incorporar posts do X:
- Primeiro, abra o post que deseja incorporar.
- Na barra do navegador, copie o link para o post.
- Assim como em outras plataformas, clique nos três pontos no canto superior direito do post.
- Isso abrirá uma lista de opções, incluindo “Embed post” (Incorporar post).
- Aqui, o processo no X fica um pouco mais complexo. Ao clicar em “Embed”, o site abre https://publish.twitter.com/ em uma nova aba com a pergunta “What would you like to embed?” (O que você gostaria de incorporar?).
- É aqui que você cola o link do post do X que copiou anteriormente da barra do navegador.
- Pressione Enter, e duas opções aparecerão em “Here are your display options” (Aqui estão suas opções de exibição).
- Clique em “Embedded Post” (Post Incorporado) das duas opções, mas você pode clicar em “Embedded Video” para conteúdo de vídeo.
- Uma janela pop-up aparecerá abaixo com o código de incorporação e uma opção para “Copy Code” (Copiar Código), então clique nessa opção.
- Assim como no Facebook, o X também oferece a oportunidade de “set customization options” (definir opções de personalização).
- Depois de clicar em “Copy Code”, você pode retornar ao editor do seu site e incorporar o post.
Como incorporar um post do Pinterest
Posts do Pinterest são ótimos para sites de moda, DIY (faça você mesmo), decoração, culinária e receitas, e sites de hobbies. Se o seu site está em um nicho que se alinha bem com o formato e o público do Pinterest, incorporar seus posts do Pinterest é uma excelente maneira de aumentar seu número de seguidores na plataforma social.
Aqui está o processo que sigo para incorporar um post do Pinterest:
- Abra o Pin que deseja incorporar no site.
- Clique nos três pontos no canto superior esquerdo, bem no final da lista de opções.
- Em seguida, clique em “Get Pin embed code” (Obter código de incorporação do Pin).
- Uma das coisas que gosto nos códigos de incorporação do Pinterest são as opções de tamanho. Isso garante o dimensionamento e a resolução corretos. Se eu estiver incorporando o pin em uma área pequena, como o conteúdo da barra lateral, posso escolher “small” (pequeno). Mas se eu quiser uma imagem de largura total para um post de blog, escolheria “large” (grande).
- Depois de personalizar o tamanho, destaque o código e clique em Command + C ou CTRL + C, dependendo do dispositivo que estiver usando.
- Agora seu Pin está pronto para ser incorporado.
Como incorporar uma apresentação do SlideShare
As apresentações do SlideShare estão um pouco datadas hoje em dia – faz muito tempo que não incorporo uma em um site. Mas, nunca se sabe. Então, é útil saber como, por via das dúvidas.
Veja como pegar o código de incorporação para uma apresentação do SlideShare:
- Abra a apresentação do SlideShare que deseja incorporar.
- Abaixo da apresentação, clique nos três pontos e selecione a opção “Share” (Compartilhar).
- Isso fará com que uma caixa “Share this SlideShare” (Compartilhar este SlideShare) apareça sobre os slides da apresentação.
- Vá para a seção “Embed” (Incorporar) abaixo dos botões de compartilhamento social.
- A princípio, o campo parece vazio. Mas ao clicar nele, você pode ver o código de incorporação.
- O bom do SlideShare é que você pode selecionar o tamanho da apresentação à esquerda e escolher em qual slide a incorporação começa à direita.
- Depois de satisfeito com essas configurações, destaque o código e clique em Command + C ou CTRL + C, dependendo do seu dispositivo.
- Agora, você pode voltar ao editor do seu site e incorporar a apresentação diretamente em uma página do site ou post de blog.
Como incorporar uma página externa
Em raras ocasiões, pode ser necessário incorporar uma página da web externa. Assim como todos os códigos de incorporação, isso é feito usando uma tag HTML `
Aqui está um exemplo de como o código HTML `
<iframe src=“url” title=“description” ></iframe>
Você pode usar essas mesmas tags para incorporar uma página da web externa. Veja como fazer:
- Pegue esta linha de código inteira e cole-a em algum lugar como um aplicativo de Bloco de Notas:
<iframe src=“url” title=“description” width=”” height=””></iframe>
- Em seguida, vá para a página da web que deseja incorporar e pegue a URL da barra do navegador. Nota: Você precisará da URL completa, incluindo a parte “https”.
- No espaço do seu código iframe onde diz “url”, cole a URL completa da página da web sobre esse texto para que fique assim:
<iframe src=“https://example.com/embedded-page” title=“Embedded Page Title” width=”” height=””></iframe>
- Você também pode ajustar a altura e a largura em pixels do quadro usando as seções “width=” e “height=”, que ficariam assim:
<iframe src=“https://example.com/embedded-page” title=“Website Page Title” width=”750” height=”500”></iframe>
- Finalmente, copie a linha de código inteira para incorporá-la no site.
Acessando seu CMS e colando o código de embed
Trabalho com muitos CMSs diferentes, e todos funcionam de forma ligeiramente distinta. No entanto, o processo de usar o bloco HTML é bastante semelhante em todos eles. Aqui, vou explicar como você pode fazer isso no Content Hub e no WordPress.
Inserindo Código de Embed em um Site Content Hub
No Content Hub, embora eu pudesse usar o editor HTML se quisesse, na verdade não preciso para adicionar conteúdo incorporado. Veja como funciona:
- Abra seu painel da HubSpot e vá para “Content” (Conteúdo) > “Blog”. Se eu estivesse incorporando conteúdo em um site ou página de destino, eu iria para “Content” > “Website Pages” (Páginas do Site) ou “Content” > “Landing Pages” (Páginas de Destino), respectivamente.
- Em seguida, encontre o post do blog ou página da web onde deseja incorporar o conteúdo, passe o mouse sobre ele na lista e clique no nome da página ou post destacado em azul.
- Na barra de edição superior acima do post, clique em “Insert” (Inserir) e selecione “Embed” (Incorporar) no menu suspenso.
- Uma janela pop-up aparecerá onde você pode colar o código de incorporação ou inserir uma URL para a HubSpot incorporar o conteúdo automaticamente para você.
- Então, tudo o que você precisa fazer é colar o código e clicar em “Insert” (Inserir).
- Se você quisesse adicionar o embed diretamente no código-fonte, clicaria em “Advanced” (Avançado) na barra do editor.
- Você pode clicar em “Source code” (Código-fonte), e o HTML da página aparecerá em uma janela pop-up.
- Então você pode colar o código de incorporação onde ele precisa ir na página e clicar em “Save changes” (Salvar alterações).
Inserindo Código de Embed em um Site WordPress
Não há necessariamente uma única maneira de inserir código de incorporação em um site WordPress, pois isso pode depender do tema que você está usando. Mas se eu estiver usando o editor clássico padrão, veja como eu faço:
- Primeiro, vá para a área de administração no back-end e acesse “Pages” (Páginas) ou “Posts” (Posts).
- Em seguida, clique no título do post ou passe o mouse sobre ele e clique na opção “Edit” (Editar) que aparece abaixo do título para abrir o editor de post.
- Depois, clique na aba “Text” (Texto) no canto superior direito do editor de texto.
- Finalmente, cole o código de incorporação onde você deseja que o conteúdo incorporado apareça no post.
Finalizando: Conteúdo incorporado com sucesso!
Agora, tudo o que você precisa fazer é salvar a página, ou clicar em “Update” (Atualizar) se estiver em um blog WordPress, e atualizar a URL ao vivo para ver o conteúdo incorporado no front-end.
Adicionar conteúdo incorporado é uma ótima maneira de aumentar o engajamento do usuário. Há muito conteúdo bom por aí, mesmo que não tenha sido criado por você ou pela marca com a qual você está trabalhando. Usar a opção de incorporação é uma excelente forma de adicionar profundidade e interesse às suas páginas da web. Ajuda a aumentar o apelo visual e o engajamento, especialmente se você estiver incorporando vídeos.
Além disso, é muito fácil de fazer! Depois de incorporar conteúdo algumas vezes, rapidamente se torna algo natural. Então, experimente incorporar de diferentes plataformas de mídia social em suas páginas ou blogs e observe o engajamento de seus usuários crescer.