WordPressでブログを運営しているんだけど、自分のInstagramのアカウントのタイムラインを、記事内やサイドバーに埋め込みをしたい！
インスタが更新させたら、埋め込んだタイムラインも自動更新されて、さらにレスポンシブ（スマホ）対応もしてほしい！
今回の記事では、WordPressでブログ運営をしている方向けに、Instagramの投稿、タイムラインを記事内やサイドバーに埋め込む方法を解説していきます！
記事内に投稿埋め込みの例
サイドバーにタイムラインを埋め込み
Instagramをブログ内に埋め込むことで、ブログ閲覧者がInstagramのアカウントを覗きに行ってフォーローしてくれる可能性もあるので、インスタの運用も頑張っている方はぜひ、この記事を参考にして実装してみましょう！
✔︎こんな方にオススメ
- WordPressにインスタの投稿を記事内に埋め込みたい方
- WordPressのサイドバーにタイムラインを埋め込みたい方
WordPressのサイトにInstagramを埋め込む方法
WordPressのブログサイトでInstagramを埋め込む方法は2種類あり、、、
- 個別投稿を記事内に埋め込む
- プラグインを使用し、タイムライン（投稿一覧）をサイドバーに埋め込み
この2つの種類があります。
カフェについて発信している人であれば、ブログ記事でカフェの写真を使う際はインスタの投稿を埋め込めば、そのままインスタへの流入が見込めるでしょう。
✔︎インスタの投稿をブログに埋め込む人の条件
ブログのテーマと、インスタのテーマが同じであり、Instagramのフォロワーを増やしたいと考えている方！
記事内にインスタの個別投稿を埋め込む方法
記事内にインスタの個別投稿を埋め込むとこのようになります。
この埋め込みのいい所は、Instagram公式の埋め込みタイプになっており、「プロフィールを見る」ボタンが設置されたり、いいねの数が自動で更新される点です。
一つデメリットを上げるとすると、普通に画像を埋め込むよりも、ページの読み込み速度が遅くなるという点です。
埋め込みの方法はとっても簡単です！
- PCでInstagramにログイン
- 埋め込みたい投稿を選択
- 右上の・・・をクリック
- 埋め込みをクリック
埋め込みをクリックすると、このような画面が表示されるので「キャプションを追加」（テキスト）を選択し、埋め込みコードをコピーします。
コピーしたコードをそのまま記事内に貼り付ければ、インスタの投稿埋め込みは完了です！
- 旧エディター：テキストタイプで埋め込み
- Gutenberg：カスタムHTMLで埋め込み
キャプション無し
キャプションあり
プラグインを使ってサイドバーにタイムラインを埋め込む
次にWordPressのブログで、サイドバーやフッターにInstagramのタイムラインを埋め込む方法をご紹介します！
僕はこのようにサイドバーに埋め込んで、インスタが更新されると、ここの埋め込みも自動的に更新されるようにしています！
方法はとっても簡単で、「Smash Balloon Social Photo Feed」プラグインを使えば簡単に実装できます！
1.Smash Balloon Social Photo Feed をインストール
まずは、プラグインの追加画面から、「Instagram Feed」と検索すると、一番初めに表示されるプラグインをインストールして有効化します。
インストール数も多く、更新頻度も高いので信頼性の高いプラグインです！
2. プラグインとInstagramを連携させる
- サイドバーの「Instagram Feed」をクリック
- 紺色のボタンをクリック
- Instagramの画面が開かれる
- 認証する
- プラグイン設定画面に戻ると、連携が完了
- 変更を保存ボタンをクリック
プラグインを有効化すると、サイドバーに「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. ショートコードをコピペで埋め込み
最後に、ショートコードをコピーして表示させたい場所に貼り付ければ、完成です！
- Display Your Feed をクリック
- 下にある[ instagram-feed]をコピー
サイドバーに埋め込む場合は、「外観」→「ウィジット」から設定できます！
WordPressのサイトにInstagramを埋め込む方法 まとめ
やった〜！サイドバーにインスタのタイムラインが表示されたよ！
いかがでしたでしょうか！
プラグインを一度設定すれば、あとはインスタを更新するたびに、埋め込んだフィードも自動更新されるのでとっても便利です！
最後までご覧いただきありがとうございました！
