こんにちは。ゆかです（＾＾）
わたしは、ネットビジネスをしながら、よくWordpressのサイト講習をしたり、サイト作成の依頼を受けてサイト作成をしたりしています。
※2019年9月20日現在追記
Instagramの埋め込みがインスタウィジェットだと上手くできなくなっているようです。
ワードプレスのInstagram関連のプラグインも非公開になっているものが多くなっています。
インスタウィジェットに関しても現在は不具合で使えないみたいなのでスナップウィジェットで埋め込みをされる方法をおススメします。
自分のサイトを作成するときにInstagramをトップに埋め込みたいなぁなんてこと思いませんか？
わたしはInstagramは鍵アカウントなんで、埋め込みは必要ありませんが、よくサイト作成依頼があるとそういった要望を聞くことがあります。
そこで備忘録とともに、埋め込みしたい方の為に図解入りでご説明していきたいと思います(∩´∀｀)∩
インスタ埋め込みには何パターンか方法があります。
ですがここでは InstaWidget（インスタウィジェット）を使用します。
目次は読みたいところをタップして飛べるよ♪
InstaWidget（インスタウィジェット）の使い方
１．下記URLをクリックしてInstaWidgetのサイトを開きます。
https://instawidget.net/（今、リンクも飛べなくなってしまっていました）
２．下記サイトに飛びますので、『無料インスタグラムブログパーツ作成』をクリックします。
３．下図のページに切り替わりますので、必要な項目のみを入力していきます。
右のプレビューは、始めから表示されています。
プレビューのような感じで良ければユーザー名に自分のインスタ名を入力し、下の【プレビュー】をクリックしてみてください。
すると自分のインスタがプレビューに表示されます。
あとは、項目の表示・非表示を選択していき、プレビューで確認して自分の好みにカスタマイズしてください。
４．調整が終わったら、【埋め込みコードを取得】します。
下図のコードをすべてコピーしてください。これでInstaWidgetは一旦終了します。
WordPressのトップページに埋め込む方法
先ほど取得した埋め込みコードをトップページに埋め込みます。
まずトップページのどこに埋め込むのかを決めます。わたしは下に埋め込みたいと思います。
１．Wordpressのダッシュボードを開きます。
左サイドバーの【外観】をクリックして【ウィジェット】もクリックします。
２．ウィジェットの画面に切り替わります。トップページ下部に埋め込みコードを設置します。
※下図はテーマによって違います。他には、トップページ下部ウィジェットなどになっている場合もあります。
３．左側の利用できるウィジェット一覧から【テキスト】⇒【トップページ下部】⇒【ウィジェットを追加】の順番でクリックします。
４．トップページ下部のところに【テキスト】が追加されました。
５．テキストの【タイトル】を入力して、下の本文を【テキストモード】に変更します。
ここに先ほどInstaWidgetで取得したコードを貼り付けをして【保存】をクリックします。
これでトップページの下部にInstagramが表示されるようになりました。
こちらは、【フォローボタン】と【外枠】と【写真アルバム】の設定のみになります。
InstaWidget（インスタウィジェット）をレスポンシブする方法
「レスポンシブ」とは、PC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し、見やすく最適な表示にすることを指します。
InstaWidget（インスタウィジェット）は、パソコンでは上記の作成方法でキレイに表示されますが、スマホだと上手く表示されないんです。
そのときは、埋め込みのHTMLコードにひと手間加えます。
生成されたコードの「width=〇〇px」の部分を「width=100%」に変更するだけで、簡単にレスポンシブに変えることが出来ます！！
もちろんPCでも100％表示できます。
最後に
凄く簡単にInstagramをトップ埋め込みすることが出来るInstaWidgetを使って、Instagramをトップに埋め込みしてみてくださいね(∩´∀｀)∩
インスタ集客の効果とは？！という動画もオススメです(*^^*)♪
ブログアフィリエイトの基礎知識を分かりやすく丁寧に丸っと公開中！！
メルマガに登録すると、シークレットサイト「Escape from Zero」にご招待します。このシークレットサイトでは、ブログアフィリエイトの基礎を順序立てて解説しております。
メルマガの登録は無料！配信解除はいつでもOK！ 登録はこちら↓
関連記事：
コメントを残す