>>アフィリエイトで自動化の仕組を学びたい方はこちら

Instagramをサイトに埋め込む方法【SnapWidget(スナップウィジェット)】




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

前にInstagramの埋め込み方法のInstaWidget(インスタウィジェット)を使った方法をアップしました。

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

 

最近、わたしがInstagramを始めたので、この方法とは別でInstagramをワードプレスに埋め込む方法として、【SnapWidget(スナップウィジェット)】を使った方法を分かりやすく図解入りで解説します。

話題のInstagramで副業をする方法

 

SnapWidget(スナップウィジェット)の使い方

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

https://snapwidget.com/

2.下記サイトに飛びます。

 

SnapWidget(スナップウィジェット)は、会員登録制なので、会員登録をするときは『sign in』から登録が必要です。

 

もし、Facebookをお持ちであればFacebookからログインすることが出来ますので、『log in』をクリックします。

 

3.下記のような画面に切り替わりますので、サインインをして下さい。

※『sign in』から会員登録されたときは、メールアドレスとパスワードを入力して『log in』をクリックします。

※フェイスブックからの時は、『sign in with Facebook』をクリックしてください。

 

4.こちらの画面に切り替わりますので、『create a new widget』をクリックします。

 

5.下記のように色々なウィジェットが表示されますので、ここから自分の好みのものを選択していきます。

※FreeとPROがあるので、Freeのものを使用してください。

 

今回は、こちらの『Instagram Grid』を選択しました。

 

6.こちらの画面になりましたら、まずはInstagramの情報を呼び出しますので、『Username』をクリックします。

 

ポップアップで下記のような画像が表示されます。わたしはいくつかInstagramの情報が入っていますので、下記のような表示になっていますが、新たにInstagramの情報を追加するときは『+』をクリックしてください。

 

すると下記のようにインスタに接続する画面が表示されますので、インスタのアカウントが合っていたら『Authorize』をクリックします。

(※わたしはパソコンでインスタが繋がっているからこの画面になっているかもしれません。もしインスタのログインが必要であればログインしてください。)

 

7.下記のように自分のインスタグラムが表示されているのを確認できたら、設定していきます。

 

下へスクロールさせて必要項目を選択していきます。

わたしが設定した項目です。

・Layout・・・表示したいレイアウトの設定です。32は横が3つで縦が2つということになります。

・Hover Effect・・・エフェクトの設定です。画像にマウスを合わせた時に画像に対して動きを付けれたりします。不要のときは、【None】を選択します。

・Sharing Buttons・・・シェアボタンの設定です。必要か不要かを選択します。

・Responsive・・・レスポンシブの設定です。携帯とかスマホでも対応したサイズに変更させたいときは、【Yes】を選択して下さい。

 

これらの設定が完了しましたら【GET WIDGET】をクリックします。

 

8.HTMLのコードが表示されますので、このコードをコピーしてください。

 

これで【SnapWidget(スナップウィジェット)】でのコード取得はすべて完了です。

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

コードの取得が完了しましたら、続いてはワードプレスへの埋め込みになります。

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

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

左サイドバーの【外観】にマウスを合わせ【ウィジェット】もクリックします。

 

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

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

 

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

※わたしのテーマはSTINGERなので、【STINGERフリーボックス】を選択しています。通常はテキストで良いです。

 

4.トップページ下部のところに【STINGERフリーボックス】が追加されました。※通常は【テキスト】の追加で大丈夫です。

5.【STINGERフリーボックス】に、【タイトル】を入力して、下のテキストエリアに先ほどSnapWidgetで取得したコードを貼り付けをして【保存】をクリックします。

 

※【テキスト】でウィジェットを追加する時は、【タイトル】を入力して、下の本文を【テキストモード】に変更し、コードを貼り付けしてください。

 

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

こんな感じです↓ ↓ ↓

 

 

おまけ

【SnapWidget(スナップウィジェット)】ではスライドショーでの埋め込みとかも出来るので、いろいろと試されてみてくださいね!!

こんな感じでスライドショーが出来ます(*^^*)

 

最後に

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

カスタマイズでお困りの時は、お問合せよりゆかにご相談ください。 ⇒ ゆかに相談してみる

ではでは~|д゚)ノ

Instagramのためのツール『インスタキング』って?

【お気軽にお問い合わせください】

わたしは、初心者さんへワードプレスのブログ作成方法を教えたり代行作成を行っています。

シェアしてね♪


無料メルマガで詳しくアフィリエイトの情報発信中!


わたしが実践している【ブログメルマガアィリエイト】について、初心者さんにも分かりやすくをモットーに発信しているメルマガです。
たくさんの読者さんから『解りやす過ぎる』と大絶賛のレポートや、図解による操作マニュアルをプレゼントしています。

登録は無料!解除はいつでも自由! 興味のある方は下の画像をクリックくださいね。


コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください