WordPressで運用しているブログにTwitterタイムライン(ツイート一覧)を表示させる方法【画像17枚で説明】

ブログに紐付いたツイッターアカウントを運用している場合、そのアカウントが呟いたツイート(Twitterのタイムライン)をブログに表示したいですよね。

当ブログだとこんな感じ↓。

このブログはハミングバード(Hummingbird)というワードプレスの有料テーマで作ってます。

ハミングバードでどうやってツイッターのフィードを表示させるか、その方法をさくっと解説していきます。

大きく分けて二つの作業が必要です。

  • Twitterタイムライン表示用のコードをpublish.twitter.comから入手する
  • そのコードをWordpressに「ウィジェット」として表示されるよう設定する

それぞれ見ていきましょう。

Twitterタイムライン表示用のコードをpublish.twitter.comから入手する

自身のツイッターアカウントのツイート一覧(フィード)を、「Twitter Publish」という場所でコード化してもらいます。

1)Twitter Publishにアクセスする → https://publish.twitter.com/#

2)Twitter Publishの下段にある「Embedded Timeline」をクリック

3) ブログに表示させたいツイッターアカウントのURLをタイプする。

4)ツイッターアカウントのURLをタイプ→Previewをクリックすると、下記のようにツイッタータイムラインが表示されます。

ここで、あなたのツイッターアカウントのタイムラインがコード化されました。<a Class>”twitter〜から始まっている文字列がコードです。

このコードは、あとでWordpressに貼り付けるのでコピーをしておきます。「Copy Code」をクリックしてください。

5)「Copy Code」をクリックすると下記のような画面が表示されます。

これで作業の半分は終了です。では、次にWordpressをいじって行きましょう。

WordPressに「ウィジェット」として表示されるよう設定する

1)Wordpress(ワードプレス)のダッシュボードから「外観」に入る。

2)外観→「ウィジェット」に進む

3)外観→ウィジェット→「テキスト」をクリック

4)外観→ウィジェット→テキストまで来たら、ツイッターのフィードを表示させたい位置を選びます。私の場合は「【広告】サイドバー」です。

5)位置を選択したら、「ウィジェットを追加」をクリック

6)すると、インプット画面が出てきます。↓こんな感じの。

7)先程コピーしておいた、タイムライン表示用のコードを貼り付けます。↓下記のように、必ず「テキスト」タブを選択しておいてください。

8)タイムライン表示のコードをペーストしてください。

9)ペーストしたら右下の「保存」ボタンをクリック。すると、「保存」→「保存しました」に表示が変わります。

10)いったんおさらいです。

ワードプレスのダッシュボード→外観→ウィジェット→テキスト→【広告】サイドバー(PC)→テキストタブ→タイムライン表示コードを貼り付け→保存をクリック

すると、下記のような状態になっているはずです。こうなっていれば完了です。

11)ブログのトップページを表示させると、下記のようにツイートが表示されているはずです。

おわりに

ブログにツイッターのタイムラインを埋め込む方法を解説してきました。

(私のブログは有料テーマのハミングバード)

おおまかに、下記の作業でタイムラインを表示させることができます。

  • Twitter Publishからタイムライン表示用のコードを入手する
  • ワードプレスのウィジェットでタイムライン表示の設定をする

参考になれば幸いです。