SWELLを使っているのに、インスタの投稿をうまくブログに出せなくてモヤモヤしていませんか。
私も最初は「コードってなんだか難しそう…」「どこを触ればいいの？」という状態でしたが、やることさえ分かれば作業自体はそこまで難しくありません。
一言でまとめると、「インスタの埋め込みコード」か「対応プラグイン」のどちらかを正しく使えば、SWELL初心者でもインスタ連携はちゃんと形になります。
ここからは、私が実際に試して「これなら続けられる」と感じたやり方を中心に、順番に解説していきます。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
SWELLでインスタ埋め込みをすると何ができる？
まずは、SWELLでインスタ埋め込みをすると、どんなことができるのかを整理しておきます。「うちのブログだとどのパターンが良さそうか」を、ざっくりイメージしながら読んでみてください。
SWELLでインスタを埋め込む3つのパターン
SWELLでインスタを表示する方法は、大きく分けて次の3つです。
| 方法 | 説明 | 難易度 | 向いている人 |
|---|---|---|---|
| 埋め込みコード＋カスタムHTML | インスタの「埋め込み」コードをコピーして、SWELLのカスタムHTMLブロックに貼る方法 | ふつう | まずは記事の中に1つだけ投稿を見せてみたい人 |
| 投稿URLをそのまま貼る | インスタ投稿のURLをエディタに貼ると、自動的に埋め込み表示される方法 | かんたん | 細かいカスタマイズよりも、まずは試してみたい人 |
| プラグインでフィード表示 | Smash Balloon Social Photo Feed や Combine Social Photos などのプラグインで、複数投稿を一覧表示する方法 | ややむずかしい | トップページやサイドバーにインスタのタイムラインを出したい人 |
どれも「インスタの投稿をブログに表示する」というゴールは同じですが、やりたいことによって向き不向きがあります。
この記事では、いちばん基本で使いやすい「埋め込みコード＋カスタムHTML」を軸に、そのあとでプラグインを使ったフィード表示も紹介していきます。
どのインスタ埋め込み方法を選べばいい？
「結局どれを選べばいいの？」という人向けに、ざっくり選び方を書いておきます。
- 記事の途中に、ちょこっと写真を入れたいだけ → 冒頭で紹介する「埋め込みコード＋カスタムHTML」がおすすめ
- インスタのタイムラインをブログにも出したい → フィード用プラグインを使うと楽
- とりあえず雰囲気だけ掴みたい → 投稿URLを貼って自動埋め込みを試すのもアリ
個人的には、最初から全部やろうとすると混乱しやすいので、「まずは1投稿だけ埋め込んでみる → 慣れてきたらフィード表示を検討」という順番が気持ち的にもラクかなと思います。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
SWELLでインスタ埋め込みする前に知っておきたいこと
ここから先は具体的な作業に入っていきますが、その前にちょっとだけ準備編です。細かいところを知らずに進めると、「表示されない」「なぜか崩れる」といったプチトラブルが起きがちなので、先に押さえておきましょう。
インスタ埋め込みのメリットとデメリット
インスタをSWELLに埋め込むと、良いところもあれば、少し気をつけたいポイントもあります。
| メリット | 内容 |
|---|---|
| 写真・動画で雰囲気を伝えやすい | 文章だけでは伝わりにくい世界観やカラーを、インスタのビジュアルで補える |
| 更新がラクになる | インスタ側を更新するだけで、フィード表示にしていればサイトにも自動で反映される |
| フォロワーが増えやすくなる | ブログの読者をインスタに誘導できるので、フォローにつながりやすい |
| デメリット | 内容 |
|---|---|
| ページが重くなることがある | 画像やスクリプトを読み込むので、表示速度が落ちる場合がある |
| 投稿の削除・非公開に影響される | 元の投稿を消したり非公開にすると、ブログ側でも表示が崩れることがある |
| 著作権・肖像権に配慮が必要 | 他人が写っている写真や、ブランドロゴなどの扱いには注意したい |
怖がる必要はありませんが、「なんとなく便利そうだから全部出す！」というよりは、「このページにインスタは本当に必要かな？」と考えながら使うと失敗しづらいです。
インスタ埋め込み前チェックリスト
インスタ埋め込みに挑戦する前に、サクッと確認しておきたいポイントをまとめました。
| チェック項目 | 内容 |
|---|---|
| アカウントの公開設定 | インスタのアカウントや投稿が「公開」になっているかどうか |
| ブラウザでログインできるか | スマホアプリだけでなく、ブラウザからもインスタにログインできるか |
| WordPressの権限 | プラグインの追加や、テーマの設定を触れる権限があるか |
| SWELL・WordPressのバージョン | あまりに古いと、画面や設定が解説と違う場合があるので、できるだけ更新しておく |
| 広告ブロッカーの有無 | ブラウザの広告ブロック機能がオンだと、インスタの埋め込みが見えないことがある |
ここまで問題なければ、いよいよSWELLでインスタを埋め込む作業に入っていきましょう。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
記事内でSWELLでインスタを埋め込む具体的な手順
この章では、いちばん基本となる「記事の中にインスタ投稿を1つ埋め込む」方法を、順番に見ていきます。インスタ側での作業と、WordPress側（SWELL側）での作業に分けて考えると分かりやすいです。
Step1 インスタ側で埋め込みコードを取得する
まずはインスタから「埋め込みコード」を持ってくるところからです。
- インスタで、埋め込みたい投稿を開く
- 投稿右上の「…」メニューをタップ（またはクリック）
- 表示されたメニューから「埋め込み」または似た表記を選ぶ
- 「埋め込みコードをコピー」ボタンを押して、コードをコピーする
スマホアプリだと「埋め込み」が出てこない場合があるので、そのときはブラウザ（SafariやChromeなど）でインスタを開くとメニューが出やすいです。
もしどうしても埋め込みコードが見つからないときは、インスタの仕様変更で表示場所が変わっている可能性もあるので、「Instagram 埋め込み コード 取得」といった感じで最新の画面を確認してみてください。
Step2 SWELLの記事編集画面でカスタムHTMLブロックを追加する
埋め込みコードがコピーできたら、次はWordPressの投稿編集画面に移動します。
- インスタ投稿を表示したい位置にカーソルを置く
- 「＋」ボタンからブロック追加メニューを開く
- 検索窓に「html」と入力し、「カスタムHTML」ブロックを選ぶ
- 先ほどコピーした埋め込みコードを、そのまま貼り付ける
- プレビューを開いて、正しく表示されているかチェックする
SWELLはブロックエディタに最適化されているテーマなので、カスタムHTMLブロックの扱いもスムーズです。
うまく貼れていれば、この時点でインスタの投稿が記事内に表示されているはずです。
Step3 プレビューとデザイン調整のコツ
表示自体はこれで完了ですが、「なんだか浮いて見える」「もう少し余白がほしい」など、見た目の調整をしたくなることも多いです。
| やりたいこと | 操作のヒント |
|---|---|
| インスタを少し小さめに見せたい | カスタムHTMLブロックをグループブロックで囲み、グループ側で幅や余白を調整する |
| 中央寄せにしたい | カスタムHTMLブロックを選択し、配置設定から「中央揃え」を選ぶ |
| キャプションを非表示にしたい | 埋め込みコードを取得するときに、「キャプションを追加」のチェックを外しておく |
| 上下にゆとりを出したい | SWELLの余白ブロックやスペーサーブロックを前後に挟んで、空間を作る |
このあたりを少し工夫するだけでも、「とりあえず貼りました」から「デザインに馴染んだインスタ埋め込み」に一歩近づきます。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
プラグインでインスタフィードをSWELLに埋め込む方法
次は、インスタの投稿を1つだけではなく、「フィード」として複数表示する方法です。トップページやサイドバーにインスタの一覧を出したい人は、ここからの内容が役に立ちます。
代表的なインスタフィード用プラグイン比較
インスタフィードを表示できるプラグインは色々ありますが、SWELLユーザーからよく名前が挙がるのはこの2つです。
| プラグイン名 | 特徴 | メリット | 注意点 |
|---|---|---|---|
| Smash Balloon Social Photo Feed | 世界的に利用者が多いインスタフィード用プラグイン | クリック操作中心で設定しやすく、レイアウトのバリエーションも豊富 | 設定画面が基本的に英語なので、最初は少し戸惑うかもしれない |
| Combine Social Photos | SWELL開発者さんが作っている、ブロックエディタ専用のプラグイン | インスタ埋め込み専用のブロックが追加され、見たまま編集しやすい | インスタとの接続に少し慣れが必要な場合がある |
どちらもインスタアカウントと一度連携してしまえば、ショートコードや専用ブロックを配置するだけでフィードが表示できるので、運用自体はそこまで難しくありません。
Smash Balloonでフィードを埋め込む大まかな流れ
細かい画面はバージョンによって変わることがありますが、流れは大体こんな感じです。
- 「プラグイン → 新規追加」から「Smash Balloon」または「Social Photo Feed」で検索し、インストールして有効化
- 管理画面に追加された「Instagram Feed」メニューを開く
- 案内にしたがって、自分のインスタアカウントを連携する
- 表示したいレイアウトや投稿件数などを設定してフィードを作成
- 発行されたショートコードをコピーし、SWELLの記事・固定ページ・ウィジェットなどに貼り付ける
ショートコードを貼る場所は、カスタムHTMLブロックでもOKですし、通常のテキストウィジェットなどでも大丈夫です。
レイアウトはプラグイン側で調整できるので、「何列に並べるか」「余白はどれくらいか」などは好みに合わせて変えてみてください。
Combine Social Photosでブロックから埋め込む流れ
Combine Social Photos は、ブロックエディタ向けに作られたインスタ埋め込みプラグインです。
- プラグインをインストールして有効化する
- 管理画面のメニューからインスタアカウントと連携する
- 案内に沿って認証を済ませる（Graph APIを使った接続方式など）
- 投稿や固定ページの編集画面で「ブロックを追加」→「Combine Social Photos」を選ぶ
- ブロックの設定パネルで、「自分の投稿」「特定のプロアカウント」「ハッシュタグ」など表示内容を選ぶ
【稼げるキーワード教えます】
▼ ▼ ▼
ブロックエディタに慣れているSWELLユーザーであれば、画面を見ながら調整していけるので、実際の見え方を確認しながら配置したい人に向いています。
トップページやサイドバーにインスタ埋め込みするレイアウト例
インスタを埋め込む場所は「記事の中だけ」ではありません。この章では、SWELLサイトでよく使われるインスタの置き場所と、レイアウト例を紹介します。
トップページでのインスタ表示パターン
トップページでインスタを見せるときの、よくあるパターンをまとめました。
| レイアウトパターン | 使うブロック | ポイント |
|---|---|---|
| ヒーローエリアの少し下に横並び | フルワイドブロック＋ショートコード（またはインスタ用ブロック） | サイトに来てすぐの位置で写真を見せられるので、ブランドや世界観を伝えやすい |
| 新着記事一覧の下に3列で表示 | カラムブロック＋カスタムHTML／ショートコード | ブログ更新とインスタ更新をまとめてアピールできる |
| フッター手前に2列のギャラリー | グループブロック＋インスタフィード | ページの最後に「おまけ」的なフォトギャラリーとして見せる形 |
どこに置くか迷ったら、「ブログで一番見てほしいものは何か」を基準に決めると良いです。
記事を読んでほしいならインスタは控えめに、写真や作品を見せたいならインスタを目立つ位置に、といった感じで調整してみてください。
サイドバー・フッターにインスタを出すときの注意点
サイドバーやフッターにインスタフィードを出すのも定番の形です。
ただ、その場合は次のような点に気をつけておくと失敗しにくくなります。
- スマホ表示ではサイドバーがページ下部に回ることが多いので、「絶対に読んでほしい情報」は本文側に置く
- サイドバーにすでに広告やプロフィール、人気記事などを入れている場合は、インスタを大きくしすぎると縦長になりすぎる
- フッターに配置する場合は、表示件数を少なめにしてページ全体の重さを抑える
私のおすすめは、「記事中に1〜2投稿だけ埋め込む」「トップページのフッター手前にフィードを置く」の二段構えです。
これくらいだと、表示速度と見た目のバランスが取りやすく、運営していてもあまりストレスになりません。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
インスタ埋め込みがSWELLで表示されないときの対処法
ここからは、「やってみたけど表示されない」「前は出ていたのに急に消えた」といったトラブルに備えて、チェックの順番を整理しておきます。原因が1つとは限らないので、落ち着いて1つずつ確認していきましょう。
よくある症状と原因の早見表
ありがちな症状と、考えられる原因を表にまとめました。
| 症状 | 主な原因 | チェックポイント |
|---|---|---|
| 何も表示されない | 投稿が非公開・削除／URLやコードの貼り間違い | 元の投稿が表示できるか、URLや埋め込みコードに余計な文字が混ざっていないか |
| 読み込み中のまま止まる | プラグインの連携切れ／インスタ側のエラー | プラグインの設定画面で、アカウントの再認証が必要になっていないか |
| PCでは見えるのにスマホで崩れる | テーマやカスタムCSSとの相性／幅指定の問題 | スマホ表示で横スクロールが出ていないか、画像の幅がはみ出していないか |
| 前は表示されていたのに急に消えた | プラグインやインスタ側の仕様変更 | プラグインの更新や、インスタとの接続方式の変更案内が出ていないか |
特にフィード用プラグインを使っている場合は、定期的に認証期限が切れたり、接続方式が変わったりすることがあります。
まずはプラグインの設定画面を開き、「警告やエラーメッセージが出ていないか」を確認してみてください。
SWELLの高速化設定が原因の場合
SWELLは、サイトを速く表示させるための高速化機能がとても充実しています。
その中には、JavaScriptの読み込みを遅らせたり、まとめて最適化したりする機能もありますが、ここにインスタの埋め込み用スクリプトが巻き込まれてしまうと、うまく表示されないことがあります。
- SWELLの高速化設定を一時的にオフにして、インスタが表示されるか確認する
- 「スクリプトの遅延読み込み」や「結合」の除外リストに、インスタ関連のスクリプトURLを追加する
- 別途キャッシュプラグインを使っている場合は、その設定も合わせて見直す
高速化の設定を全部オフにしてインスタが表示されるようなら、「高速化のどの項目が悪さをしているのか」を1つずつ試しながら探していくと原因を特定しやすいです。
プラグイン側のエラーが原因の場合
インスタフィード用プラグインを使っている場合は、プラグイン側のエラーが原因になっていることも少なくありません。
- アクセストークンの期限切れで、再認証が必要になっていないか
- インスタアカウントの種類（個人／プロ）が、プラグインの要件を満たしているか
- 表示対象にしているアカウント名やハッシュタグが正しく入力されているか
Smash Balloon Social Photo Feed や Combine Social Photos など、多くのプラグインは管理画面にエラー内容を表示してくれます。
メッセージを読みながら、指示にそって再連携や設定の修正をしていけば、難しい作業をしなくても復旧できるケースがほとんどです。
★初心者さん必見★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
よくある質問｜SWELL インスタ埋め込みQ&A
最後に、SWELLでインスタ埋め込みをするときによく聞かれる質問を、Q&A形式でまとめました。
Q1. SWELLでインスタを埋め込むと、サイトが重くなりませんか？
A. 表示する投稿数や画像の数によっては、どうしても影響は出ます。
特に、インスタフィードとしてたくさんの投稿を一気に読み込むと、その分だけ画像やスクリプトが増えるので、ページが重くなりやすいです。
対策としては、次のような方法があります。
- フィードの表示件数を4〜6件程度に抑える
- サイドバーやフッターなど、「あったらうれしい」位置に置く
- 表示速度が特に重要なページでは、インスタ埋め込み自体を使わない
すべてのページでインスタを出す必要はないので、「ここはインスタより内容優先かな」と感じるページでは、思い切って外してしまうのもアリです。
Q2. インスタの投稿URLを貼るだけの方法と、埋め込みコードを使う方法はどちらがいいですか？
A. 私は、安定して長く使いたいなら「埋め込みコード＋カスタムHTML」をおすすめしています。
URLをそのまま貼る方法は手軽ですが、環境によっては思った通りに表示されないケースもあります。
一方、インスタが公式に用意している埋め込みコードは、それを使う前提で作られているので、比較的トラブルが少ない印象です。
SWELLでインスタ埋め込みを本格的に運用するつもりなら、最初から埋め込みコードに慣れておくと、あとで悩む時間が減ります。
Q3. インスタ埋め込みと著作権・利用規約の注意点はありますか？
A. 自分のインスタ投稿をSWELLに埋め込む分には、そこまで神経質にならなくても大丈夫なことが多いです。
ただし、他人の投稿をそのままインスタ埋め込みする場合は、肖像権や著作権の問題が出てきます。
- できるだけ自分のアカウントの投稿を使う
- どうしても他人の投稿を使いたい場合は、事前に許可をもらう
- 企業ロゴやキャラクターなど、商標や著作権が絡みそうなものは慎重に扱う
「これは大丈夫かな？」と少しでも引っかかるものは、避けておいたほうが安心です。
まとめ｜SWELLでインスタ埋め込みを使いこなそう
この記事の内容を簡単にまとめます
- SWELLでインスタを表示する方法は「埋め込みコード」「URL貼り付け」「プラグインでフィード」の3パターン
- 記事内で1投稿だけ見せるなら、インスタの埋め込みコードをカスタムHTMLブロックに貼る方法がシンプルでおすすめ
- トップページやサイドバーにインスタフィードを出したいときは、Smash Balloon Social Photo Feed や Combine Social Photos が便利
- 表示されないときは「インスタ側」「プラグイン側」「SWELLの高速化設定」を順番にチェックすると原因を見つけやすい
- 表示速度や著作権にも気を配りつつ、自分のサイトに合う場所だけインスタ埋め込みを使うのがコツ
今日の最初の一歩としては、まず1つ、お気に入りのインスタ投稿を選んで、埋め込みコードをカスタムHTMLブロックに貼るところまでやってみてください。
一度「ちゃんと表示できた」という感覚をつかめれば、その先のフィード表示やレイアウト調整もぐっと楽になります。
SWELLとインスタを組み合わせて、あなたの世界観がもっと伝わるブログに育てていきましょう。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
記事を読んだらコチラ
▼ ▼ ▼
