Como incorporar o Google Calendar em seu site

Publicados: 2020-05-02

Você precisa de um calendário ao vivo com aparência profissional em seu site para informar os visitantes sobre os próximos eventos ou para agendar um compromisso? Em vez de criar algo do zero ou usar algum aplicativo de calendário personalizado que pode não receber atualizações futuras, por que não usar algo que milhões de outras pessoas estão usando diariamente?

Seguindo esse caminho, você pode incorporar um Google Agenda ao seu site. Também é gratuito e fácil de usar. Tudo o que você precisa para começar é uma conta do Google.

Índice

    Comece fazendo login na sua conta do Google, clique na grade de aplicativos ao lado da foto do seu perfil e clique em Calendário .

    Obtenha o código de incorporação

    Abra Opções clicando nos três pontos adjacentes ao calendário que deseja incorporar.

    Clique em Configurações e compartilhamento no pop-up.

    Role para baixo na página de configurações do Calendário até encontrar a seção Integrar calendário .

    Para tornar seu calendário visível para todos e não apenas para aqueles com quem você o compartilha, você precisará torná-lo público.

    Para fazer isso, ative a caixa ao lado de Disponibilizar para o público em Permissões de acesso .

    Incorpore o código na seção HTML de uma página ou postagem da Web. Por exemplo, se você estiver usando o WordPress, crie uma nova página.

    Clique em Texto para alternar para o editor HTML. Copie o código de incorporação do seu calendário do Google e cole-o na página.

    Clique na guia Visual para ver a aparência do calendário em sua página. Você também pode selecionar Visualizar para vê-lo no front-end do seu site.

    Cole o código HTML do Calendário em qualquer página da Web onde você tenha permissão para incorporar objetos.

    Se você gosta das configurações de formato padrão do Google para o calendário, está pronto. Para alterar a cor, o tamanho e outras opções do seu calendário, você pode personalizar suas configurações.

    Personalizar as configurações do Google Agenda

    Clique no botão Personalizar localizado diretamente abaixo do código de incorporação. Isso abrirá uma nova janela.

    Edite ou adicione um título ao seu calendário digitando-o em Título do calendário . Se você quiser que o título seja exibido, ative a caixa ao lado de Título .

    Especifique quais elementos você deseja mostrar em seu calendário verificando as seguintes configurações em Mostrar :

    • Título
    • Botões de navegação
    • Dados
    • Ícone de impressão
    • Abas
    • Lista de calendários
    • Fuso horário

    O tamanho padrão do Google Agenda é 800 por 600. Altere o tamanho movendo as setas para cima e para baixo ao lado de Largura e Altura .

    Por exemplo, se você deseja incorporar um calendário em uma barra lateral, reduza a Largura para um tamanho menor, como 300.

    Outras configurações que você pode personalizar incluem:

    • Cor de fundo para combinar com a cor da sua marca
    • Fuso horário e idioma
    • Borda (ativada ou desativada)
    • Mês padrão
    • Primeiro dia da semana

    Depois de personalizar as opções, visualize seu calendário final ao vivo em sua página da web. Quando você altera um evento em seu calendário, ele é atualizado automaticamente.

    Abaixo está uma captura de tela da visualização mensal.

    Você também pode visualizar seu calendário por semana.

    Se você quiser fazer alguma alteração, sempre poderá voltar às configurações do Google Agenda e ajustá-las.

    Certifique-se de copiar e colar o novo código HTML depois de fazer qualquer atualização de formatação para refletir as novas alterações.

    Como permitir que os visitantes salvem um evento do calendário

    Para permitir que os visitantes salvem seu evento em seu próprio Google Agenda, adicione um botão ao seu site. Certifique-se de que seu calendário seja público.

    Abra seu Google Agenda. Observe que as alterações só podem ser feitas a partir de um computador e não de um aplicativo móvel.

    Para adicionar um evento, selecione o dia ao qual deseja adicioná-lo e clique em Criar no canto superior esquerdo.

    Preencha os detalhes do seu evento no pop-up e clique em Salvar .

    Para abrir um evento em seu calendário, clique duas vezes nele. Em seguida, clique nos três pontos no canto superior direito para abrir Opções , e selecione Publicar evento .

    Incorpore o código HTML da janela pop-up em seu site para permitir que os visitantes adicionem o evento ao próprio Google Agenda.

    Volte ao seu site e cole o código da visualização de origem ou HTML onde você deseja que o botão de evento seja exibido.

    Quando um visitante clica no botão do Google Agenda, ele abre sua agenda e adiciona o evento a ela. Você também pode convidar pessoas para seu evento usando o link exibido na mesma janela pop-up.

    Incorporar o Google Calendar no WordPress usando plugins

    Como na maioria das funções do WordPress, existe um plugin para isso. Incorporar um Google Calendar em um site WordPress não é exceção. Abaixo estão vários plugins do WordPress para você considerar usar.

    Plug-in de calendário simples

    O Simple Calendar mostra seus eventos por semana, mês ou em uma lista. É fácil de configurar, responsivo a dispositivos móveis e personalizável de acordo com suas necessidades.

    Outros recursos incluem:

    • Gerencie eventos no Google e atualize-os automaticamente no WordPress
    • Eventos de código de cores
    • Intuitivo e simples de configurar
    • Funcionalidade adicional com complementos

    Este plug-in é uma excelente opção para usuários avançados do Google Agenda. Um recurso exclusivo é a capacidade de transferir eventos codificados por cores.

    Dan's Embedder para o Google Agenda

    Exiba calendários do Google em uma lista ou visualização completa com o Dan's Embedder para Google Calendar.

    Não há necessidade de gerenciar ou importar eventos no WordPress. Você só precisa de um ou mais Google Agendas públicos. Outros recursos incluem:

    • Configurar opções com códigos de acesso
    • Especifique quantos itens mostrar
    • Incorporar vários calendários

    Este plugin requer uma chave de API. Siga os passos abaixo para adquirir o seu:

    • Visite o Google Developers Console
    • No menu lateral, verifique APIs e autenticação > Credencial
    • Clique no botão Criar nova chave na seção Acesso à API pública
    • Selecione a chave do navegador e deixe a Limitação do referenciador em branco
    • Coloque esta chave na página de configurações do plugin

    Calendário de eventos WD

    Crie uma promoção de evento e gerencie ou adicione eventos ao seu blog WordPress com o Calendário de Eventos WD.

    Forneça uma descrição detalhada de seus eventos usando o editor do WordPress, anexe tags e atribua categorias a cada um. Alguns outros recursos incluem:

    • Interface amigável para controle total sobre como você exibe calendários e eventos em seu site
    • Personalize e gerencie facilmente seus calendários
    • Um número ilimitado de calendários e eventos
    • Otimize todos os eventos para melhor SEO e visibilidade do mecanismo de pesquisa
    • Ative os botões de compartilhamento social para divulgar seus eventos

    Calendário de reservas simples do WP

    Instale e incorpore de forma rápida e fácil o Google Calendars em seu site.

    A versão gratuita do WP Simple Booking Calendar oferece acesso aos recursos básicos de que você precisa, como acompanhar seus eventos. Os destaques da versão gratuita incluem:

    • Layout responsivo
    • Fazer backup e restaurar dados e calendários
    • Exiba sua disponibilidade

    Para funções de publicação e edição mais avançadas, você pode atualizar para a versão Premium.

    Os usuários que desejam gerenciar e exibir a disponibilidade de seus serviços em seu site ou anunciar eventos futuros se beneficiarão muito com a incorporação de um Google Agenda em seu site.

    A integração de um calendário diretamente em seu site manterá os visitantes em seu site e aumentará as chances de eles marcarem um compromisso ou se inscreverem em um evento.

    Tudo o que você precisa é de uma conexão com a Internet, um navegador da Web e uma conta do Google para criar e exibir um calendário com aparência profissional em seu site.