もっと機能を追加

地図の埋め込みや、FacebookやTwitterのタイムラインなどを表示する方法を見ていきましょう。

Googleマップの埋め込み

  1. Google マップ を開きます。
  2. 埋め込みたい地図やストリートビュー画像を地図上に表示します。
  3. 左上のメインメニュー をクリックします。
  4. [地図を共有または埋め込む] をクリックします。
  5. 表示されるボックスの上部で [地図を埋め込む] タブを選択します。
  6. ご希望の埋め込みサイズを選択し、そのコードをコピーしてウェブサイトのソースコードに貼り付けます。

YouTube動画の埋め込み

  1. You Tube を開きます。
  2. 埋め込みたい動画を表示します。
  3. 動画の下にある [共有] をクリックします。
  4. [埋め込みコード] をクリックします。
  5. その下に表示されるボックス内のコードをコピーします。
  6. ウェブサイトのHTMLファイルをエディタで開き、動画を表示したい場所にコードを貼り付けます。

Twitterタイムラインの埋め込み

  1. ウィジェット作成 を開きます。
  2. [ユーザー名]に埋め込みたいユーザー名入力します。
  3. 希望の埋め込みサイズとオプションを選択し、[ウィジェットを作成] をクリックします。
  4. 表示されたコードをコピーして、タイムラインを表示したい場所にコードを貼り付けます。
  5. ただしウィジェットを作成するには、Twitterアカウントが必要です。

Facebookタイムラインの埋め込み

  1. Page Plugin を開きます。
  2. 埋め込みたいFacebookページを[Facebook Page URL]に入力します。
  3. 希望の埋め込みサイズとオプションを選択し、[Get Code] をクリックします。
  4. 2つのコードが表示され、1つ目のコードを <body>開始タグのすぐ下 に貼り付けます。
  5. 2つ目のコードは表示したい場所に貼り付けます。

※注意点として、サーバ上でないとFacebookのタイムラインは表示されません。

Googleカレンダーの埋め込み

  1. パソコンで Google カレンダー を開きます。
  2. 右上にある設定アイコン > [設定] をクリックします。
  3. [カレンダー] タブを開きます。
  4. 埋め込むカレンダーの名前をクリックします。
  5. [このカレンダーを埋め込む] セクションに表示される iframe コード をコピーします。
  6. ウェブサイトのHTMLファイルをエディタを開き、カレンダーを表示したい場所にコードを貼り付けます。
  7. 埋め込まれたカレンダーは、あなたがカレンダーを共有したユーザーにのみ表示されます。
    すべての訪問者がカレンダーを閲覧できるようにするには、カレンダーを一般公開する必要があります。