WordPress入門

WordPressでTwitter・Facebook・Instagramの投稿を埋め込む方法

2020年9月9日

WordPressでTwitter・Facebook・Instagramの投稿を埋め込む方法

今回はWordPressで作ったサイト・ブログの固定ページ、投稿でTwitter・Facebook・Instagramの投稿を埋め込む方法を紹介します。

最新のブロックエディターを利用されている場合、とても簡単なので是非使ってみてください。コードエディターでも手順を覚えれば簡単にできます。

WordPressで投稿を埋め込む方法

WordPressで投稿を埋め込む方法

WordPressでTwitter・Facebook・Instagramの投稿を埋め込む方法は大きく3つあります。

  • 直接ソースコードを記述して埋め込む方法
  • カスタムHTMLで埋め込む方法
  • ブロックで埋め込む方法

コードエディターの方は「直接ソースコードを記述して埋め込む方法」、ブロックエディターの方は「カスタムHTMLで埋め込む方法」「ブロックで埋め込む方法」で埋め込むことになります。

直接ソースコードを記述して埋め込む方法

コードエディターの投稿画面

直接ソースコードを記述して埋め込む場合、「ビジュアルエディター」ではできません。

エディターで「コードエディター」を選択します。

上部画像の左側の赤枠にソースコードを記述していきます。

コードエディターの投稿画面

Twitterの投稿のソースコードをコピーして、WordPressの投稿画面で貼り付けます。

あとは下書きを保存してプレビュー表示で確認します。

カスタムHTMLで埋め込む方法

カスタムHTML

ブロックの検索から「カスタムHTML」を選択します。

カスタムHTML

「カスタムHTML」のブロックにTwitterの投稿のソースコードを貼り付けます。

あとは下書きを保存してプレビュー表示で確認します。

ブロックで埋め込む方法

Twitter

ブロックの検索から「Twitter」を選択します。

Twitter

「Twitter」のブロックにTwitterの投稿のURLを貼り付けます。

あとは下書きを保存してプレビュー表示で確認します。

WordPressでブロックを使って投稿を埋め込む方法

WordPressでブロックを使って投稿を埋め込む方法

WordPressでTwitter・Facebook・Instagramの投稿を1番簡単に埋め込む方法はブロックエディターどブロックを使って埋め込む方法です。

ソースコードなどの取得が必要なく、各投稿のURLをコピペして貼り付けるだけなので初心者の方でもスムーズにできます。

Twitterを埋め込む方法

Twitter

ブロックの検索から「Twitter」を選択します。

Twitterのアドレスバー
Twitter

「Twitter」のブロックにTwitterの投稿のURLを貼り付けます。

あとは下書きを保存してプレビュー表示で確認します。

Twitterの投稿は上記のように表示されます。

Twitterのアドレスバー

ちなみに「Twitter」のブロックにTwitterのアカウントのURLを貼り付けることで、タイムラインを表示させることもできます。

Twitterのタイムラインは上記のように表示されます。

Facebookを埋め込む方法

Facebook

ブロックの検索から「Facebook」を選択します。

Facebookの投稿

Facebookで埋め込みたい投稿の右上の「•••」をクリックします。

埋め込み

クリックした際のメニューから「埋め込み」を選択します。

投稿を埋め込む

「詳細設定」をクリックします。直接ソースコードに記述する際は「投稿を埋め込む」に表示されているソースコードをコピペして埋め込みます。

投稿のURL

遷移後のページの「コードジェネレーター」に表示されている「投稿のURL」をコピーします。

https://www.facebook.com/yjnews/posts/4255883117816349

あとはFacebookのブロックに投稿のURLを貼り付けて完了です。

Instagramを埋め込む方法

Instagram

ブロックの検索から「Instagram」を選択します。

Instagramのアドレスバー

Instagramの投稿詳細ページで、アドレスバーに表示されているURLをコピーします。

https://www.instagram.com/p/B-H9ToNDqGq/?utm_source=ig_web_copy_link

あとはInstagramのブロックに投稿のURLを貼り付けて完了です。

当サイトで申込みが多いプログラミングスクール・教室はこちら!

【1位】ポテパンキャンプ:Webエンジニア輩出率No1

【2位】CodeCamp:満足度96.6%のプログラミングレッスン

【3位】DMM WEBCAMP:プログラマー転職成功率98%

【4位】TechAcademy:プログラミングスクール受講者数No1

【5位】GEEK JOB:満足度・転職率が高い・20代社会人経験者向け

-WordPress入門

© 2021 nukoblog