WordPressにTwitterを埋め込む３つの方法

この記事ではWordpressにTwitterを埋め込む方法を解説する。

WordPressのコンテンツに埋め込むTwitterには、「個別ツイート」と「タイムライン」の２種類がある。どちらも簡単に埋め込みが可能なため、ぜひ参考にしてみてほしい。

また、私たちバズ部は12年で400社以上のメディア支援を行い、

• 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア
• 8ヶ月で月間140万PVを実現したアプリメディア

など大きな成果を挙げ続けている。

各サイトの成功要因をインタビューしているので、
あなたのサイトに役立てて欲しい⇒25サイトの成功事例インタビューはこちら

WordPressにTwitterを埋め込む３つの方法

さっそく、WordpressにTwitterを埋め込む方法を解説していこう。ここでは、記事内に個別のツイートを埋め込む方法を解説する。

コピー＆ペーストで埋め込む

最も簡単に設定する方法は、コピー＆ペーストだ。ここではブロックエディターでの場合を解説していこう。

まず、埋め込みたい個別ツイートのURLを以下よりコピーする。

そして、埋め込みたい記事のブロックにそのままペーストするだけでOKだ。

これだけで以下のようにツイートを埋め込むことができる。

ちなみに、この方法はクラシックエディターでも有効だ。

ブロックエディターの埋め込み機能使う

続いて、個別ツイートの埋め込み方法を解説していこう。

まず、記事の編集画面から、Twitterの埋め込みブロックを呼び出す。

すると編集画面に以下のようなブロックが現れる。ここに、個別ツイートのURLをコピペする。

ちなみに個別ツイートのURLは以下の箇所で取得可能だ。

「埋め込み」を押すと埋め込み完了となる。

Twitter Publishを使う

Twitter PublishはTwitterの公式サービスである。このサービスと利用すると埋め込み用のHTMLコードを取得できる。

まずは埋め込みたいツイートの右上の「…」をクリックする。

現れた項目の中から「ツイートを埋め込む」を選択する。

すると自動的にTwitter Publishのサイトに飛び、コードが表示される。表示されたコードをコピーする。

WordPressの編集画面に戻る。ブロックから「カスタムHTML」を選択する。

「HTMLを入力」の画面内にコピーしたコードを貼り付ける。

そのままだと入力画面が表示されたままになるため、上部の「プレビュー」をクリックする。

するとこのように、実際のビジュアルに更新される。

このように、Twitter Publishを利用する場合はブロックエディターで直接入力するよりも手間がかかる。ブロックエディターを使っている人は、埋め込みブロックを利用する方がいいだろう。

Twitter Publishを利用する利点としては、HTMLコードを取得できる点だ。ブロックエディターでなく以前のクラシックエディターを使っていたり、HTMLでしか表示できないウィジェットに埋め込む場合には便利だ。

成功したオウンドメディアの要因を学ぶ

• 

  累計106億円の売上を叩き出した不動産会社のコンテンツマーケティング事例

  1

• 

  わずか8ヶ月で月間140万PVを実現したアプリ企業メディア成功事例

  2

• 

  問い合わせが月4,400件以上！自社メディアで驚異的なCV数を生み出した弁護士事務所

  3

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

次は、Wordpressのサイドバーウィジェットなどに自分のTwitterのタイムラインを表示させる方法を解説しよう。

まずは、自分のTwitterのURLをコピーする。

「Twitter Publish」のトップページにアクセスし、TwitterのURLを貼り付けEnterを押す

すると、以下が表示される。タイムラインを表示させる場合は、Embedded Timelineをクリックする。

以下のように埋め込み用のコードが表示されるので、コードをコピーする。

WordPressの編集画面に戻ろう。「外観」から「ウィジェット」を選択する。

ウィジェット編集画面に移る。一番下の「+」から、「カスタムHTML」を選択する。

あとは記事の編集画面と同じだ。HTMLを入力ボックスにペーストしてプレビューを押す。

すると、ウィジェットにTwitterが埋め込まれている様子が表示される。

実際には以下の通りに表示された。

Twitterの埋め込みに失敗した場合の解決策

ここでは、Twitterの埋め込みがうまくいかなかった場合の解決策を紹介していく。

ツイートの埋め込みができない場合

URLやコードを正確にコピペしているにも関わらずツイートの埋め込みに失敗した場合、以下の3つの理由が考えられる

• Javascript設定がオフになっている
• プラグインが干渉している
• Twitterアカウントが非公開になっている

Javascript設定がオフになっている

埋め込んだツイートが表示されずに引用した文章のような形になってしまう場合は、利用しているブラウザの設定によるものの可能性が高い。

解決策としては、ブラウザのJavascript設定をオンにすることだ。

Google Chromeの場合は以下の通りに設定が可能となる。

• Google Chromeの右上のメニューアイコンから「設定」をクリック
• 「プライバシーとセキュリティ」から「サイトの設定」をクリック
• 「Javascript」項目で「サイトがJavascript を使用できるようにする」を有効にする

Javascript設定が原因だった場合はこれで解決できる。

プラグインが干渉している

使っているプラグインによっては通常の機能に干渉してしまうこともある。この場合は一つずつプラグインを停止し、解決するかどうか確認してみよう。埋め込みを妨げるプラグインを特定することで解決できる可能性がある。

Twitterアカウントが非公開になっている

それでもツイートが表示されない場合は、もしかしたらTwitterアカウントが非公開になっているのかもしれない。引用したいTwitterアカウントが非公開設定になっていないか確認してみよう。

自分のツイートを引用したい場合は公開設定にすることで埋め込むことができる。

埋め込んだツイートが表示されなくなった場合

埋め込んでいたツイートが急に表示されなくなってしまった場合は、以下の理由が考えられる。

• ツイートが削除された
• アカウントが非公開に変わった

この場合はいずれも、ツイートをしたアカウントの管理側の問題なので、こちらでは解決できない。

まとめ

以上、この記事ではTwitterをWordpressに埋め込む方法を解説してきた。

埋め込みの方法としては、以下の３種類がある。

• コピー＆ペーストで埋め込む
• ブロックエディターの埋め込み機能使う
• Twitter Publishを使う

WordPressにツイートを埋め込むのは非常に簡単だ。

Twitter Publish のほうも、HTMLコードの貼り付け方法を覚えてしまえば様々なシーンで活用できるため、ぜひ一度使ってみよう。