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

Twitter timelineの埋め込みコードを取得する方法について SNS & web services

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

スポンサーリンク

事前準備

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

Twitter URLは、ココ↓

Twitter URL

Twitterユーザ名は、ココ↓

Twitterユーザ名

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

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

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

Twitter timeline 埋込コードを取得する

Twitter publish サイト(https:publish.twitter.com/)を開きます。

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

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

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

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

Twitter publishで埋め込みコードを取得する

Twitter URLを入力してタイムライン埋め込みコードを取得する

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

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

埋め込みタイムラインを選択し、表示オプションを設定する

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

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

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

Twitter timelineを選択してオプションを設定する

カスタマイズ オプション(タイムラインの表示)を設定する

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

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

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

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

Twitter timeline ウィジェット表示設定

 

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埋め込みコードをコピーする

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

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

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

埋め込みコード、コピー完了