若者のチャレンジを後押しするメディアを作りました!▶︎▶︎▶︎

WordPressのサイトにInstagramを埋め込む方法【レスポンシブ対応】

WordPress
スポンサーリンク
現役エンジニアがおすすめする!
プログラミングスクールランキング

  1. TechAcademy20以上の豊富なコースから自分に合ったスキルを学ぶ!
  2. TECH::EXPERT:エンジニア転職、案件獲得できなければ全額返金保証!
  3. DMM WEBCAMP経済産業省が認定!エンジニア転職成功率98%!

HikoPro
HikoPro

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです!

最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

WordPressでブログを運営しているんだけど、自分のInstagramのアカウントのタイムラインを、記事内やサイドバーに埋め込みをしたい!

インスタが更新させたら、埋め込んだタイムラインも自動更新されて、さらにレスポンシブ(スマホ)対応もしてほしい!

今回の記事では、WordPressでブログ運営をしている方向けに、Instagramの投稿、タイムラインを記事内やサイドバーに埋め込む方法を解説していきます!

記事内に投稿埋め込みの例

サイドバーにタイムラインを埋め込み

This error message is only visible to WordPress admins

Error: There is no connected account for the user hiko_pro Feed will not update.

Instagramをブログ内に埋め込むことで、ブログ閲覧者がInstagramのアカウントを覗きに行ってフォーローしてくれる可能性もあるので、インスタの運用も頑張っている方はぜひ、この記事を参考にして実装してみましょう!

こんな方にオススメ
  • WordPressにインスタの投稿を記事内に埋め込みたい方
  • WordPressのサイドバーにタイムラインを埋め込みたい方
スポンサーリンク

WordPressのサイトにInstagramを埋め込む方法

WordPressのブログサイトでInstagramを埋め込む方法は2種類あり、、、

  • 個別投稿を記事内に埋め込む
  • プラグインを使用し、タイムライン(投稿一覧)をサイドバーに埋め込み

この2つの種類があります。

カフェについて発信している人であれば、ブログ記事でカフェの写真を使う際はインスタの投稿を埋め込めば、そのままインスタへの流入が見込めるでしょう。

インスタの投稿をブログに埋め込む人の条件

ブログのテーマと、インスタのテーマが同じであり、Instagramのフォロワーを増やしたいと考えている方!

記事内にインスタの個別投稿を埋め込む方法

記事内にインスタの個別投稿を埋め込むとこのようになります。

この埋め込みのいい所は、Instagram公式の埋め込みタイプになっており、「プロフィールを見る」ボタンが設置されたり、いいねの数が自動で更新される点です。

一つデメリットを上げるとすると、普通に画像を埋め込むよりも、ページの読み込み速度が遅くなるという点です。

Hiko
Hiko

埋め込みの方法はとっても簡単です!

  1. PCでInstagramにログイン
  2. 埋め込みたい投稿を選択
  3. 右上の・・・をクリック
  4. 埋め込みをクリック

埋め込みをクリックすると、このような画面が表示されるので「キャプションを追加」(テキスト)を選択し、埋め込みコードをコピーします。

コピーしたコードをそのまま記事内に貼り付ければ、インスタの投稿埋め込みは完了です!

  • 旧エディター:テキストタイプで埋め込み
  • Gutenberg:カスタムHTMLで埋め込み

キャプション無し

キャプションあり

この投稿をInstagramで見る

Ghost apartment

Shinichi Hikosakaさん(@hiko_pro)がシェアした投稿 –

プラグインを使ってサイドバーにタイムラインを埋め込む

次にWordPressのブログで、サイドバーやフッターにInstagramのタイムラインを埋め込む方法をご紹介します!

Hiko
Hiko

僕はこのようにサイドバーに埋め込んで、インスタが更新されると、ここの埋め込みも自動的に更新されるようにしています!

方法はとっても簡単で、「Smash Balloon Social Photo Feed」プラグインを使えば簡単に実装できます!

スポンサーリンク

1.Smash Balloon Social Photo Feed をインストール

まずは、プラグインの追加画面から、「Instagram Feed」と検索すると、一番初めに表示されるプラグインをインストールして有効化します。

インストール数も多く、更新頻度も高いので信頼性の高いプラグインです!

2. プラグインとInstagramを連携させる

  1. サイドバーの「Instagram Feed」をクリック
  2. 紺色のボタンをクリック
  3. Instagramの画面が開かれる
  4. 認証する
  5. プラグイン設定画面に戻ると、連携が完了
  6. 変更を保存ボタンをクリック

プラグインを有効化すると、サイドバーに「Instagram Feed」が追加されるので、クリックします。

Connect an Instagram Accountをクリックすると、Instagramの画面が開くので、ログイン情報を入力し、プラグインと連携させましょう!

すると、あなたのアカウント名がプラグインの管理画面に反映されているか確認し、「変更を保存」クリックします。

3. 埋め込みの表示設定をしていく

プラグインの設定画面の上のタブを、「Customize」に切り替えます。

最低限設定しておきたい項目を一気に紹介します!

  • Width of Feed :フィードの幅、基本的に100%でOK
  • Height of Feed :フィードの高さ、幅が100%指定であれば、空白でOK
  • Background:フィードの背景色、白っぽい色がオススメ


  • Number of Photos:表示する写真の数、9か12がオススメ!
  • Columns:何列表示にするか、3列がオススメ!
  • Padding:写真同士の余白、2~5pxがオススメ
  • Disable:チェックを外すとスマホレイアウトに切り替わる

  • Sort photos :Newest(新しい順)かRandom(ランダム)を選択
  • Resolution:そのままでOK!

  • Show Feed Header:ヘッダーの有無(個人的には無しがオススメ)
  • Header Size:ヘッダーサイズ(大中小で選択)
  • Show Bio Text:プロフィール文の表示
  • Text Color:文字の色を変更できる

  • Show the ‘Load More’ button:もっと見るボタンの有無(チェック推奨)
  • Background:ボタンの背景色
  • text color:テキストの色
  • Button Text :表示させる文字を書く

  • Show the Follow button:フォローボタンの有無(チェック推奨)
  • Background:ボタンの背景色
  • text color:テキストの色
  • Button Text :表示させる文字を書く

「変更を保存」をお忘れなく!!

4. ショートコードをコピペで埋め込み

最後に、ショートコードをコピーして表示させたい場所に貼り付ければ、完成です!

  1. Display Your Feed をクリック
  2. 下にある[ instagram-feed]をコピー

サイドバーに埋め込む場合は、「外観」→「ウィジット」から設定できます!

WordPressのサイトにInstagramを埋め込む方法 まとめ

ネコ君
ネコ君

やった〜!サイドバーにインスタのタイムラインが表示されたよ!

いかがでしたでしょうか!

プラグインを一度設定すれば、あとはインスタを更新するたびに、埋め込んだフィードも自動更新されるのでとっても便利です!

最後までご覧いただきありがとうございました!

WordPressの学習にオススメの本

WordPressの基礎知識がある程度ある方向けの参考書で、HTMLファイルをWordPressのテーマ化にするまでの過程が詳しく書かれているので、実務にも使えるスキルが身につきます。

また、お客様のニーズで多い、カスタムフィールドの導入方法や、プラグインの開発方法や、管理画面の編集など実務でよく使う技術がよく学べます!

これからWordPressで高単価な案件を取りたい方は必ず読んでおきたい1冊です!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

YouTubeTwitterでプログラミングの学習方法や、フリーランスのライフスタイルについて発信しているのでチェックしてみてください!

スポンサーリンク
スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生クリエイター|ライター|エンジニア|YouTuber|Webディレクター|「Z大学」編集長

【PC音痴の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産Webマーケ→インドIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア→フリーランス独立→ITメガベンチャー】

▷▷ポートフォリオ・実績
▷▷インタビュー記事
▷▷Z大学

HikoProをフォローする
WordPress
HikoPro Blog

コメント

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