2017/10/08

【1番分かりやすい】InstagramFeed-インスタグラムをWordPressブログの記事内やウィジェットに表示するプラグインの使い方

 
アイキャッチ

スポンサーリンク


 
この記事を書いている人 - WRITER -
『カナエ菓子店』というお菓子屋をしています。 お菓子作ったり、ブログを書いたり、絵を描いたりしています。 食べる事とお酒と家族が大好き。
詳しいプロフィールはこちら

 

こんにちは、かなえです。

かなえ

 

PCの超苦手な私ですが、初心者にもできる範囲で、最近ブログをちまちまカスタマイズしています。

で、各SNSのプロフィールページをブログに貼り付けたいと思ったわけです。

私が貼り付けたいと思ったSNSはこの3つ↓

  1. Facebook
  2. Twitter
  3. Instagram

 

Facebook、Twitterは結構簡単に出来ました。

が、Instagramが出来ない!泣

 

Instagramは、1つずつの投稿では簡単に出来るんですが

(やり方はこちらの記事が分かりやすいです→サイズ変更も簡単にできる!Instagramの投稿をサイトに埋め込む方法

#ピクニカ共和国 #ヤギ舎 #相葉君が作ったらしい

Kanae Kaiさん(@kanae_kai)がシェアした投稿 –

↑こーゆーやつ

 

そうじゃなくて、私は自分のInstagramのプロフィールページを載せたいのです。

で、

検索…

検索…

検索…

試行錯誤しまくって、何とか自分のやりたかったように出来ました!!!

それがこんな感じです!

↓↓↓

めっちゃ普通ですけど、結構頑張ったんですよ…

かなえ

これは、『Instagram feed』というプラグインを使用しています。

基本的な使い方は本当に簡単なのですが、ブログ初心者の私は超試行錯誤しました…。

私と同じ壁にぶち当たってる人に向けて、まとめておこうと思います。

この記事はこんな人にオススメ

  • Instagramのプロフィールページを自分のブログに載せたい
  • プラグイン『Instagram feed』の使い方を知りたい
  • 色々検索しても、書いてることが難しくて分からない
  • 色々やりたくて検索するけど、HTML?CSS?…うるさいだまれと思ってしまう人

 

私は超試行錯誤しましたが、分かってしまうと作業は簡単なので、大丈夫ですよ~!

ブログ初心者のブログ初心者によるブログ初心者のための説明記事だと思って読んでください!

 

Facebook、Twitter、Instagramのプロフィールページの貼り付け方法まとめはこちら↓

目次

プラグイン『Instagram feed』のいい所

 

  1. Instagramの写真や動画をWordPressの記事やサイドバーなどに表示できる
  2. プラグイン名が表示されたりしない
  3. Instagramのプロフィールページのままのデザインなので、Instagramのページだとすぐに分かる
  4. クリックすると、直接自分のInstagramページに飛ぶ
  5. ショートコードを利用すれば、複数アカウントや自分以外のユーザーの写真や動画も表示できる
  6. デザインや表示方法を、WordPress管理画面やショートコードでカスタマイズできる
  7. 自動レスポンシブに対応している。(レスポンシブ=ページの幅に合わせて、幅が自動的に広がる。)
  8. 無料で利用できる。(有料版もあり。有料版はハッシュタグ機能を利用できる。)

 

スポンサーリンク


STEP1)プラグイン『Instagram feed』【基本設定】

 

Instagramのプロフィールページは、『コード』という英字の羅列みたいなのを取得して、それをブログに貼り付けると、表示されます。

色々方法があるようですが、私は、見た目もよく初心者でも簡単に出来るということで「Instagram feed」というプラグインを使った方法にすることにしました。

 

『Instagram feed』をインストール&有効化

 

1.管理画面の『プラグイン』の『新規追加』
2.検索フォームに「Instagram feed」と入力
3.「Instagram feed」(『Instagramフィード』と表示されている場合も)が出てきたら『今すぐインストール』
4.『有効化』を押す

これでインストール&有効化が完了です!

 

※「Instagram feed」で検索すると、同じような名前のプラグインが沢山出てきます。

私が使用しているのはこれです。作成者が『Smash Balloon』です。(2017年9月現在の画像)↓

Instagramフィード

 

基本設定

 

1)有効化すると、管理画面の左メニューに『Instagram Feed』と出てきます。そこから設定をしていきます

管理画面

 

2)『Log in and get my Access Token and User ID』ボタンをクリック

管理画面

 

2)Instagramへのログイン画面が出てくるのでログイン

ログイン画面

 

※すでに自分のInstagramにログインしている状態だと、ログイン画面ではなく、直接 3)の画面が出てきます。↓

 

3)『Authorize』(承認する)をクリック

設定画面

 

4)「Access Token」と「User ID」をコピーして貼り付け。必要ならチェックボックスにチェックを入れて『変更を保存』

(※私はチェック入れてません)

管理画面

 

これであなたのInstagramとブログが接続されました。これでもう、ブログにInstagramのプロフィールページをのせることが出来ます。

カスタマイズの必要のない方はそのまま  STEP3)記事に張り付けるへ!

STEP2)プラグイン『Instagram feed』【基本カスタマイズ】

 

基本的なカスタマイズをしていきましょう。

上の『customize』(カスタマイズ)のタブを選択します。

管理画面

 

上から順番に設定していきます。

 

General(一般)

Width of Feed(幅)

100%にしておくと、レスポンシブ(ページの幅に合わせて、幅が自動的に広がる)が機能するので、よく分からない場合は「100%」で大丈夫です。

 

というか、私は100%をオススメします!理由はコチラ↓

Height of Feed(高さ)

%かpx(ピクセル)を選べます。特に指定したい高さがない場合は、空欄で大丈夫です。

Background Color(背景色)

背景色が選べます。

 

【見本】

  • width(幅):50%
  • heigh(高さ):300px
  • 背景色:黄色

Layout

Number of Photos(写真の表示数)

写真の総表示数です。

Number of Columns(写真の列数)

写真を何列で表示するか選択できます。

Padding around Images(余白の幅)

余白の幅を変更できます。

Disable mobile layout(スマホなどのモバイルで、設定したままの状態で表示するか)

ココにチェックを入れていないと、スマホなどで表示されるときレイアウトが自動的に変更されて、変になります。必ずチェックを入れましょう。

 

【見本】

  • Number of Photos(写真の表示数):
  • Number of Columns(写真の列数):4
  • Padding around Images(余白の幅):0

 

Photos(表示方法)

Sort Photos By(写真の表示方法)

Newest to oldest(新着順)かRandom(ランダム)を選べます。

Image Resolution(解像度)

解像度を選択できます。Auto-detect (recommended)(プラグインがフィードのサイズに基づいて画像の解像度を自動的に設定してくれる)のままで大丈夫です。

 

Photo Hover Style、Carousel

有料版限定のカスタマイズです。そのままで大丈夫です。

 

Header(ヘッダー)

Show the Header(ヘッダーを表示する)

ヘッダーを表示するかどうかを選択します。

This only applies for User IDs with bios(プロフィール紹介文を表示する)

アカウント名の下にプロフィール紹介文を表示するかどうかを選択します。

Header Text Color(ヘッダーの文字の色)

ヘッダーの文字の色を変更できます。

 

【見本】

  • Show the Header(ヘッダーを表示する):表示しない
  • This only applies for User IDs with bios(プロフィール紹介文を表示する):表示しない
  • Show the Header(ヘッダーを表示する):表示する
  • This only applies for User IDs with bios(プロフィール紹介文を表示する):表示する
  • Header Text Color(ヘッダーの文字の色):

Caption、Likes & Comments、Lightbox Comments

有料版限定のカスタマイズです。そのままで大丈夫です。

 

‘Load More’ Button(’Load More’ ボタン)

Show the ‘Load More’ button( ‘Load More’ ボタンを表示する)

‘Load More’ ボタンを表示するかどうかを選択します。

Button Background Color(ボタンの背景色)

ボタンの背景色を変更できます。

Button Text Color(ボタンの文字色)

ボタンの文字色を変更できます。

Button Text(ボタンの文字)

ボタンの表記を変更できます。

 

【見本】

  • Show the ‘Load More’ button( ‘Load More’ ボタンを表示する):表示する
  • Button Background Color(ボタンの背景色):
  • Button Text Color(ボタンの文字色):黄色
  • Button Text(ボタンの文字):もっと見てみる!

 

‘Follow’ Button(’Follow’ボタン)

Show the Follow button(Followボタンを表示する)

Followボタンを表示するかどうかを選択できます。

Button Background Color(ボタンの背景色)

ボタンの背景色が選択できます。

Button Text Color(ボタンの文字色)

ボタンの文字色が選択できます。

Button Text(ボタンの文字)

ボタンの表記を変更できます。

 

【見本】

  • Show the Follow button(Followボタンを表示する):表示する
  • Button Background Color(ボタンの背景色):黄色
  • Button Text Color(ボタンの文字色):
  • Button Text(ボタンの文字):フォローしてね!

 

Post Filtering、Moderation

有料版限定のカスタマイズです。そのままで大丈夫です。

 

Misc(その他)

上級者向けのカスタマイズです。私もわかりません!そのままで大丈夫です。

 

カスタマイズが終了したら『変更を保存』

 

カスタマイズが終わったら『変更を保存』を押すことをお忘れなく

管理画面

 

以上で基本のカスタマイズは終わりです!お疲れさまでした!

 

STEP3)記事に貼り付ける

 

記事に貼り付けてみましょう。

 

コードをコピーする

 

少し下に行ったところにある[instagram-feed]という文字(これがコードです)をコピーします。

管理画面

 

記事に張り付ける

 

記事の本文中に張り付けます。

管理画面

↓プレビューで見てみると…

無事、表示する事が出来ました!

表示見本

 

自分の複数アカウント、他の人のアカウントのプロフィールページを表示させる方法はコチラ↓

 

『Instagram Feed』の使い方まとめ。問題・疑問の解決方法はコチラ↓

 

まとめ

 

『Instagram Feed』の基本設定についてまとめてみましたが、いかがでしたか?

ぜひ、やってみてください!

 

 

最後まで読んでいただいてありがとうございました。

ではまた!

 

 

 

ド初心者の私がイチからブログの勉強を始めて、運営が出来るようになるまでBlog Marketing School【BMS】(ブログマーケティングスクール)で勉強しました。

 

このブログで使用しているテーマ(WordPressテーマ『ELEPHANT~エレファント~』)はコチラ↓

 

この記事を書いている人 - WRITER -
『カナエ菓子店』というお菓子屋をしています。 お菓子作ったり、ブログを書いたり、絵を描いたりしています。 食べる事とお酒と家族が大好き。
詳しいプロフィールはこちら
 

Copyright© カナエ菓子店の人のブログ , 2017 All Rights Reserved.