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

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

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


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

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

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

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

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

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

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

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

ツイートをまとめて埋め込むことはできない
クリップボードやメモ帳などを利用して埋め込みたいツイートを複数メモし、それらをコピペしてまとめて埋め込むことはできないので注意が必要だ。その方法だと複数のURLがテキストとして認識されてツイートとして読み込まれないためだ。

コピペで複数ツイートを埋め込む場合は一つずつコピペして埋め込もう。

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

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

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

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

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

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

Twitter Publishを使う

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

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

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

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

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

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

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

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

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

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


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に埋め込む方法を解説してきた。

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

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

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

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

無料eBook:バズ部式マーケティング
広告費を1/10にして売上を倍増させる全手法

広告に頼り切ったマーケティングの打開策としてコンテンツマーケティングについて調べているけれど、よく分からないと悩んでいませんか?

本書は弊社やクライアント様がコンテンツマーケティングに取り組み

  • ・SEOのみで月間100万PV集めた方法
  • ・平均6.92%のコンバージョン率が出た新規顧客獲得法
  • ・CPLやCPAを大幅に改善した方法とそのからくり

など、コンテンツマーケティングの効果と、具体的な施策内容を全94ページに渡って詳細に解説しているものです。

ぜひ、貴社のWEBマーケティングにもご活用ください。

eBookをダウンロード

コメントはこちらから

  1. お世話になっております。こちらを参考に現在ブログ作成中の者です。

    「1−3.Twitter にサイトを登録」で「Request approval」のボタンが現れないので質問いたします。
    手を貸していただけると助かります><よろしくお願いいたします!

    twitterの検証サイトまで行き、ブログURLを入力しましたが、

    Unable to render Card preview

    と表示されてしまいます。
    Logには、以下のように表示されていますので、何かが上手く機能していないようです。

    INFO: Page fetched successfully
    INFO: 4 metatags were found
    WARN: Not whitelisted

    お忙しい中恐れ入りますが、お教えいただけると助かります。
    よろしくお願いいたします。

    1. ご質問ありがとうございます。
      弊社としましては、皆様が価値あるコンテンツを発信される事に対して、最大限サポートさせて頂きたく思っております。
      しかし、個別環境の不具合に関するすべてのご質問へ回答させて頂くことは困難であり、現状有料でのサポートも行っておりません。

      ご期待に沿えることが出来ず恐縮ですが、ご理解頂けますよう何卒よろしくお願い致します。

  2. 初めまして。ちたろーと申します。
    2ヶ月前にブログをはじめ、いままで全く踏み入れていなかったツイッターに参加しました。

    ツイッターカードの設定が何度やってもうまくできず、
    泣きそうになって辿り着いたのがこのページでした。

    初心者の私でも、手順どおりに進めて昨日やっとカード表示ができるようになり、本当に感謝しています。
    またわからないことがあったら訪問したいと思いますので、どうぞよろしくお願いします。
    ありがとうございました。

コメントは停止中です。