この記事について
この記事では、インスタグラムのフィード投稿(写真や動画)をワードプレスの記事に埋め込んで表示させる方法を解説しています。
こんな方におすすめ
- ワードプレスのブログとインスタグラムを両方やっている人
- インスタグラムの投稿をワードプレスに表示させたい人
- インスタグラムの投稿をワードプレスに表示させる方法がわからない人
スポンサーリンク
インスタグラムとブログの関連付け
ワードプレスで日々ブログを書いていて、記事に関する写真や動画をインスタグラムでも投稿している場合、
記事にインスタグラムの投稿を貼り付けることで、ブログを読んだ人がインスタグラムでもファンになってくれることがある
ので、ブログにインスタの投稿を貼り付けるのはかなりおすすめです。
私自身も、インスタグラマーとしてのお仕事で商品やサービスを紹介するときに、一緒にブログ掲載を依頼されることもあるので、インスタとブログどちらもやっています✏️
しかし、両方で紹介はしていたものの、何を思ったかそれぞれ別々で紹介していて
インスタブログ→ブログ記事
ブログ記事→インスタグラム
の関連付けは行わないでいました。。
これはもったいないと思い、まずはブログ記事にインスタの投稿を貼り付けようと色々試してみました。
すると、複雑な設定やプラグインは一才不要で、とても簡単にできたので方法をご紹介します。
インスタグラムの投稿をワードプレスの記事に埋め込む方法
インスタとワードプレスの関連付けはいたってシンプル。
画面のキャプチャを交えて設定方法を解説していきます。
今回は例として、先日紹介したチーズケーキの記事に、インスタグラムの投稿を貼り付けます。
-
【HOLIC】カマンベールをそのまま食べてるような極上チーズケーキ
続きを見る
見出し「最後に」の、この部分に貼り付けます！
前半はインスタ側、後半はワードプレス側の操作になります。
1.【インスタ側】インスタグラムのプロフィールページにアクセスする
インスタグラムにログインし、プロフィールページにアクセスします。
パソコンの場合、こんな画面になると思います。
2.【インスタ側】記事に貼り付けたい投稿の詳細画面に入る
プロフィール画面には、これまでに投稿した写真が並んでいます。
その中から、ブログ記事に表示させたい写真をクリックして詳細画面に入ります。
今回はチーズケーキの投稿をブログに貼りたいので、いちばん左上の写真をクリックします。
3.【インスタ側】メニューを選択する
詳細画面が表示されたら、右上のメニューを選択します。
少しわかりづらい場所にあります。
4.【インスタ側】メニューから「埋め込み」選択する
メニューが開くので、その中から「埋め込み」を選択します。
「リンクをコピー」で出来たという報告もありますが、使用しているテーマやバージョンによってはできない場合もあります。私はできませんでした。。
5.【インスタ側】埋め込みコードをコピーする
「埋め込みコード」という長いコードが生成されます。
これを記事に貼り付けることでワードプレス側にインスタの投稿が表示されるようになります。
「埋め込みコードをコピー」のボタンをクリックするとコードがコピーされます。
6.【ワードプレス側】埋め込みコードをコピーする
コピーした埋め込みコードを記事に貼り付けます。
記事の編集画面にペーストで丸ごと貼り付けましょう。
注意ポイント
ワードプレスのテキストには「ビジュアルエディタ」と「テキストエディタ」の2種類があります。
今回の貼り付けは「テキストエディタ」にしないと上手くいかないので注意しましょう。
7.【ワードプレス側】貼り付け完了
これでインスタグラムの投稿をワードプレスに貼り付ける作業は完了です。
早速、プレビューで確認してみましょう。
無事表示されていることが確認できました^^
スポンサーリンク
キャプション(文章)を表示させたくないとき
インスタグラムの投稿を記事に表示させることはできました。
しかし、写真と一緒に投稿するときに書いたキャプション(文章)やハッシュタグも表示されています。
もしもキャプションはなしで写真のみ表示させたいときは、インスタ側で埋め込みコードをコピーする手順で設定が可能です。
「キャプションを追加」のチェックボックスに、デフォルトでチェックが入っています。
このチェックを外した状態で埋め込みコードをコピーすると、キャプションが入りません。
再度ワードプレス側に貼り付け、プレビューで確認してみましょう。
今度はキャプションがないシンプルな形になりました。
キャプションのありなしは簡単に設定できるので、場合によって使い分けましょう。
インスタグラムの投稿が記事に上手く表示されないときは
もしもここまでの方法でインスタグラムの投稿表示が上手くいかないときは、次のポイントを確認してみましょう。
チェックリスト
- インスタ側で「埋め込み」ではなく「リンクをコピー」を選択していませんか？
- ブログ側で「ビジュアルエディタ」に埋め込みコードを貼り付けていませんか？
- 貼り付けた埋め込みコードをいじってしまっていませんか？
という場合は、個別でご相談ください。
問い合わせフォーム、公式ライン、インスタグラムのどれかに連絡いただければ対応させていただきます^^
スポンサーリンク
最後に
インスタグラムで投稿した写真や動画を、ワードプレスの記事に貼り付ける方法を解説しました。
どちらもやっている場合はぜひ連携してみることをおすすめします✏️
インスタグラム側にも、プロフィールにサイトのURLをつけることができるので、相互で行き来できるようにしておくと良いです^^
例えば、インスタグラムのファンが記事に貼ったインスタグラムのアカウントに訪れることで、別の写真にも共感してフォロワーになることもあります。
シンプルにPVやフォロワー増加が見込めるという効果ももちろんありますが、相互連携することによって、訪れてくれた人により多くの良い情報を提供できます✨
インスタグラムだけでなく、ツイッターやYoutubeなど複数の媒体を繋げることで広く情報を発信できるようになりたいですね。
