Componentes Extras

Inserindo o Google Agenda

Veja como obter o código de incorporação de uma agenda do Google e inseri-la em uma página do Plone.

Incorporando uma agenda ao site

O Google Agenda disponibiliza um código iframe que pode ser utilizado para apresentar uma agenda diretamente em uma página do site institucional.

Google Agenda Código iframe Página do Plone
01

Abra o Google Agenda

Em um computador, acesse o Google Agenda com a conta responsável pela agenda que será incorporada ao site.

02

Acesse as configurações da agenda

No painel à esquerda, localize Minhas agendas. Posicione o cursor sobre a agenda desejada, clique nos três pontos e selecione Configurações e compartilhamento.

Minhas agendas Três pontos Configurações e compartilhamento
03

Localize Integrar agenda

Na página de configurações, role até encontrar Integrar agenda e localize Código de incorporação.

calendar.google.com/calendar/u/0/r/settings
Google Agenda
Configurações

Agenda Institucional

Configurações da agenda

Integrar agenda
Código de incorporação
<iframe src="https://calendar.google.com/calendar/embed?..." width="800" height="600" frameborder="0" scrolling="no"></iframe> Copiar
Personalizar
Localize Integrar agenda e copie o código de incorporação.
04

Personalize e copie o código

Se desejar, utilize Personalizar para ajustar tamanho, modo de visualização e outros elementos da agenda.

O código geralmente começa com <iframe e termina com </iframe>.

Verifique as permissões da agenda

A agenda incorporada respeitará as permissões de compartilhamento configuradas no Google Agenda. Para que visitantes externos possam visualizá-la, é necessário que as permissões sejam compatíveis com esse tipo de acesso. Em contas institucionais, as opções também podem estar limitadas pelas políticas do Google Workspace.

05

Crie ou edite uma página no Plone

No site, crie uma nova página ou edite a página em que a agenda deverá ser apresentada.

siteadmin2.uem.br/SIGLA/agenda/edit
Editar Página

Editar Página

Agenda de Eventos
Source code
Conteúdo da página...
Crie ou edite a página em que a agenda será exibida.
06

Abra o código-fonte da página

No editor do Plone, acesse Source code ou Código-fonte.

siteadmin2.uem.br/SIGLA/agenda/edit
Código-fonte
<p> Consulte abaixo nossa agenda de eventos: </p> <iframe src="https://calendar.google.com/calendar/embed?..." width="800" height="600" frameborder="0" scrolling="no"> </iframe>
Cole o código iframe no local desejado do código-fonte.
07

Salve e confira o resultado

Confirme a alteração no código-fonte, salve a página e verifique se a agenda está sendo exibida corretamente.

Caso o código <iframe> desapareça depois de salvar, a configuração de segurança do editor pode estar removendo esse elemento HTML.

www.uem.br/SIGLA/agenda
Agenda de Eventos Setembro
DOM
SEG
TER
QUA
QUI
SEX
SÁB
30
31
1
2 Reunião
3
4 Evento
5
6
7
8 Palestra
9
10
11
12
13
14
15
16
17
18 Seminário
19
20
Resultado ilustrativo da agenda incorporada à página.

Agenda incorporada à página

Depois de concluído o procedimento, o Google Agenda será apresentado diretamente dentro da página do Plone, respeitando as configurações de visualização e compartilhamento definidas na agenda.