WordPressでは、X(旧Twitter)のポスト(投稿)を簡単に表示できます。

当記事では、Xのポストを埋め込む方法についてご紹介しますので、参考にご覧ください。


WordPressテーマ「GLUE」
WordPressテーマ「GLUE」
無料で高機能なWordPressテーマが手に入る。

X(旧Twitter)の投稿をWordPressに埋め込む方法

ポスト(投稿)を埋め込む場合は、ポストのURLをエディタに貼り付けるだけで簡単に埋め込めます。

ブロックエディタの場合

まずは、Xをブラウザで開き、埋め込みたいポストのURLをコピーしましょう。後はエディタにURLを貼り付けるだけです。

XのポストのURLをコピーする

エディタに貼り付けると、次のように表示されます。

Xのポストがブロックエディタ内に表示された例

自動で「X埋め込みブロック」として認識されます。

シンプルに埋め込みたいだけならこの方法で十分ですが、見た目のサイズ感などを調整したいときは、クラシックエディタの場合と同様の、埋め込みコードを利用してください。

ポストの埋め込みは著作権侵害?
基本的に著作権侵害になる可能性は極めて低いです。しかし、特殊な条件下ではNGの可能性もあります。悪意がなければ基本的に問題ありませんが、SNSのお作法としても知っておくと便利。詳しくはこちらの記事をご覧ください。

クラシックエディタの場合

Classic Editorの場合は、URLをそのまま貼り付けるだけでは、表示できません。埋め込みコードに変換する必要があります。

といっても、方法はシンプルです。

埋め込みたいポストのページで「⋯」をクリック

埋め込みたいポストのページで「⋯」をクリックして、「ポストを埋め込む」を選択します。

「ポストを埋め込む」を選択

自動的に次の「X Publish」が開きます。

X Publish

通常のポストなら右側の「Embedded Post」をクリックします。左側は動画ポストを埋め込むときにクリックします。

表示された埋め込みコード

下部に表示される「Copy Code」を押したらそれをコードエディタに貼り付ければOKです。

実際に当記事に貼り付けるとこのように表示されます。

Xのポストを1つのページに大量に埋め込んだ場合、ページの表示速度が極端に遅くなります。遅延対策の記事も併せてご確認ください。

AIで配置やサイズを調整する方法

Xの埋め込みポストの配置やサイズを調整したい場合は、AIを使うと便利です。

たとえば、先ほど埋め込んだXのポストを「中央配置にしたい」「横幅を少し狭めたい」といった場合も、コードを調整することで対応できます。

以下のようなプロンプトを、ChatGPTGeminiにそのまま入力してみましょう。

以下のX埋め込みコードを、中央配置かつ横幅350pxで表示されるように調整してください。
WordPressのエディタ(クラシック・ブロック)に貼り付けられる形でお願いします。

(ここに埋め込みコードを貼り付ける)

以下が実際に貼り付けた例です。コードがわからない方でも簡単に見え方を調整できますね。

タイムラインを埋め込みたいときは?

X公式(タイムラインを埋め込む方法)では、現在も「X Publish」を利用したタイムライン埋め込み方法が案内されています。

まずは、XアカウントのプロフィールページURLをコピーします。

プロフィールページのURL

次に、X Publishへアクセスして、URLを貼り付けます。

X Publishに貼り付けたURL

エンターキーを押すと、埋め込みコードを取得できます。

コードをコピーする箇所

しかし現在は、X側の仕様変更により、正常に表示されないケースが増えています。

実際、筆者検証時にも、「Tweets by 〇〇」という文字だけが表示され、タイムライン本体が読み込まれませんでした。

筆者検証時の表示例:「Tweets by tcd_jp」

どうしてもタイムラインを表示したい場合は、外部サービスや、Xのタイムラインに対応したWordPressプラグインをご利用ください。

Twitterカードの設定はお済みですか?

Webサイトの運営にXを活用するなら、Twitter cardsの設定も合わせて行っておきましょう。

設定することで、Xでページをシェアした際にタイトルやサムネイル画像等も表示させることができるようになります。まだ設定されていない方は、下記に設定方法を解説してますので、こちらも合わせてご覧ください(TCDテーマをお使いの方は、管理画面から簡単に設定できます)。

世界最高品質のデザインの
WordPressテーマ集
WordPressテーマ「ISSUE」
WordPressテーマ「ISSUE」
人材不足を解決する求人採用サイトを。
WordPressテーマ「SEEED」
WordPressテーマ「SEEED」
Webサービスを販売するLP型テーマ。
WordPressテーマ「GENESIS」
WordPressテーマ「GENESIS」
スタイリッシュな企業サイトの決定版。
WordPressテーマ「SOLARIS」
WordPressテーマ「SOLARIS」
一流の企業のための一流の企業サイトを。