Twitter：タイムラインをサイトに埋め込もう

Twitterのタイムラインをサイトに埋め込む方法について、ステップごとに説明しますね。

このページのコンテンツ

事前準備

埋込コードを取得するTwitterのURLまたはTwitterユーザ名を用意しておきましょう。

Twitter URLは、ココ↓

Twitterユーザ名は、ココ↓

ちなみに…
Twitterには「ユーザ名」と「アカウント名」があります。

ユーザ名は、@がついているモノ。
アカウント名は、@がついていないモノ。

そして、Twitter URLは「https://twitter.com/アカウント名」となります。

下図の画面が表示されます。

コード取得の経路は、2通りあります。

1. 埋め込みコードを取得したいTwitterのURLを入力する
2. 埋め込む要素の種類（タイムライン）を選んでからURLを入力する

どちらの経路から進んでも問題ありません。

上図の「What would you like to embed?（何を埋め込みたいですか？）」の下にある入力欄に、Twitter URL（または、Twitter ユーザ名）を入力し、右向き矢印をクリックします。

画面がスクロールダウンして、ウィジェットの選択肢が表示されます。（下図参照）

左側の「Embedded Timeline（埋め込みタイムライン）」を選択します。
※「Twitter Buttons（ツイッターボタン）」の埋め込みは後述。

次に、「set customization options（カスタマイズオプションを設定する）」のテキストリンクをクリックします。

「カスタマイズオプション設定」の下に埋め込みコードが表示されますが、カスタマイズオプションを設定せずに生成されたコードは、長～いタイムラインを埋め込んでしまうことになるので注意してくださいね♪

「set customization options（カスタマイズオプションを設定する）」のテキストリンクをクリックすると、下図の通り埋め込みタイムラインの表示を設定できます。

各項目の説明は、図の下に一覧表でまとめました。

それぞれの項目を入力していくと詳細設定ウィンドウの下にウィジェットの表示サンプルが表示されます。

すべての項目を入力したら、[Update]ボタンを押します。

What size would you like your timeline to be? / タイムラインのサイズ
Height	高さ	px単位で数値入力
Width	幅	px単位で数値入力
How would you like this to look? / タイムラインの色
Light / Dark	明 / 暗	背景色白+黒文字または背景色黒+白文字の2択
What language would you like to display this in? / タイムラインの言語
Automatic / その他	自動 / その他	Automatic（自動）または Japanese（日本語）を選択
Opt-out of tailoring Twitter / プライバシー設定
チェックボックス	on / off	チェックする：Twitterに閲覧データを送信しないチェックしない：Twitterに閲覧データを送信する

※Opt-out of tailoring Twitter について
Twitterはユーザの興味・関心に沿う広告を表示することを目的としてTwitterにおけるユーザの行動データを収集し、広告マーケティングサービスに活用しています。これはウィジェットするTwitterタイムラインにも適用されます。「Opt-out of tailoring Twitter」をチェックすると、これらのユーザ行動データはTwitterに送信されません。
（参考）
・Twitter社のパーソナライズド広告に関するプライバシー管理について
・Twitter社が収集するデータとユーザに付与されたプライバシー設定の選択肢について

上の手順で[Update]ボタンを押すと設定オプション窓は閉じて、詳細設定済み埋め込みコードを取得できます。

下図の[Copy Code]をクリックしましょう。

埋め込みコードをコピーできたことを示す画面が表示されます。

Twitterタイムラインを埋め込みたいウェブサイトの編集画面に進み、HTMLを貼り付けましょう。

WordPressサイトのウィジェットにTwitterタイムラインを表示するのであれば、[外観] ＞ [ウィジェット] と進んで、上の手順でコピーしたコードをウィジェットに貼り付けましょう。