ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

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

WordPress
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

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

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

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

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

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

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

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

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
WordPress
HikoPro Blog

コメント

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