Twitterのタイムラインを埋め込んで表示させる方法

Twitterのタイムラインを表示させる方法です。ホームページのサイドバーとかにサイト運営者のTwitterが埋め込んであったりするやつですね。余計なものはバッサリ省いて使うとこだけ簡単に説明(メモ)してます。
Twitterのタイムラインコードを取得する
アプリのTwitterからではなくブラウザからWebサイトのほうのTwitterにログインします。
Twitterサイト https://twitter.com/ログインした際の自分のTwitter URLを使用しますのでURLをコピーしておきます。

ユーザーの「設定とプライバシー」の「ウィジェット」を選択します。


「ウィジェット」の「新規作成」ボタンでどれか選択します。コードを取得するだけなのでどれでもいいです。


上記の画面になりましたら下にスクロールします。(最初、ここスクロール気づかなかった。)
「Embedded Timeline」を選択します。

ここで最初にコピーしておいたURLを入力します。

タイムラインのTwitterコードが表示されますので取得します。コード取得できたらTwitterは閉じてOK。

Twitterコードを貼り付ける
取得したTwitterコードをそのまま貼り付けるとこの時点でのツイート4件横幅いっぱいで全部表示されました。

上画では省略していますがずらずらとどこまで表示されるか分からないので縦のサイズは指定したほうが良いでしょうね。
高さは400pxにしてついでにツイート区切りの線の色を変更、ヘッダー部分、フッター部分もいらないかな。ということで貼り付けるコードを少し編集します。
1 |
横幅も固定したい場合は、data-heightと同様にdata-widthで設定を追加すればよいです。 枠をカスタマイズした例以下は実際にTwitterコードを埋め込んでいるものです。 [HTML] [CSS]
スクロールバーを考慮してタブレットサイズ以下は幅90%、今回はメインコンテンツ部分に埋め込んでいますのでタブレットサイズを越えたら40%表示にしています。サイドバーに埋め込むのであればmedia指定は不要ですね。 枠の上下に20pxマージンで左右は中央配置。枠の線をborderで設定し枠下に少し影をつけてみました。 私はシンプルにするこれくらいのカスタマイズで十分です。 |