Como Adicionar um Calendário de Eventos do Facebook no WordPress (Maneira Fácil)

Você pode ter uma agenda de eventos lotada no Facebook, mas os visitantes do seu site WordPress não saberão disso, a menos que você exiba esses eventos diretamente em suas páginas.

Um feed de eventos do Facebook resolve esse problema, buscando eventos diretamente da sua Página do Facebook e exibindo-os em seu site automaticamente.

Este guia o orienta em toda a configuração, desde a criação do aplicativo do Facebook necessário até a personalização do seu calendário final.

Você pode usar estes links rápidos para navegar pelas etapas:

Etapa 1: Adicionar um Plugin de Eventos do Facebook no WordPress

Para exibir eventos do Facebook no WordPress, você precisará do plugin Smash Balloon Facebook Feed. Este plugin permite exibir seus posts, fotos, vídeos e álbuns do Facebook diretamente em seu site WordPress.

Há também um plugin gratuito Smash Balloon Social Post Feed que você pode baixar do repositório oficial do WordPress. No entanto, você precisará fazer o upgrade para a licença Elite (US$ 149/ano) para exibir eventos do Facebook.

Assim que tiver sua licença, você poderá instalar e ativar o plugin. Nosso guia sobre como instalar um plugin do WordPress o guiará pelo processo, passo a passo.

Após a ativação, vá para Facebook Feed » Configurações, cole sua chave no campo Chave de Licença e clique em Ativar.

Etapa 2: Conectar o Facebook ao WordPress e Criar um Token de Acesso a Eventos

O Facebook trata os eventos da Página como dados restritos, portanto, o Smash Balloon não pode extraí-los automaticamente como posts padrão. Em vez disso, você precisará criar um aplicativo simples do Facebook, gerar um token de acesso e adicionar esse token ao plugin.

Antes de começar, certifique-se de que sua conta pessoal do Facebook tenha acesso de administrador à Página do Facebook onde seus eventos estão hospedados. Se você não for um administrador, a configuração será concluída sem mostrar um erro, mas seu calendário permanecerá completamente em branco.

Registre-se como Desenvolvedor Meta

Para começar, acesse o site Meta for Developers e clique em ‘Entrar’ no canto superior direito. Você precisará fazer login com o perfil pessoal do Facebook que gerencia sua Página, porque o Facebook permite que apenas indivíduos se registrem como desenvolvedores, não empresas.

Se esta for sua primeira visita, clique em ‘Criar nova conta’ e siga as instruções na tela.

O Facebook pedirá que você aceite os termos do desenvolvedor, verifique seu número de telefone via SMS e confirme seu endereço de e-mail. Assim que concluído, o Facebook o redirecionará para o painel do aplicativo.

Crie seu aplicativo do Facebook e adicione suas permissões

Na página Aplicativos, clique em ‘Criar aplicativo’ no canto superior direito.

Na tela ‘Detalhes do aplicativo’, insira um nome para seu aplicativo e seu e-mail de contato. O nome é visível apenas para você, então algo simples como Meus Eventos funciona bem.

Clique em Próximo para continuar.

Na tela ‘Adicionar casos de uso’, selecione ‘Gerenciamento de conteúdo’ no menu do lado esquerdo.

Quando aparecer, escolha ‘Gerenciar tudo na sua Página.’

Clique em ‘Próximo.’

Na tela ‘Negócios’, você pode conectar um portfólio de negócios, se usar um. Como esta parte é opcional, você também pode selecionar ‘Ainda não quero conectar um portfólio de negócios’ e clicar em ‘Próximo.’

Na tela Requisitos, clique em ‘Próximo’ para confirmar que nenhum requisito de publicação adicional se aplica.

Finalmente, revise suas configurações na tela Visão Geral e clique em ‘Criar aplicativo.’

Isso abre o painel do seu novo aplicativo. A partir daqui, clique em ‘Personalizar o caso de uso Gerenciar tudo na sua Página.’

Nesta página, você notará que as permissões pages_show_list e business_management já estão selecionadas para você.

Na lista, clique em ‘Adicionar’ ao lado de cada uma dessas permissões:

• pages_read_user_content
• pages_read_engagement
• pages_manage_engagement

Após adicionadas, todas as três exibirão o status ‘Pronto para teste.’

Como a exibição de feeds de eventos do Facebook não requer que o Facebook revise ou publique seu aplicativo, você pode deixar seu aplicativo em modo de desenvolvimento com segurança.

Gere seu token e conecte sua página

Na barra lateral esquerda do seu aplicativo, vá para Configurações do aplicativo » Básico.

Aqui, você encontrará os campos ‘ID do aplicativo’ e ‘Segredo do aplicativo.’

Para revelar o segredo, clique em ‘Mostrar’. Você precisará dessas informações em breve, então mantenha esta tela aberta.

Em uma nova aba, abra o Graph API Explorer, que é a ferramenta do Facebook para testar o que um aplicativo pode ler. Se ainda não estiver selecionado, abra o menu suspenso ‘Meta App’ e escolha o aplicativo que você acabou de criar.

Depois disso, abra o menu suspenso ‘Add a Permission’ e selecione todas as cinco permissões: business_management, pages_manage_engagement, pages_read_engagement, pages_read_user_content e pages_show_list.

Assim que as cinco permissões aparecerem na lista ‘Permissions’, clique em ‘Generate Access Token’.

Uma janela de login do Facebook solicitará que você confirme sua conta, então clique em Continue.

O Facebook então perguntará a quais Páginas e Empresas seu aplicativo tem permissão para acessar. Escolha a Página que você deseja exibir e clique em Continue.

Seu novo token aparecerá no campo Access Token. Você pode clicar no ícone de cópia ao lado dele para copiar o texto.

Como este token temporário dura apenas cerca de uma hora, cole-o no plugin Smash Balloon imediatamente. De volta ao seu painel do WordPress, vá para Facebook Feed » All Feeds e clique em Add New.

Na próxima tela, selecione o tipo de feed ‘Events’ e clique em ‘Next’.

Como você ainda não tem uma fonte de eventos conectada, a tela ‘Select a Source’ estará vazia, então clique em Add New.

Cole seu App ID, App Secret e User Access Token nos campos correspondentes e, em seguida, clique em Connect.

Após a conexão, o plugin buscará as Páginas do Facebook que você gerencia e as exibirá em uma lista. Selecione a Página cujos eventos você deseja exibir e clique em Add.

Sua Página agora aparecerá como uma fonte de eventos conectada. Selecione-a na tela ‘Select a Source’ e clique em Next para continuar.

Selecione um modelo de layout para o seu calendário e clique em Next.

Estamos usando o modelo Default para este guia, mas cada modelo é totalmente personalizável.

Etapa 3: Personalizar seu Calendário de Eventos do Facebook Incorporado

Após criar seu feed, você será levado ao personalizador do Smash Balloon.

No lado direito, você verá uma prévia do seu calendário de eventos do Facebook, enquanto o lado esquerdo contém as configurações para personalizar como esses eventos aparecem em seu site.

A maioria dessas configurações é direta, então vamos nos concentrar nas que causam o maior impacto em seu calendário. Para começar, o painel Feed Layout controla sua forma geral.

Aqui, você pode escolher entre os layouts List, Masonry e Carousel. Masonry exibe seus eventos em uma grade de colunas que se ajusta naturalmente a diferentes alturas de cards, enquanto Carousel converte o calendário em um slider interativo que os visitantes podem percorrer.

O mesmo painel permite ajustar a altura do feed e definir o ‘Number of Posts’ a serem exibidos, com controles separados para dispositivos desktop e mobile. Exibir menos posts no mobile evita que longas agendas sobrecarreguem telas pequenas e escondam o restante do seu conteúdo.

À medida que você faz alterações, a prévia é atualizada automaticamente. Você pode usar os botões de dispositivo no canto superior direito para ver como seu feed fica em dispositivos desktop, tablet e mobile.

By default, the calendar inherits its colors from your WordPress theme. If you prefer a different look, you can select ‘Color Scheme’ from the left-hand menu and make your changes.

Further down, the Header settings manage the block that sits above your calendar and directs visitors to your Facebook Page.

From here, you can switch between a Visual and Text header, customize the title and bio copy, or turn the header off completely using the Enable toggle.

To change how each individual event looks, go to Posts » Post Style.

Under Post Type, choose Boxed to place each event inside its own padded card, or select Regular to separate events with a single dividing line.

There is also a lightbox feature, which opens a popup over the page when someone clicks an event. This lets visitors browse your entire schedule without leaving your site.

That convenience does mean that fewer people may click through to your Facebook Page. If you prefer to send visitors straight to your Facebook Page, you can deactivate the lightbox using the Enable toggle.

When you’re happy with how the Facebook event calendar looks, don’t forget to click on ‘Save’ to store your changes. You’re now ready to add this feed to your WordPress website.

Etapa 4: Incorpore seu calendário de eventos do Facebook no WordPress

To add the Facebook event calendar, click the ‘Embed’ button at the top of the screen.

First, you can click ‘Add to a Page.’

Select the page where you want to publish the event calendar and click Add.

Você será então direcionado para o editor de blocos.

Aqui, clique no botão ‘+ Adicionar Bloco’ e procure pelo bloco ‘Feed do Facebook’.

After that, open the dropdown in the block’s panel and select the events feed you created earlier.

The block will automatically update to show your event calendar.

The Embed popup also includes an ‘Add to a Widget’ option if you prefer placing your calendar in a widget area like a sidebar or footer. Additionally, it provides a shortcode that you can copy and paste anywhere the standard block isn’t supported.

After publishing the page, open it in an incognito or logged-out browser window to check whether your upcoming Facebook events are showing.

If the calendar loads but appears completely empty, double-check that your Facebook account has admin access to the Page, as outlined back in Step 2.

Perguntas frequentes sobre como adicionar um calendário de eventos do Facebook no WordPress

Como adiciono eventos do Facebook a um calendário?

You subscribe to them rather than copying them over manually. On your Page’s events calendar, locate the ‘Add to Calendar’ button. Right-clicking this button provides a link that you can paste into Google Calendar, Apple Calendar, or Outlook.

Keep in mind that subscribing is separate from embedding. A calendar subscription keeps your events synced inside your personal calendar app, whereas embedding them with a plugin like Smash Balloon displays that live schedule directly on your website for visitors to see.

Qual é o melhor plugin de calendário de eventos para WordPress?

If you want to host events directly on your site instead of pulling them from Facebook, Sugar Calendar is our top pick. It manages recurring events, takes bookings, and lets you sell tickets through Stripe or WooCommerce.

Since you host the events on your site, they keep working even if you stop posting to Facebook.

Para uma análise mais detalhada, confira nossa análise do Sugar Calendar ou compare-o com as alternativas em nossa lista dos melhores plugins de calendário do WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar um calendário de eventos do Facebook no WordPress. Você também pode conferir nossas principais escolhas de especialistas para os melhores plugins do Facebook para WordPress, ou aprender como exibir sua linha do tempo do Facebook no WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.