スポンサーリンク




WordPress

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

更新日:

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

 

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

※2019年9月20日現在追記

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

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

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

 

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

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

 

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

 

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

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

 

 

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

 

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

http://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
-, ,

Copyright© 初心者のパート主婦が副業収入を得た方法! , 2019 All Rights Reserved Powered by STINGER.