ウェブサイトにGoogleカレンダーを埋め込む方法


訪問者に今後のイベントについて知らせたり、予定をスケジュールしたりするために、Webサイトにプロ並みのライブカレンダーが必要ですか?ゼロから何かを構築したり、将来の更新を取得しない可能性があるカスタムカレンダーアプリを使用したりする代わりに、何百万人もの人が日常的に使用しているものを使用してみませんか?

そのルートで、サイトにGoogleカレンダー を埋め込むことができます。また、無料で簡単に使用できます。開始するために必要なのは、Googleアカウントだけです。

まず、Googleアカウントにログインし、プロフィール写真の横にあるアプリグリッドをクリックして、[カレンダー]をクリックします。

埋め込みコードを取得

埋め込みたいカレンダーの隣にある3つのドットをクリックして、[オプション]を開きます。

ポップアップから[設定と共有]をクリックします。

カレンダー設定ページを下にスクロールして、カレンダーの統合セクション。

カレンダーを共有するだけでなく、全員がカレンダーを表示できるようにするには、 それを公開する する必要があります。

これを行うには、[アクセス許可]の[公開する]の横のボックスを有効にします。

埋め込みコードをWebページまたは投稿のHTMLセクションに挿入します。たとえば、WordPressを使用している場合は、新しいページを作成します。

[テキスト]をクリックして、HTMLエディターに切り替えます。 Googleカレンダーから埋め込みコードをコピーして、ページに貼り付けます。

[視覚的]タブをクリックして、ページでのカレンダーの外観を確認します。 [プレビュー]を選択して、ウェブサイトのフロントエンドに表示することもできます。

カレンダーのHTMLコードを、オブジェクトの埋め込みが許可されている任意のWebページに貼り付けます。

カレンダーのGoogleのデフォルトのフォーマット設定が必要な場合は、問題ありません。カレンダーの色、サイズ、その他のオプションを変更するには、設定をカスタマイズします。

Googleカレンダーの設定をカスタマイズします

[埋め込みコードのすぐ下にあるカスタマイズボタン。新しいウィンドウが開きます。

[カレンダータイトル]にタイトルを入力して、カレンダーのタイトルを編集または追加します。タイトルを表示する場合は、[タイトル]の横のボックスを有効にします。

表示:

  • タイトル
  • ナビゲーションボタン
  • データ
  • 印刷アイコン
  • タブ
  • カレンダーリスト
  • タイムゾーン
  • Googleカレンダーのデフォルトのサイズは800 x 600です。サイズを変更するには、[]と[高さ]の横にある上矢印と下矢印を移動します。

    たとえば、サイドバーにカレンダーを埋め込む場合は、幅を300などの小さいサイズに変更します。

    その他のseカスタマイズできる設定は次のとおりです。

    • ブランドの色に一致する背景色
    • タイムゾーンと言語
    • 枠線(オンまたはオフ)
    • >
    • デフォルトの月
    • 週の最初の日
    • オプションをカスタマイズしたら、最終的なライブカレンダーをWebページに表示します。カレンダーの予定を変更すると、自動的に更新されます。

      以下は月次ビューのスクリーンショットです。

      カレンダーを週ごとに表示することもできます。

      変更を加えたい場合は、いつでもGoogleカレンダーの設定に戻って調整できます。

      必ず新しいHTMLをコピーして貼り付けてください新しい変更を反映するように書式を更新した後のコード。

      訪問者にカレンダーイベントを保存させる方法

      訪問者が自分のイベントを保存できるようにするにはGoogleカレンダーを所有している場合は、ウェブサイトにボタンを追加します。カレンダーが公開されていることを確認してください。

      Googleカレンダーを開きます。変更はコンピュータからのみ行うことができ、モバイルアプリからはできないことに注意してください。

      イベントを追加するには、イベントを追加する日を選択して、[作成]をクリックします。左上隅。

      ポップアップにイベントの詳細を入力し、[保存]をクリックします。

      カレンダーで予定を開き、それをダブルクリックします。次に、右上隅にある3つの点をクリックして[オプション]、[]を開き、[イベントを公開]を選択します。

      WebサイトのポップアップウィンドウからHTMLコードを埋め込んで、訪問者が自分のGoogleカレンダーにイベントを追加できるようにします。

      ウェブサイトに戻り、イベントボタンを表示するソースまたはHTMLビューのコード。

      訪問者がGoogleカレンダーボタンをクリックすると、カレンダーが開き、そこにイベントが追加されます。同じポップアップウィンドウに表示されるリンクを使用して、イベントに人々を招待することもできます。

      プラグインを使用してGoogleカレンダーをWordPressに埋め込む

      ほとんどの機能と同様WordPressには、そのためのプラグインがあります。 GoogleカレンダーをWordPressウェブサイトに埋め込むことも例外ではありません。以下は、使用を検討するいくつかのWordPressプラグインです。

      シンプルなカレンダープラグイン

      シンプルカレンダーは、イベントを週、月、またはリストで表示します。設定は簡単で、モバイル対応で、ニーズに合わせてカスタマイズできます。

      その他の機能は次のとおりです。

      • Googleでイベントを管理し、イベントを自動的に更新しますWordPress
      • カラーコードイベント
      • 直感的で簡単な設定
      •  アドオン

        このプラグインは、Googleカレンダーのパワーユーザーに最適です。独自の機能の1つは、色分けされたイベントを転送する機能です。

        Dan’s Embedder for Googleカレンダー

        Dan's Embedder for Google Calendarを使用して、Googleカレンダーをリストまたはフルビューで表示。

        WordPressでイベントを管理またはインポートする必要はありません。必要なのは1つ以上の公開Googleカレンダーだけです。その他の機能は次のとおりです。

        • ショートコードを使用してオプションを設定します
        • 表示するアイテムの数を指定します
        • 複数のカレンダーを埋め込む
        • このプラグインにはAPIキーが必要です。以下の手順に従ってください:

          • Google Developers Console にアクセスします
          • サイドメニューから、[APIと認証]を確認します>認証情報
          • 公開APIアクセスセクションから[新しいキーを作成]ボタンをクリックします
          • [ブラウザキー]を選択しますstrong>およびリファラー制限を空白のままにします
          • このキーをプラグイン設定ページに置きます
          • イベントカレンダーWD

            イベントプロモーション、イベントカレンダーWDを使用してWordPressブログでイベントを管理または追加します。

            WordPressエディタを使用してイベントの詳細な説明を提供し、タグを添付して、それぞれにカテゴリを割り当てます。その他の機能は次のとおりです。

            • ユーザーフレンドリーなインターフェースにより、ウェブサイトでのカレンダーとイベントの表示方法を完全に制御できます
            • カレンダーを簡単にカスタマイズして管理できます
            • 無制限の数のカレンダーとイベント
            • すべてのイベントを最適化して、SEOと検索エンジンの可視性を向上させます
            • ソーシャル共有ボタンを有効にして、イベントに関する情報を広めます
            • WPシンプル予約カレンダー

              ウェブサイトにGoogleカレンダーをすばやく簡単にインストールして埋め込むことができます。

              WP Simple Booking Calendarの無料バージョンでは、基本的な機能にアクセスできますあなたのイベントを追跡するなどの必要性。無料版の特長は次のとおりです。

              • レスポンシブレイアウト
              • データとカレンダーのバックアップと復元
              • 利用可能状況の表示
              • より高度な公開および編集機能については、プレミアムバージョンにアップグレードできます。

                Webサイトでサービスの可用性を管理および表示したり、今後のイベントをアナウンスしたりするユーザーは、埋め込みから大きなメリットを得られます。

                カレンダーをウェブサイトに直接統合すると、訪問者がサイトに留まり、訪問者が予約をしたり、イベントにサインアップしたりする可能性が高まります。

                必要なのは、インターネット接続、Webブラウザー、およびサイトにプロ並みのカレンダーを作成して表示するためのGoogleアカウントだけです。

                関連記事:


                2.05.2020