Twitter の埋め込みタイムラインの作成とカスタマイズ方法

ブログなど、サイトのウィジェット欄にTwitterのタイムラインを埋め込んでいることは、よく見かけますね。無料ブログでも、レンタルサーバーを使ったブログやサイトでも、すぐに設置することができます。

twitter.comの公式サイトでかんたんに埋め込みコードを生成することができます。

埋め込みタイムラインの作成手順

設定のウィジェットページヘ

まずtwitter.comへログインして、設定のウィジェットページへ行きます。

Twitterタイムラインの設定

 

「新規作成」を選んで「ユーザーウィジェットを作成する」へ。

ウィジェットの設定

ここでは以下の点を設定します。

  • ユーザー名:タイムライン上に公開している「@・・・・・・」の英数字の名前です。
  • オプション:@ツイートの除外、画像を自動的に開くか
  • 高さ:じっさいにサイトに表示されるタイムラインの上下のサイズです。
  • テーマ:背景色を「明るい」と「暗い」で選べます。
  • リンクの色:ツイートに含まれるリンクの色を変更可能。マウスでできます。
  • カスタマイズ機能を無効にする:Twitter.comによる「カスタマイズされたおすすめユーザー」の表示を無効にできます。

特にこだわらなければ、高さの調整だけすればいいとおもいます。

埋め込みタイムラインの初期設定は520×600pxですが、サイトに合わせてTwitterの埋め込みタイムラインは自動でサイズを調整してくれます。タイムラインのサイズは幅最小180px、最大520px、高さは最小200pxです。

ブログによっては、幅の調整などを自分で設定しなければいけないウィジェットが多いですから、自動でやってくれるのは助かりますね。

埋め込みタイムラインの貼付け用コード

設定の変更が済んだら「ウィジェットを作成」をクリックしましょう。

ウィジェット保存の完了表示
と表示されるはずです。

すると下の部分に「埋め込みタイムラインの貼付け用コード」が生成されるので、あとはコピーして、サイトのウィジェット欄に貼り付けるだけです。

WordPressであれば「ウィジェット」の「テキスト」に貼り付ければ終了です。

表示の確認

さいごに自分のサイトに表示されているかを確認してください。

今後、サイトに表示される埋め込みタイムラインの変更は設定のウィジェットページから行うことになります。いちいち自分のサイトのソースコードを書き換える必要がないのでかんたんですね。

幅を好きなように変更できる

細かい設定を自分でカスタマイズすることもできます。すこし知識が必要ですがそこまでむずかしくはありません。

その方法はTwitter Developersの「埋め込みタイムライン」ページにあります。日本語で説明が載っています。

今回は幅(width)高さ(height)を自分で変更してみます。

先ほどの方法で生成された貼付け用埋め込みコードの例が下にあります。こちらは「埋め込みタイムライン」ページにあるものです。

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

変更点は、幅と高さを指定するコードを挿入するだけです。幅300px、高さ500pxにしたいので、「␣width=”300″␣height=”500″␣」を追記します。

Twitterの埋め込みタイムラインで幅と高さを指定するコードを追記

このように書き加えました。

これで幅と高さは変更されます。あとはサイトを確認してください。表示される文字なども調整されているはずです。

その他に変更できる項目

その他の項目はTwitter Developersの「埋め込みタイムライン」ページを参照してください。以下の項目が設定できます。

  • テーマ(Dark/light)
  • リンクの色
  • 高さ
  • インターフェース
  • ボーダー(境界線)の色
  • 言語
  • ツイート数の固定
  • おすすめしたいユーザー
  • ARIA politeness

関連記事

自分のブログの RSS フィードの調べ方

WordPressの場合だと、RSSフィードはすでに用意されているようです。 詳しいことは「WordPress Feeds « WordPress Codex」に書いてあります。全文英語で書かれていますが、真ん中手前にある以下の欄を参考にす…

サイトのデザインや記事内に画像(img 要素)を挿入するときの alt 属性の使い方

画像には alt 属性を用意しておこう 記事に画像を挿入することは多いですね。WordPress では投稿画面で、左上にある「メディアを追加」ボタンをクリックすれば、簡単にアップロードし、挿入することができます。 ビジュアルモードであれば指…