Twitterのタイムラインをブログやホームページなどサイトに埋め込みたい
みなさんはTwitterのタイムラインのツイートをブログやホームページなどサイトに埋め込みたいと思ったことはないでしょうか？
タイムラインの埋め込みはTwitterで発信している情報をリアルタイムにブログやホームページで発信できるので、とても便利です！
しかしツイート単体の埋め込みはできるけど、タイムラインの埋込のやり方が分からない・・、埋め込む際にデザインやサイズを調整したいけど、分からない・・という方もいらっしゃいます。
そこで今回の記事ではTwitterのタイムラインを埋め込む方法と、埋め込む際にデザインやサイズを調整する方法についてご紹介していきたいと思います。
Twitterのタイムラインをブログやホームページなどサイトに埋め込む方法
まずは基本となるタイムラインの埋込についてやり方を順番にご紹介していきます。
埋め込みたいタイムラインのユーザーのプロフィールページのURLをコピー
まずは埋め込みたいタイムラインのTwitterのユーザーのプロフィールページのURLをコピーします。
例えば@Aprico2016のユーザーの場合は「https://twitter.com/Aprico2016」というようなURLになります。
タイムラインの埋め込み用のタグを取得
次にTwitterの公式の機能を使ってタイムラインの埋め込み用のタグを取得します。
下記サイトにアクセスしましょう。こちらのサイトはTwitter公式の埋め込みタイムラインなどウィジェットを作成できるページです。
上記のサイトにアクセスしたら、「What would you like to embed？」の箇所に先程コピーした埋め込みたいタイムラインのユーザーのプロフィールページのURLをペーストします。
次に「Here are your display options」の箇所に自動でスクロールして移動しますので、今回は左側の「Embedded Timeline」を選択します。
すると自動でタグが生成されます。こちらがタイムライン埋め込み用のタグになります。「Copy Code」のボタンを押してコピーしておきましょう。
またそのタグを埋め込んだ際のプレビューがその下に表示されますので違和感ないか見ておきましょう。
後はコピーしたタグをブログやホームページの好きな箇所に貼り付けると、タイムラインが表示されるようになります。
ちなみにタイムラインの埋め込みのウィジェットはレスポンシブのデザインなので、幅に合わせてデザインが調整されます。
タイムラインの埋め込みウィジェットのサイズやデザインをカスタマイズ
さて、これでブログやホームページでタイムラインの埋め込みが出来ましたが、ブログやホームページのデザインにより、Twitterのタイムラインの埋め込みウィジェットのサイズやデザインを変更したいという方もいらっしゃるかと思います。
サイズやデザインのカスタマイズ方法を見ていきましょう。
先程タイムラインの埋込用のタグを作成したページの「set customization options」をクリックします。
するとこのような図の画面が登場します。
ここでタイムラインの埋め込みウィジェットのデザインや色・サイズを変更出来ます。
サイズ
まず一番上の「What size would you like your timeline to be？」の箇所がサイズになります。
もしもレスポンシブではなく、サイズを指定したい場合はこちらを調整しましょう。
デザイン
次に中段の「How would you like this to look?」の箇所でデザインが調整出来ます。左側の選択項目で「Light」「Dark」から選択出来ます。
（デフォルトは「Light」）
試しにDarkにしてみましょう。
リアルタイムで下部のプレビューのデザインが変わります。Darkの色だとこのようなデザインになります。
「Light 」「Dark」お好きな方のデザインを選択しましょう。
リンクの色
また右側はリンクの色を変更出来ます。
- 紫
- 緑
- 黄色
- オレンジ
- 赤
- 青
プレビューで、リンクの色が黄色になりましたね！
サイズやデザインが固まったら最後に右下の「Update」ボタンをクリックします。
するとタイムラインの埋込用のタグが変わりますので、再度コピーして、ブログやホームページに貼り付けしましょう！
埋め込み
デザインをDarkにして、リンクの色を黄色にした場合のタイムラインの埋め込みウィジェットです！
ぜひブログやホームページの色味にあわせてタイムラインの埋め込みウィエットのデザインを調整しましょう！