--- title: "Como incorporar feeds de mídia social ao vivo no Lovable?" date: 2025-09-30 canonical_id: how-to-embed-live-social-media-feeds-in-lovable author: "osogovo" category: - blog - widgets locale_slug: como-incorporar-feeds-de-midia-social-ao-vivo-no-lovable summary: "Aprenda como integrar conteúdo de mídia social no Lovable usando a API EmbedSocial para uma exibição personalizada e dinâmica." draft: false seo: title: "Como incorporar feeds de mídia social ao vivo no Lovable?" description: "Aprenda como integrar conteúdo de mídia social no Lovable usando a API EmbedSocial para uma exibição personalizada e dinâmica." structured_data: article --- Neste tutorial, mostraremos como usar a [API EmbedSocial](/help/en/articles/10922940-understanding-sources-in-embedsocial) e sincronizar conteúdo de diferentes fontes e tipos de mídia no Lovable. Além disso, demonstraremos os tipos de widgets que você pode criar usando Lovable, mostraremos como gerenciar a nuvem do Lovable e explicaremos como aprimorar a exibição de widgets com IA. Este é um excelente tutorial para agências que trabalham no Lovable ou desenvolvedores web que desejam criar conteúdo dinâmico super personalizado para seus sites. Siga a demonstração abaixo: Ou verifique estas etapas para mais detalhes: ## Etapas para incorporar feed de mídia social no Lovable - [Etapa 1: Crie um site Lovable](#h-etapa-nbsp-1-crie-um-site-lovable) - [Etapa 2: Ative a nuvem do Lovable](#h-etapa-nbsp-2-ative-a-nuvem-do-lovable) - [Etapa 3: Obtenha a chave de API do EmbedSocial e documentação](#h-etapa-nbsp-3-obtenha-a-chave-de-api-do-embedsocial-e-documentação) - [Etapa 4: Forneça contexto da API ao Lovable](#h-etapa-nbsp-4-forneça-contexto-da-api-ao-lovable) - [Etapa 5: Crie a tabela do banco de dados](#h-etapa-nbsp-5-crie-a-tabela-do-banco-de-dados) - [Etapa 6: Adicione a chave de API no Lovable](#h-etapa-6-adicione-a-chave-de-api-no-lovable) - [Etapa 7: Adicione o código de referência do widget no Lovable](#h-etapa-7-adicione-o-código-de-referência-do-widget-no-lovable) - [Etapa 8: Teste a integração](#h-etapa-nbsp-8-teste-a-integração) - [Etapa 9: Exiba os posts](#h-etapa-nbsp-9-exiba-os-posts) - [Prompt de layout de grade](#h-prompt-de-layout-de-grade) - [Prompt de layout de controle deslizante](#h-prompt-de-layout-de-controle-deslizante) - [Prompt de layout de alvenaria](#h-prompt-de-layout-de-alvenaria) - [Melhorias opcionais](#h-melhorias-opcionais) - [Comece agora](#h-comece-agora) - [Perguntas frequentes](#h-perguntas-frequentes) ## Etapa 1: Crie um site Lovable Comece uma solicitação de configuração inicial para a página que carregará o feed de mídia social. Você pode usar um prompt como > **Prompt:** *"Crie uma página web que mostrará feed de mídia social ao vivo usando a API EmbedSocial para buscar posts do TikTok, Facebook, YouTube, Instagram, LinkedIn, Pinterest ou Twitter"* ## Etapa 2: Ative a nuvem do Lovable Assim que o projeto for criado, ative o back-end abrindo o painel da **Nuvem** no menu superior e selecionando **"Ativar nuvem."** Aguarde até que o Lovable conclua a configuração automática do banco de dados. ![Ativar banco de dados da nuvem Lovable](https://embedsocial.com/wp-content/uploads/2025/09/enable-lovable-cloud-database-1024x576.jpg) ## Etapa 3: Obtenha a chave de API do EmbedSocial e documentação Em seguida, você precisará das instruções de implementação da API EmbedSocial que obterá da sua conta. Para fazer isso, você precisa ter uma conta EmbedSocial ativa com o plano Premium para obter suas próprias credenciais de API. Assim que tiver a conta e fizer login, você pode **ir ao menu de perfil no canto inferior direito > Integrações > Documentação da API** - onde encontrará todas as informações sobre a API, além da chave de API. A partir da documentação da API EmbedSocial, você obterá todas as informações necessárias - incluindo URL do endpoint, parâmetros necessários e uma resposta de exemplo. Tenha sua chave de API e número de referência do álbum (ID do widget) prontos para entrada segura. ![Obtenha a chave de API do EmbedSocial](https://embedsocial.com/wp-content/uploads/2025/09/get-embedsocial-api-key-1024x576.jpg) > A partir da documentação da API fornecida, copie as instruções de implementação e observe que mais tarde você também precisará da chave de API que está localizada na mesma página com a documentação. ## Etapa 4: Forneça contexto da API ao Lovable Agora, você precisará fornecer as instruções da API ao chatbot Lovable com o seguinte prompt: > Prompt: *"Preciso integrar a API EmbedSocial. Ela usa um endpoint que fornecerei abaixo e retorna posts com id, caption, image\_url, link, created\_at e mais strings. Aqui estão os detalhes da solicitação* e documentação de resposta: (cole a documentação ou trechos principais para que o Lovable entenda como chamar a página de integração EmbedSocial da API) ## Etapa 5: Crie a tabela do banco de dados Em seguida, você precisará solicitar ao sistema que prepare o banco de dados com base nas informações da documentação da API: > **Prompt:** *"Agora tente criar as tabelas no banco de dados com as informações de mídia geradas pela API"* O Lovable gerará o esquema usando o banco de dados da nuvem. ## Etapa 6: Adicione a chave de API no Lovable Depois, adicione o segredo EMBEDSOCIAL\_API\_KEY quando solicitado pelo sistema. ![Forneça a chave de API EmbedSocial ao Lovable](https://embedsocial.com/wp-content/uploads/2025/09/embedsocial-api-lovable-step3-enter-api-key-1024x576.jpg) ## Etapa 7: Adicione o código de referência do widget no Lovable De forma semelhante, você receberá um prompt no chat para fornecer o segredo EMBEDSOCIAL\_WIDGET\_REF. Você pode obter qualquer widget que deseja mostrar no Lovable apenas acessando o editor de widget e obtendo o código grande na sua URL. ![Obtenha o número de referência do widget EmbedSocial no editor de widget ](https://embedsocial.com/wp-content/uploads/2025/09/embedsocial-widget-reference-number-1024x576.jpg) ## Etapa 8: Teste a integração Invoque a função de borda manualmente ou por meio de um botão na interface do utilizador para confirmar que os posts são buscados e armazenados na tabela. Verifique as entradas do banco de dados quanto à precisão. ## Etapa 9: Exiba os posts Pronto. Assim que os posts forem gerados, você pode fazer muitas personalizações do widget e criar um feed de mídia social verdadeiramente personalizado e envolvente. [Verifique a demonstração.](https://embedsocial-shoppable.lovable.app/news) > Prompt: *"Na página SocialFeed, crie uma grade responsiva de cartões que lê da tabela social\_posts, exibe a imagem do post, uma legenda truncada e um link 'Leia mais'."* ## Prompts para projetar o widget no Lovable ### Prompt de layout de grade ``` Crie um componente chamado SocialFeedWidgetGrid. Retire posts da tabela social_posts e exiba-os em uma grade responsiva: - Desktop: 3 colunas - Tablet: 2 colunas - Mobile: 1 coluna Cada cartão deve incluir: - Imagem (capa, largura total, proporção 16:9, bordas arredondadas xl, sombra pequena) - Legenda (truncar para 100 caracteres, mostrar "...mais" se for mais longo) - Botão link "Ver post" → abre o permalink em uma nova aba Estilo dos cartões: - Cantos arredondados (xl) - Sombra md - Preenchimento 3 - Efeito ao passar: leve escala na imagem - Fonte: Inter, tamanho base ``` * * * ### Prompt de layout de controle deslizante ``` Crie um componente chamado SocialFeedWidgetSlider. Use um carrossel/controle deslizante para exibir posts horizontalmente com setas de navegação. Cada slide inclui: - Imagem (capa, largura total, altura 300px, bordas arredondadas xl) - Legenda abaixo (truncar para 80 caracteres) - Link "Ver post" que abre o permalink Estilo: - Centralize o slide ativo um pouco maior (escala 1,05) - Adicione animação de deslizamento suave - Bordas arredondadas xl + sombra lg - Use fonte Inter, tamanho base ``` * * * ### Prompt de layout de alvenaria ``` Crie um componente chamado SocialFeedWidgetMasonry. Retire posts da tabela social_posts e renderize-os em um layout responsivo de alvenaria. Layout: - Desktop: 3 colunas - Tablet: 2 colunas - Mobile: 1 coluna Cada cartão de post inclui: - Imagem (largura total, altura automática, bordas arredondadas xl) - Legenda (truncar para 120 caracteres) - Link pequeno "Ver post" abaixo da legenda Estilo: - Use colunas CSS para efeito de alvenaria - Espaço entre itens: 16px - Bordas arredondadas xl + sombra pequena ``` * * * ### Melhorias opcionais #### Prompt da caixa de luz ``` Melhore o widget para que quando um usuário clicar em uma imagem, ele abra uma modal de caixa de luz. Modal mostra: - Imagem em tamanho normal - Legenda (texto completo, rolável se longo) - Botão link "Ver no Instagram" (ou fonte da plataforma) Estile modal com sobreposição escura, conteúdo centralizado e botão de fechamento (X). ``` #### Prompt de botões CTA ``` Adicione um botão CTA personalizável abaixo de cada cartão de post. - Se um post tiver um campo chamado cta_url, exiba um botão "Comprar agora" que o vincula. - Botão de estilo: fundo de cor primária, texto branco, arredondado, opacidade ao passar 0,90. ``` ### Por que sincronizar sua mídia social via API com o Lovable's AI Quando seu negócio depende de conteúdo gerado pelo utilizador, uma incorporação simples nem sempre é suficiente. Ao conectar a API EmbedSocial à Lovable Cloud, você desbloqueia um conjunto de vantagens que vão muito além de um feed estático. - O acesso direto à API busca mídia fresca sob demanda, garantindo que seu site apresente os posts e comentários mais recentes sem intervenção manual. - O armazenamento de conteúdo na Lovable Cloud oferece controle dos dados. Você pode filtrar, classificar e mesclar múltiplas fontes, criando feeds únicos adaptados ao seu público. - A IA do Lovable ajuda você a esculpir um design de widget sob medida. Por meio de prompts claros, você pode ajustar layouts, cores, tipografia e comportamento responsivo sem escrever CSS manualmente. - As funções de borda suportam automação de back-end, como sincronizações agendadas e tratamento de erros, para que seu widget permaneça atualizado e robusto. - Os widgets personalizados podem incluir recursos como paginação, pesquisa, filtros de categoria ou botões de chamada para ação, aumentando o envolvimento e a conversão do utilizador. - A integração de múltiplos feeds via API permite criar painéis unificados ou galerias multiplataforma que correspondem à sua estética e mensagem de marca. Ao unir a flexibilidade da API com as ferramentas de design orientadas por IA do Lovable, você pode criar um feed de mídia social dinâmico, totalmente marcado, que se destaca no seu site. ## Comece agora Para começar, inscreva-se em uma conta EmbedSocial e obtenha sua chave de API e ID de widget. Em seguida, crie um novo projeto no Lovable, ative o Lovable Cloud e siga as etapas acima para integrar seu feed de mídia social. Com essas ferramentas, você pode criar widgets dinâmicos que sincronizem seu conteúdo de mídia social diretamente no seu site. ## Perguntas frequentes Que plano preciso no EmbedSocial para acessar a API? O acesso à API está disponível nos [planos premium do EmbedSocial](/admin/continue_plugin_purchase/socialfeed_premium99/trial). Verifique a página de preços deles para obter detalhes. A Lovable Cloud é gratuita para usar? O Lovable Cloud oferece um nível gratuito com uma cota de uso mensal. O uso além do limite livre requer recarregar seu saldo. Preciso de experiência em codificação? Não. O processo se baseia em prompts descritivos e o Lovable gera o código para você. No entanto, entender conceitos básicos ajudará você a refinar prompts. Quão seguras são minhas chaves de API? As chaves são armazenadas no gestor de segredos do Lovable e injetadas em funções com segurança. Nunca cole chaves diretamente em prompts. Posso integrar múltiplos feeds? Sim. Crie tabelas e funções de borda separadas para cada feed ou modifique sua função para lidar com múltiplos IDs.