WordPress苦手主婦のためのWordPress専門コミュニティ「MasterPress®︎」詳細はこちら

Instagramをサイトに埋め込みする方法【InstaWidget(インスタウィジェット)】

こんにちは。ゆかです(^^)

わたしは、ネットビジネスをしながら、よくWordpressのサイト講習をしたり、サイト作成の依頼を受けてサイト作成をしたりしています。

※2019年9月20日現在追記

Instagramの埋め込みがインスタウィジェットだと上手くできなくなっているようです。

ワードプレスのInstagram関連のプラグインも非公開になっているものが多くなっています。

インスタウィジェットに関しても現在は不具合で使えないみたいなのでスナップウィジェットで埋め込みをされる方法をおススメします。

 

自分のサイトを作成するときにInstagramをトップに埋め込みたいなぁなんてこと思いませんか?

わたしはInstagramは鍵アカウントなんで、埋め込みは必要ありませんが、よくサイト作成依頼があるとそういった要望を聞くことがあります。

 

そこで備忘録とともに、埋め込みしたい方の為に図解入りでご説明していきたいと思います(∩´∀`)∩

 

インスタ埋め込みには何パターンか方法があります。

ですがここでは InstaWidget(インスタウィジェット)を使用します。

InstaWidget(インスタウィジェット)の使い方

1.下記URLをクリックしてInstaWidgetのサイトを開きます。

https://instawidget.net/(今、リンクも飛べなくなってしまっていました)

 

2.下記サイトに飛びますので、『無料インスタグラムブログパーツ作成』をクリックします。

 

3.下図のページに切り替わりますので、必要な項目のみを入力していきます。

右のプレビューは、始めから表示されています。

プレビューのような感じで良ければユーザー名に自分のインスタ名を入力し、下のレビュー】をクリックしてみてください。

すると自分のインスタがプレビューに表示されます。

あとは、項目の表示・非表示を選択していき、プレビューで確認して自分の好みにカスタマイズしてください。

 

4.調整が終わったら、【埋め込みコードを取得】します。

下図のコードをすべてコピーしてください。これでInstaWidgetは一旦終了します。

WordPressのトップページに埋め込む方法

 

先ほど取得した埋め込みコードをトップページに埋め込みます。

まずトップページのどこに埋め込むのかを決めます。わたしは下に埋め込みたいと思います。

 

1.Wordpressのダッシュボードを開きます。

左サイドバーの【外観】をクリックして【ウィジェット】もクリックします。

 

2.ウィジェットの画面に切り替わります。トップページ下部に埋め込みコードを設置します。

※下図はテーマによって違います。他には、トップページ下部ウィジェットなどになっている場合もあります。

 

3.左側の利用できるウィジェット一覧から【テキスト】⇒【トップページ下部】⇒【ウィジェットを追加】の順番でクリックします。

 

4.トップページ下部のところに【テキスト】が追加されました。

 

5.テキストの【タイトル】を入力して、下の本文を【テキストモード】に変更します。

ここに先ほどInstaWidgetで取得したコードを貼り付けをして【保存】をクリックします。

 

これでトップページの下部にInstagramが表示されるようになりました。

こちらは、【フォローボタン】と【外枠】と【写真アルバム】の設定のみになります。

InstaWidget(インスタウィジェット)をレスポンシブする方法

「レスポンシブ」とは、PC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し、見やすく最適な表示にすることを指します。

 

InstaWidget(インスタウィジェット)は、パソコンでは上記の作成方法でキレイに表示されますが、スマホだと上手く表示されないんです。

そのときは、埋め込みのHTMLコードにひと手間加えます。

 

生成されたコードの「width=〇〇px」の部分を「width=100%」に変更するだけで、簡単にレスポンシブに変えることが出来ます!!

もちろんPCでも100%表示できます。

 

最後に

凄く簡単にInstagramをトップ埋め込みすることが出来るInstaWidgetを使って、Instagramをトップに埋め込みしてみてくださいね(∩´∀`)∩

 

インスタ集客の効果とは?!という動画もオススメです(*^^*)♪

 


WordPressの基本から大事なポイントなど、分かりやすく丁寧に配信中!

メルマガでは、これからWordPressブログを始めたいと思っているパソコン苦手な主婦のために、ワードプレスブログの作り方をお届けしています。
メルマガの登録は無料!配信解除はいつでもOK! 登録はこちら↓


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ABOUT US
ゆかアフィリエイター兼WordPress専門家
ご訪問ありがとうございます! ゆかブログの管理人でアフィリエイター兼WordPress専門家のゆかです。福岡で3人の子供を育てながら、お家でのんびりとブログを書いて生活しています。
ブログを書く以外のお仕事は、パソコンが苦手な女性起業家さんのワードプレスブログ運営をサポートしたり、代行でワードプレスの立ち上げをしています。 ●WordPressコミュニティ『MasterPress』運営
●福岡副業カレッジブログ講師
SEO検定3級
●チャンネル登録1万人超え!WordPressブログ構築専門YouTubeチャンネル「ゆかチャンネル

ゆかブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。
詳しいプロフィールはこちら>>