WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： トレンド >サービス紹介

近年メジャーなSNSの1つに、Twitterがあります。
個人サイトや企業サイトでも新着情報としてTwitterのタイムラインを埋め込むWEBサイトも増えてきました。
では、そのタイムラインの埋め込み方法について紹介したいと思います！

Twitterのタイムラインを埋め込む手順

1.Twitterへログインし、設定画面を開きます。
画面の右上にある自身のアイコンをクリック→【設定とプライバシー】

2.次に画面左側にメニューが出てきます。
下の方にある、【ウィジェット】をクリックします。

3.ウィジェットの【新規作成】をクリックすると

【プロフィール】・・・ユーザのタイムラインを表示したい場合
【いいね】・・・お気に入りを表示したい場合
【リスト】・・・自分が作成または保存した公開リストを表示したい場合
【コレクション】・・・写真付きツイートをより目立たせて表示したい場合
【検索】・・・検索クエリを表示したい場合

と用途が選択できるようになっています。
今回はユーザのタイムラインを表示したいので、【プロフィール】を選択します。

4.下記の画面に遷移するので、テキストボックス内に表示させたいTwitterアカウントのURLを入力します。

5.次に表示オプションを聞かれるのでタイムラインを表示させる場合、左をクリックしましょう。
※右はツイートボタンの表示なります。

6.タイムラインの見え方の表示が出てきます。これで問題が無ければ、【Copy Code】のボタンをクリックして、Twitterのタイムラインの埋め込みコードをコピーして取得しましょう！

これでタイムラインの埋め込みコードの生成は完了です。

コピーしたコードを表示させたいページのHTMLに貼り付けするだけで、Twitterのタイムラインが表示されます。

デフォルトのサイズだと大きいと感じたら、下記のように【横幅のdata-width】と【高さのdata-height】を入れれば変更が可能です。

<a class="twitter-timeline" href="https://twitter.com/_i_cept" data-width="600" data-height="300">

公式でカスタマイズできる方法も調べると出てくるので、試してみてください。
Twitterの埋め込みは比較的簡単にできるので、制作したWEBサイトに是非入れてみてくださいね♪