Como consultor de marketing digital, dedico muito tempo à promoção de conteúdo de sites nas redes sociais, por isso o codigo HTML é essencial . Mas e quanto à promoção da sua presença social através do seu site? A incorporação permite fazer exatamente isso. Costumo usar essa tática para conteúdo em vídeo como forma de reutilizá-lo e aumentar seu alcance.
Então, qual é o processo para incorporar conteúdo externo no seu site? O processo varia um pouco entre as plataformas, dependendo de onde você extrai o conteúdo, mas os passos básicos são basicamente os mesmos.
Vamos dar uma olhada em como adicionar códigos HTML incorporados ao seu site e as etapas específicas para diferentes plataformas.
Índice
O que significa incorporar?
O termo “incorporar” significa inserir conteúdo hospedado externamente em seu site ou página da web. Isso é feito inserindo um bloco de código – chamado código de incorporação – em um bloco HTML do seu site. Depois de salvar a página e visualizar a versão ao vivo, a mídia incorporada é renderizada na página publicada.
O conteúdo incorporado é referenciado com HTML, uma das linguagens mais básicas usadas na web para projetar e dispor páginas web.
Você costuma ver esse código quando está no “back-end” de uma postagem de blog, por exemplo. É lá que você adicionará seu código de incorporação. A maioria dos editores de sites, de temas para WordPress a construtores de arrastar e soltar, terá blocos HTML disponíveis que você pode inserir em uma postagem de blog ou página do site para colar o código HTML.
O que é um código de incorporação?
Um código de incorporação é um bloco de código HTML que é inserido em outra página e renderiza um elemento visual — um vídeo, uma publicação em mídia social, um formulário ou uma página — de outro site ou fonte. Você pode incorporar vídeos do YouTube, publicações do X, GIFs e outros objetos multimídia em outro site.
Frequentemente uso códigos de incorporação para incorporar postagens do X ou do LinkedIn como uma maneira rápida e fácil de adicionar dimensões de liderança inovadora ao conteúdo do blog, por exemplo.
A maioria dos sites de mídia social e multimídia oferece a opção de gerar um código de incorporação diretamente de cada publicação. Aqui está um exemplo de código de incorporação para um vídeo do YouTube da HubSpot:
https://www.youtube.com/watch?v=eGUEAvNpz48”
E aqui está o resultado incorporado.
Quer fazer o mesmo em suas postagens e páginas do blog? A seguir, explicarei como gerar um código de incorporação a partir das redes sociais mais populares. Descobri que, depois de aprender como fazer isso em uma plataforma, os passos são muito fáceis de replicar em qualquer lugar onde a incorporação esteja disponível, com pequenas variações.
Como adicionar código HTML incorporado ao seu site
- Acesse a publicação social, vídeo ou página da web que você deseja incorporar.
- Gere o código de incorporação usando as opções da postagem.
- Se aplicável, personalize a postagem incorporada, como a altura e a largura do elemento.
- Destaque o código de incorporação e copie-o para a área de transferência.
- No seu sistema de gerenciamento de conteúdo, abra o visualizador HTML.
- Cole o trecho de HTML que você acabou de copiar na janela do visualizador de HTML. Em seguida, clique em “OK” ou “Salvar”.
- Pronto! Você incorporou conteúdo ao seu site ou blog.
Vamos analisar cada etapa com mais detalhes.
Etapa 1: gere o código de incorporação.
Antes de incorporar conteúdo externo, primeiro preciso gerar um código de incorporação para a postagem ou página que desejo incorporar em um site.
Dica profissional: muitos construtores de sites e CMSs permitem que você simplesmente cole o link para a postagem e o incorpore automaticamente, sem precisar obter o código de incorporação. Mas isso varia de plataforma para plataforma.
Veja como eu gero o código de incorporação na maioria das principais redes sociais e de conteúdo.
Como incorporar uma postagem do Facebook
Veja como incorporo uma publicação do Facebook:
- Primeiro, abro o Facebook em um navegador de desktop.
- Encontro a postagem que desejo incorporar.
- Após clicar nos três pontos no canto superior direito da postagem, um menu suspenso aparece.
- No menu suspenso, clico em Incorporar .
- Um pop-up aparece e tenho a opção de incluir a publicação completa e acessar as configurações avançadas. As configurações avançadas são principalmente para pessoas com conhecimento mais avançado que desejam ajustar a largura da publicação. Para iniciantes, recomendo deixar isso como está e simplesmente clicar em Copiar Código .
- Agora, copiei o código de incorporação para minha área de transferência e o preparei para ser colado no back-end de um site.
Como incorporar uma postagem do Instagram
Se eu quiser incorporar uma publicação do Instagram, o processo é bem parecido. Lembre-se de que incorporar publicações do Instagram só é possível na versão para desktop. Veja como eu faço:
- Primeiro, encontro a postagem que desejo incorporar e clico para abri-la completamente no navegador.
- Então clico nos três pontos no canto superior direito da postagem e aparece um menu suspenso.
- Seleciono a opção Incorporar na lista.
- O código de incorporação aparece com um botão para copiá-lo para minha área de transferência.
- Às vezes, quero incluir a legenda. Mas muitas vezes, desmarco a caixa ” Incluir legenda” , especialmente para incorporar vídeos.
- Depois de clicar no botão Copiar código de incorporação , estou pronto para retornar ao site para incorporar a postagem.
Como incorporar um vídeo do YouTube
Se eu passei muito tempo criando conteúdo em vídeo para um canal do YouTube, quero garantir que ele seja visto o máximo possível. Por isso, incorporar vídeos do YouTube é uma das maneiras mais frequentes de usar a funcionalidade de incorporação. Isso torna meu conteúdo em vídeo acessível aos usuários do site, expandindo seu alcance.
A outra razão pela qual é bom incorporar vídeos? Isso economiza bastante largura de banda para um site. Vídeos tendem a ser arquivos muito grandes. Carregá-los diretamente em um site pode reduzir drasticamente o tempo de carregamento da página. Então, se você quiser vídeos no seu site, recomendo usar uma plataforma como o YouTube ou o Vimeo.
Voltando a como incorporo vídeos do YouTube:
- Clico no vídeo que desejo incorporar e seleciono Compartilhar na linha de opções abaixo do player de vídeo.
- Incorporar é a primeira opção na lista depois de clicar no botão Compartilhar .
- Após clicar em Incorporar, o vídeo aparece novamente com o código de incorporação no lado direito.
- Basta clicar em Copiar no canto inferior direito.
- Agora tenho o código de incorporação na minha área de transferência e pronto para colar no editor do site.
Como incorporar uma postagem X
Há muita liderança de pensamento útil no X, e eu gosto de inserir tweets em todo o conteúdo editorial ou do 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 sua publicação.
Veja como posso incorporar X postagens:
- Primeiro, abro a postagem que desejo incorporar.
- Na barra do navegador, copio o link para a postagem (mais sobre isso em breve).
- Assim como em outras plataformas, clico nos três pontos no canto superior direito da postagem.
- Isso abre uma lista de opções, incluindo Incorporar postagem .
- É aqui que o processo no X fica um pouco mais complexo do que provavelmente precisaria ser. Quando clico em incorporar, o site abre em uma nova aba com a pergunta “O que você gostaria de incorporar?”.
- É aqui que colo o link para a postagem X que copiei anteriormente da barra do meu navegador.
- Eu aperto enter e duas opções aparecem em “Aqui estão suas opções de exibição”.
- Eu clico em Postagem incorporada nas duas opções, mas você pode clicar em Vídeo incorporado para conteúdo de vídeo.
- Um pop-up aparece abaixo com o código de incorporação e uma opção para Copiar código , então clico nessa opção.
- Assim como o Facebook, o X também oferece a oportunidade de “definir opções de personalização”.
- Depois de clicar em Copiar código, posso retornar ao editor do meu site e incorporar a postagem.
Como incorporar uma postagem do Pinterest
Gosto particularmente de posts do Pinterest sobre moda, faça você mesmo, decoração, culinária, receitas e hobbies. Se o seu site pertence a um nicho que se adapta bem ao formato e ao público do Pinterest, incorporar seus posts do Pinterest é uma ótima maneira de aumentar seus seguidores na plataforma social.
Este é o processo que sigo para incorporar uma postagem do Pinterest:
- Abro o Pin que desejo incorporar no site.
- Clico nos três pontos no canto superior esquerdo, bem no final da lista de opções.
- Em seguida, clico em 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 significa que você obtém o tamanho e a resolução corretos. Se eu estiver incorporando o pin em uma área pequena, como o conteúdo da barra lateral, posso escolher a opção pequena. Mas se eu quiser uma imagem de largura total para um post de blog, escolheria a opção grande.
- Depois de personalizar o tamanho, realço o código e clico em Command + C ou CTRL + C , dependendo do dispositivo que estou usando.
- Agora meu Pin está pronto para ser incorporado.
Como incorporar uma apresentação do SlideShare
As apresentações do SlideShare estão um pouco ultrapassadas hoje em dia – faz tempo que não incorporo uma em um site. Mas nunca se sabe. Então, é útil saber como, por precaução.
Aqui está o código de incorporação para uma apresentação do SlideShare.
- Abro a apresentação do SlideShare que desejo incorporar.
- Na apresentação, clico nos três pontos e seleciono a opção Compartilhar .
- Isso faz com que uma caixa Compartilhar este SlideShare apareça sobre os slides da apresentação.
- Vou para a seção Incorporar , abaixo dos botões de compartilhamento social.
- A princípio, o campo parece em branco. Mas quando clico nele, consigo ver o código de incorporação.
- O bom do SlideShare é que posso selecionar o tamanho da apresentação à esquerda e escolher em qual slide a incorporação começa à direita.
- Quando estou satisfeito com essas configurações, realço o código de incorporação e clico em Command + C ou CTRL + C , dependendo do meu dispositivo.
- Agora, posso voltar ao editor do meu site e incorporar a apresentação diretamente em uma página do site ou postagem de blog.
Como incorporar uma página da Web externa
Em raras ocasiões, posso precisar incorporar uma página externa. Como todos os códigos de incorporação, isso é feito usando uma tag HTML iframe.
Aqui está um exemplo de como é o código HTML do iframe:
Posso usar essas mesmas tags para incorporar uma página externa. Veja como faço:
- Pego toda essa linha de código e colo em algum lugar, como um aplicativo do Bloco de Notas:
- Depois, vou até a página da web que desejo incorporar e pego a URL na barra do navegador.
- Observação: precisarei do URL completo, incluindo a parte “https”.
- No espaço do meu código iframe onde diz “url”, coloco a URL completa da página da web sobre o texto para que fique assim:
- Também posso ajustar a altura e a largura do pixel do quadro usando as seções “width=” e “height=”, que ficariam assim:
- Por fim, copio toda a linha de código para incorporá-la ao site.
Etapa 2: acesse seu sistema de gerenciamento de conteúdo e cole o código de incorporação no seu visualizador de HTML.
Trabalho com diversos CMSs e todos funcionam de forma ligeiramente diferente. Mas o processo de uso do bloco HTML é bastante semelhante em todos eles. Aqui, explicarei como você pode fazer isso no Content Hub e no WordPress.
Inserindo código de incorporação em um site do Content Hub
No Content Hub, embora eu pudesse usar o editor de HTML se quisesse, na verdade não preciso dele para adicionar conteúdo incorporado. Veja como funciona:
- Abro meu painel do HubSpot e vou em Conteúdo > Blog . Se eu estivesse incorporando conteúdo em um site ou landing page, eu iria em Conteúdo > Páginas do Site ou Conteúdo > Landing Pages , respectivamente.
- Em seguida, encontro a postagem do blog ou página da web onde desejo incorporar o conteúdo, passo o mouse sobre ela na lista e clico no nome da página ou postagem destacado em azul.
- Na barra do editor superior acima da postagem, clico em Inserir e seleciono Incorporar no menu suspenso.
- Aparece um pop-up onde posso colar o código de incorporação ou inserir uma URL para que o HubSpot incorpore o conteúdo automaticamente.
- Então, tudo o que preciso fazer é colar o código e clicar em Inserir .
- Se eu quisesse adicionar o embed diretamente no código-fonte, eu clicaria em Avançado na barra do editor.
- Posso clicar em Código-fonte, e o HTML da página aparece em um pop-up.
- Posso então colar o código de incorporação onde ele precisa ficar na página e clicar em Salvar alterações .
Inserindo código de incorporação 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 modelo que você estiver usando. Mas se eu estiver usando o editor clássico padrão, veja como faço.
- Primeiro, vou para a área de administração no back-end e vou em Páginas ou Postagens .
- Em seguida, clico no título da postagem ou passo o mouse sobre ela e clico na opção Editar que aparece abaixo do título para abrir o editor de postagens.
- Em seguida, clico na aba Texto no canto superior direito do editor de texto.
- Por fim, colo o código de incorporação onde quero que o conteúdo incorporado apareça na postagem.
Etapa 3: Concluído! Você incorporou conteúdo com sucesso ao seu site ou blog.
Agora, tudo o que preciso fazer é salvar a página ou clicar em Atualizar se estiver em um blog WordPress e atualizar a URL ativa para ver o conteúdo incorporado no front-end.
Adicione conteúdo incorporado para aumentar o envolvimento do usuário.
Há muito conteúdo bom por aí, mesmo que não tenha sido criado por mim ou pela marca com a qual trabalho, e acho que usar a opção de incorporação é uma ótima maneira de adicionar profundidade e interesse às minhas páginas. 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, ele se torna natural rapidamente. Então, experimente incorporar conteúdo de diferentes plataformas de mídia social em sua página ou blog e observe o engajamento do usuário aumentar.
