Xのポストをブログに埋め込む方法|WordPressでの手順を解説

Xのポストをブログに埋め込む方法|WordPressでの手順を解説 SNSの使い方

Xの公開ポストは、WordPressなら個別ポストのURLを埋め込みブロックへ貼るだけでブログに表示できます。

カスタムHTMLを利用できるブログやWebサイトでは、X公式が発行する埋め込みコードを貼る方法も選べます。

この記事では、2つの埋め込み方法の違いと具体的な手順に加えて、URLだけになったりポストが表示されなかったりする場合の確認方法を解説します。

Xのポストをブログに埋め込む方法は2通り

WordPressではポストURLを貼る方法が簡単で、HTMLを入力できる環境ではX公式の埋め込みコードも利用できます。

どちらも単一の公開ポストを埋め込む方法ですが、貼り付ける内容と利用できる環境が異なります。

自分のブログに合う方法は、次の表で判断できます。

方法 向いている環境 貼り付ける場所
個別ポストのURLを貼る WordPressのブロックエディター、WordPress.com Twitterブロックまたは埋め込みブロック
X公式の埋め込みコードを貼る 自己ホスト型WordPressなど、カスタムHTMLを利用できる環境 カスタムHTMLブロックなどのHTML入力欄

WordPressのブロックエディターを使っている場合は、最初にURL方式を試すと、コードを扱わずに埋め込めます。

WordPress.comも単一ポストのURL方式に対応しており、空の行へURLを貼るとTwitterブロックへ自動変換されます。

WordPress.comでは、Xの[ポストを埋め込む]から生成したコードを貼る方法は公式にサポートされていないため、URL方式を使用してください。

自己ホスト型WordPressなど、カスタムHTMLを入力できる環境では、X公式コードを取得して貼る方法も選択肢になります。

いずれの方法も、ログアウトした人が閲覧できる公開ポストが対象で、基本的な埋め込みに追加のプラグインは必要ありません。

公開ポストと非公開ポストの違いや、ブログに埋め込めるポストの条件については、「Xの公開ポストと非公開ポストの違い|ブログに埋め込めるのはどっち?」で詳しく解説しています。

プロフィールやタイムライン全体の埋め込みは、ここで説明する単一ポストの埋め込みとは別の機能です。

WordPressにポストURLを貼り付けて埋め込む手順

WordPressでは、Xから個別ポストのURLをコピーし、Twitterブロックまたは埋め込みブロックへ貼り付けます。

正しく埋め込まれると、URLの文字列ではなくポストの内容がエディター上にプレビュー表示されます。

Xで埋め込みたいポストのURLをコピーする

最初に、ブログへ掲載したいポストの個別ページを開きます。

  1. ブラウザーでx.comを開く
  2. 埋め込みたいポストの日時をクリックする
  3. 個別ポストのページが開いたら、アドレスバーのURLをコピーする

コピーするのはアカウントのプロフィールURLではなく、対象ポストだけを表示する個別URLです。

プロフィールURLを貼ると、目的の単一ポストとして認識されない場合があります。

Twitterまたは埋め込みブロックにURLを貼る

ポストのURLを取得したら、WordPressの記事または固定ページの編集画面を開きます。

空の行へコピーしたURLをそのまま貼ると、対応する環境ではTwitterブロックへ自動変換されます。

自動変換されない場合は、次の手順でブロックを指定してください。

  1. ポストを表示したい位置で[+]を選ぶ
  2. 「Twitter」または「埋め込み」を検索してブロックを追加する
  3. 入力欄へ個別ポストのURLを貼り付ける
  4. [埋め込み]を選ぶ

URLは、前後に文章や空白を加えず、単独行へプレーンテキストとして貼り付けます。

リンク装飾や中央寄せなどの書式を先に設定すると、埋め込みへ変換されない場合があります。

操作後にエディター上でポストのプレビューが表示されれば、埋め込み処理はできています。

保存または公開する前にプレビューを開き、実際のページでもポストが表示されることを確認してください。

実際の表示例として、Google Japan公式Xの公開ポストを埋め込んでみます。

ポスト内容そのものではなく、WordPress上でどのように表示されるかを確認してください。

X公式の埋め込みコードをブログへ貼る手順

カスタムHTMLを利用できるブログでは、x.comから公式の埋め込みコードを取得して貼り付けられます。

この方法では、X Publishで表示を確認してから、生成されたコードをブログ側のHTML入力欄へ追加します。

x.comから埋め込みコードを取得する

X公式の埋め込みコードは、対象ポストのメニューから取得します。

  1. ブラウザーでx.comを開き、埋め込みたいポストを表示する
  2. ポスト内のメニューから[ポストを埋め込む]を選ぶ
  3. 移動先のpublish.x.comでプレビューを確認する
  4. 必要に応じて[set customization options]から表示を調整する
  5. [Copy Code]を選び、表示されたコードをコピーする

埋め込みたいポストが返信の場合は、[Hide Conversation]を選ぶと返信元のポストを非表示にできます。

Xへアップロードされた画像や動画のほか、リンクにひも付いているコンテンツを含むポストも埋め込み可能です。

ブログのカスタムHTML欄へコードを貼る

コードをコピーしたら、ブログ側でHTMLを入力できる場所を開きます。

自己ホスト型WordPressでは、ポストを表示したい位置にカスタムHTMLブロックを追加し、X Publishでコピーしたコードをそのまま貼り付けます。

コードを貼った後はプレビューを開き、ポストの本文や画像などが表示されるか確認してください。

編集画面で表示されても、公開ページでは読み込まれない可能性があるため、実際のページでも確認します。

WordPress.comではXが生成した埋め込みコード方式は公式サポート外なので、個別ポストのURLを貼る方法を使用してください。

利用中のブログサービスがscriptタグを許可していない場合は、コード方式ではなくURL方式を試します。

URL方式にも対応していない場合は、埋め込みの代わりに元ポストへの通常リンクを掲載します。

クラシックエディターの場合は「テキスト」に貼り付ける

クラシックエディターを使っている場合は、記事編集画面右上の「テキスト」に切り替え、X Publishでコピーした埋め込みコードをポストを表示したい位置へ貼り付けます。

貼り付けた後は「ビジュアル」に戻し、プレビューまたは公開ページでXポストが正常に表示されることを確認してください。

Xのポストを埋め込みできない・表示されないときの対処法

Xのポストが表示されないときは、貼り付けたURLの状態と、元ポストが一般公開されているかを順番に確認します。

以前は表示されていた埋め込みが消えた場合も、元ポストの公開状態が変わっていないかを確認してください。

URLや貼り付け方を確認する

WordPressでURL方式を使う場合は、次の項目を上から確認します。

  • URLの前後に文章や空白がなく、単独行へ貼られているか
  • URLがハイパーリンク化されず、プレーンテキストになっているか
  • 中央寄せなどの書式が付いていないか
  • プロフィールではなく、特定のポストを示すURLか
  • 認識を妨げる追跡用パラメータなどが付いていないか

URLと貼り付け方に問題が見つからない場合は、埋め込みブロックを一度削除して追加し直します。

追加し直すことで、外部サービス側の変更後にポストの情報を新しく取得できる場合があります。

自己ホスト型WordPressなどでカスタムHTMLを利用できる場合は、前章のX公式コード方式へ切り替える方法もあります。

ただし、WordPress.comでは公式コード方式がサポートされていないため、URL方式で解決できなければ通常リンクへの変更を検討します。

ポストの公開状態を確認する

貼り付け方が正しくても、ログアウトした人が閲覧できないポストは埋め込めません。

対象ポストのURLをシークレットウィンドウで開き、Xへログインしていない状態でも内容が表示されるか確認してください。

保護されたポスト、削除済みのポスト、年齢や地域による閲覧制限があるポストは、ブログへ正常に埋め込めない場合があります。

公開時には表示できていても、投稿者がポストを削除したりアカウントを非公開に変更したりすると、後から表示されなくなります。

元コンテンツが削除または非公開になった場合は埋め込みを復元できないため、通常リンクや別のコンテンツへ置き換えます。

Xの埋め込みコンテンツを表示すると、閲覧したページ、IPアドレス、ブラウザー、OS、Cookie情報などをXが受け取る場合があります。

サイトのプライバシーやCookieに関する対応は、運営環境に合わせて確認してください。

WordPressでは個別ポストのURL方式を使い、カスタムHTMLを利用できる環境ではX公式コード方式も選べます。

表示されない場合は、URLの貼り付け方を確認してから、シークレットウィンドウで元ポストの公開状態を確認しましょう。

参考・出典

タイトルとURLをコピーしました