OpenHeart-Art

ペットの声を聴くアニマルメッセンジャー&曼荼羅アート

Instagram feed 複数のアカウントをWordPressの記事やウィジェットに埋め込む

News

More

WordPressの記事やウィジェットにインスタグラムのプロフィールを埋め込む方法です。

やってみて手こずったので、自分用の備忘録(笑)

WordPressでInstagramを表示するプラグイン”Instagram Feed”

 

Instagramの1つずつの投稿を埋め込むのは、各投稿の「埋め込みコード」を取得すればOK♪

①プラウザでインスタグラムを開く。

②画像の右上の三点…をタップ。

③「埋め込み」をタップ。

④「埋め込みコードをコピー」をタップして、貼り付けたい記事等にペーストすればOK!

 

が、わたしはInstagramのプロフィール画面を埋め込みたかったので、

プラグインの「Instagram feed」をインストールしてみました。

 

WordPressのダッシュボードから、プラグイン→新規追加、「Instagram feed」を探してインストール&有効化。

 

ダッシュボードに「Instagram Feed」と表示されるので、ここから設定します(^^)/

Instagram Feedの初期設定

ダッシュボードの「Instagram Feed」をクリックして、

赤丸のところをクリックします。

この時に、同じプラウザ上で紐づけたいInstagramを開いていると

「Instagram Accounts」にInstagramのアカウントが、

「Show Photos From」にユーザーネーム(accesstokenコード)が表示されます。

開いていない場合は、Instagramへのログインを要求されます。

 

このページをスクロールして、↑の「変更を保存」をクリック、

さらにスクロールして、

↓赤丸内のショートコード instagram-feed(実際には【】付きで)と記事やウィジェットに張り付ければInstagramを埋め込めますが、次の基本設定に進みましょう~

 

Instagram Feedの基本設定

2.Customizeのタブから、カスタマイズできます。

・General
Width of feed(幅):100%ままでOK
Heght of feed(高さ)
BackgroundColor(背景)

・Layout
Number of Photos(画像の表示枚数)
Number of  Columns(表示列数)
Padding around Images(画像周囲の余白の幅)
Disable mobile layout(モバイルも同様の設定にするか):ここには✔を入れておきましょう。

「変更を保存」を忘れずに♪

・Photos(表示方法)
Sort Photos By(写真の表示方法):Newest to oldest(新着順)orRandom(ランダム)
Image Resolution(解像度)

・Photo Hover Style、Carousel(有料版カスタマイズ)

・Header(ヘッダー)
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’ ボタンを表示するか否か)
Button Background Color(ボタンの背景色)
Button Text Color(ボタンの文字色)
Button Text(ボタンの文字)

・‘Follow’ Button(’Follow’ボタン)
Show the Follow button(Followボタンを表示するか否か)
Button Background Color(ボタンの背景色)
Button Text Color(ボタンの文字色)
Button Text(ボタンの文字)

・Post Filtering、Moderation(有料版カスタマイズ)

・Misc(その他):CSSやJavaScriptの設定ができるようです。

それぞれ設定したら、「変更を保存」をクリックします。

複数のアカウントを埋め込む

さらに、複数のアカウントを埋め込む場合には、

ここを再度クリックして、別アカウントでログインします。

すると、「Instagram Accounts」と「Show Photos From」に別アカウントが追加されます。

 

次に、以下の赤丸のところをクリックすると、

各アカウントのショートコードが表示されます

「instagram-feed user=”各ユーザーネーム”」

それぞれを必要な時にコピペすれば、それぞれのInstagramプロフィールが表示されます。

ちなみに、複数アカウントがある時に「instagram-feed」と埋め込むと、全アカウントの画像が時系列で表示されるようです。

ただし、いずれのアカウントも「基本設定」で設定したものが表示されます。

アカウントごと 個別に設定するには

3.Display yourr Feedから、個別にカスタマイズすることができます。

例1)「instagram-feed num=8 cols=2 showfollow=false」:総表示数4、2列、フォローボタンなし。

例2)「instagram-feed user=”ユーザーネーム” num=4 cols=4 」:ユーザーネームごとの設定も可能です(^^)/