【小ネタです】ワードプレスにInstagramの投稿を埋め込む方法

※画像引用:ACphoto



ブログでお店の紹介をする時やレシピを紹介する時はよく画像付きツイートを引用しています。引用させていただいている皆様、いつもありがとうございます

自分で行ったお店なのであれば写真を撮ってきてupするのですが、昨日のチャーハンまとめなど、行ったことがないお店の場合などの場合は大変お世話になっています。

しかしTwitterで当該ツイートが見つからない時もあります。レシピの紹介はまあ、そのまま画像無しで書いてしまうんですが、お店紹介はちょっと画像がないと辛い。しかし他のSNS、たとえばInstagramはワードプレスで埋め込みできなさそう、、、、

ワードプレスにはこのような、記事にツイート、動画、ブログなどを埋め込むブロックがあるのですが、Instagramは探してもありませんで。

※画像引用:ワードプレスより

でもやっぱり画像がほしい!!!

ということで、「なんとかInstagramの投稿を記事に埋め込めないものか」と検索してみたらInstagramも埋め込めることがわかったので、今日はそのやり方をまとめてゆきます。

ワードプレスのブロックエディターを使って埋め込む方法

Instagramで埋め込みコードを取得する

ワードプレスに埋め込みたい投稿を選び、右端の「・・・」をクリック。(使用している画像は私のInstagramです。)

「埋め込み」を選ぶ

「・・・」をクリックしたら出てくる画面より、「埋め込み」を選ぶ。

「埋め込みコードをコピー」をクリック

「埋め込みコードをコピー」をクリックすると、上にたくさん書かれているコードをコピーすることができます。キャプションは不要という方は「キャプションを追加」を外しておきましょう。

ワードプレスの編集画面に移動

①Instagramの投稿を埋め込みたい、ワードプレスの編集画面を開いて左上のブロックエディタを開きます(+をクリックします)

※画像引用:ワードプレスより

②「+」を開くと、テキスト、メディア、デザイン、、と左上にそれぞれのカテゴリが表示されますので、四番目にあるウィジェットの中から「カスタムHTML」を選びます。

※画像引用:ワードプレスより

「HTMLを入力」と書かれたところに先ほどコピーした埋め込みコードを貼り付けます。

※画像引用:ワードプレスより

④埋め込みコードを貼り付けますと、このような状態になります。プレビューをクリックしますとInstagramの投稿が現れます。

※画像引用:ワードプレスより

ちなみにHTMLのままにして記事を投稿してもちゃんとInstagramの投稿画面(画像)がupされますのでご安心ください。

以上で貼り付けは完了です。

コードエディタに直接貼り付ける方法

参考にしたブログで、クラシックエディタ(旧エディタ)で埋め込む方法というのがありまして。(TCD WordPressthemeに繋がります。クラシックエディタで埋め込む方法は下の方にあります)

それを記事に書いてみようと、自分でもやってみていたんですがなぜか埋め込むことができませんで。四苦八苦していたらしめさばさんが見てくれて「コードを埋め込むんならコードエディタに直接貼り付ければいいじゃない」と教えてくれたので貼り付けてみたら、、埋め込むことができましたー!!

ワードプレスの編集画面から編集モードを選ぶ

右上の・・・をクリックする。

コードエディタを選ぶ

Instagramで取得した埋め込みコードをそのままコードエディタに貼りつけます。画像は埋め込みコードの一部です

※Instagramで埋め込みコードを取得する方法は上↑の方をご参照ください。

④プレビューで確認してみると、ちゃんと埋め込まれていますー!

ビジュアルエディターに戻すと、埋め込んだInstagramはこんな感じになりますが、投稿したらきちんと画像が載ってきますのでご安心ください。

まとめ

今日はインスタの投稿をワードプレスの編集画面に埋め込む方法についてまとめてまいりました。ワードプレスのブロックエディターを使ってInstagramの投稿を埋め込んでいましたが、コードエディタでサクッと埋め込むことができることを知ってびっくりしました。PCに疎すぎますね、、

今後も画像が必要な時はTwitterおよびInstagramの画像を引用させて頂きたいと思います。

ということで今日はこのへんで。おやすみなさいませ。





あ、宜しければ・・・。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です