【簡単】WordPressにTwitterを埋め込む方法【ツイートとタイムラインの両方を解説します】

「ワードプレスを使ってブログを運営しているけど、Twitterの投稿を埋め込みたい。どうやってやるんだろう。」

こういった疑問を解決します。

Twitterのサイトへの埋め込みに関しては、主に２種類があります。

ブログ記事内に情報の補足としてツイートを埋め込む
サイトのサイドバーなどにタイムラインを埋め込む

この記事では、この２種類の方法について解説していきます。

ツイートを埋め込む方法
- URLをコピペする方法
- コードを取得する方法
タイムラインを埋め込む方法
- タイムラインのコードを取得する
- ウィジェットにコードを貼り付ける

ツイートを埋め込む方法

ツイートの埋め込みは、主に下記の２種類の方法で行うことができます。

URLのコピペで埋め込む
コードを取得して埋め込む

この内容について詳しく解説していきます。

URLをコピペする方法

この方法は基本的にはワードプレス限定の方法です。
そしてかなり簡単です。

手順は以下のとおりとなっています。

STEP.1
ツイートのURLをコピー

Twitterで埋め込む対象となるツイートを開き、URLをコピーしておきます。
STEP.2
記事内にペースト

コピーしたURLを記事内の好きな場所へペーストします。
※画像はテキストモードになっていますが、ビジュアルモードでもOKです。

これでツイートの埋め込みは完了です。

ちなみに以下が実際に埋め込んだツイートとなります。

ワードプレスのバックアップが取れる、便利プラグインについてです。
実際にバックアップを取るところまで解説してみました。

【WordPress】バックアップが取れるプラグイン「BackWPup」の設定方法と使い方｜AmaDemo https://t.co/gSM1bymGmC

— aki@ブロガー (@amademo_amy) August 19, 2019

よく見る形式ですね。
続いてコードを取得する方法を見ていきましょう。

コードを取得する方法

コードを取得する方法は、はてなブログなどのワードプレス以外でも使用できる方法となっています。
一応こちらの方法も解説しておきます。

手順は以下の通りです。

STEP.1
ツイートのコードを表示する

Twitter内で対象のツイートの右上にある「∨」をクリックします。
ここで表示された「ツイートをサイトに埋め込む」を選択しましょう。
STEP.2
コードをコピー

表示されたコードを全てコピーします。
STEP.3
記事にペースト

コピーしたコードを記事内の好きな場所へペーストします。
※ワードプレスの場合は、テキストモードでペーストしてください。

これでツイートの埋め込みは完了です。

ちなみに以下が実際に埋め込んだツイートとなります。

ワードプレスのバックアップが取れる、便利プラグインについてです。
実際にバックアップを取るところまで解説してみました。

【WordPress】バックアップが取れるプラグイン「BackWPup」の設定方法と使い方｜AmaDemo https://t.co/gSM1bymGmC

— AMY (@amademo_amy) August 19, 2019

表示自体は変化なしです。
他のブログサービスならこの手法を使ってもいいですが、ワードプレスであればリンクを貼り付ける方法が簡単なので、圧倒的にリンクをおすすめします。

これで、ツイートの埋め込みに関する内容は以上です。

タイムラインを埋め込む方法

僕のサイトもそうですが、サイトによってはサイドバーやフッターに「タイムライン」という、自分のツイートをスクロールしてみれる場所を設置しているサイトもあります。

この方法に関しては以下の２つの作業を行うことで、設置することが可能です。

タイムラインのコードを取得
ウィジェットにコードの貼り付け

これも結構簡単に設置できる方法なので、順に解説していきます。

タイムラインのコードを取得する

タイムラインのコードを取得するには「Twitter Publish」というサイトを使用します。

Twitter Publish

ここにアクセスした上で作業を進めていきましょう。

STEP.1
URLを入力

サイトを開き、自分のツイッターアカウントのURLを入力し、「→」をクリックします。
STEP.2
タイムラインを選択する

上記の画面で左側の「Embedded Timeline」をクリックして、タイムラインを選択しましょう。
STEP.3
カスタマイズを行う
右上の「Set customization options」をクリックすると、タイムラインのカスタマイズを行うことができます。
内容は以下の4つ。
- 縦と横の幅の指定
- 背景色の指定
- リンクの文字色の指定
- 言語
高さ（Height）は未設定だと、かなり下に長いタイムラインになってしまいます。
なので、ここは400pxくらいで設定しておきましょう。
その他はわりとデフォルトでもOKです。
STEP.4
コードのコピー

できあがったコードをコピーしておきましょう。

これで貼り付けコードの準備は完了です。

ウィジェットにコードを貼り付ける

ここではウィジェットに貼り付けることのできるエリアを準備して、実際にタイムラインのコードを貼り付けていきます。

手順は以下の２ステップです。

STEP.1
ウィジェットにテキストを追加

ワードプレス管理画面で「外観」→「ウィジェット」で、ウィジェット画面に移動します。
ここで対象のウィジェットに「テキスト」を追加しましょう。
※操作はドラッグ&ドロップでOKです。
STEP.2
コードの貼り付け

先ほど取得したタイムラインのコードを貼り付け、「保存」をクリックします。
※この時、ビジュアルではなく「テキストモード」にしてから貼り付けを行いましょう。