ワードプレスプラグイン

こんばんは。外出自粛なこともあって副業を考えている方が増えたのか、WordPressについてのお問い合わせを頂くようになりました。

本日はインスタグラムの投稿をリアルタイムでサイトに表示させることができるWordPressプラグイン「Smash Balloon Instagram Feed」の設定方法をご紹介します。

インスタグラムのフォロワーが増えたからブログを始めようと考える方も多いようです。最近はSEO対策で検索からの流入に加え、インスタグラム、フェイスブックなどSNSからの流入も重要になっており、サイトとSNSを相合に連携することが必要となっています。

Instagram Feedを使えば、サイトにインスタグラムの投稿をリアルタイムに表示し、投稿写真やプロフィールにリンクできます。

Smash Balloon Instagram Feedでできること

「Smash Balloon Instagram Feed」をインストールし有効化することで、このようなことができるようになります。

  • サイトにインスタグラムの投稿を表示、リンクできる
  • 投稿の表示形式を細かく設定できる
  • サイトの好きなところに配置できる

 

1、インストールと有効化

さっそくWordPressに「Smash Balloon Instagram Feed」をインストールしていきます。

ワードプレスプラグイン

WordPress管理画面のプラグインをクリックします。

 

ワードプレスプラグイン

右上の赤枠にて「Smash Balloon Instagram Feed」を検索すると左赤枠にプラグインが表示されます。インストールをクリックし有効化します。

 

ワードプレスプラグイン

有効化すると赤枠に「Instagram Feed」が表示されます。クリックしてください。

 

2、Smash Balloon Instagram Feedの設定

設定方法を解説していきます。このプラグインには、追加設定を利用できる有料プランの「Pro」が用意されていますが、今回は無料で利用できる範囲の設定をご紹介します。

 

ワードプレスプラグイン

Conntact an Instagram Accountボタンを押してください。インスタグラムのログイン画面が表示されます。

 

ワードプレスプラグイン

インスタグラムで登録したメールアドレスとパスワードを入力しログイン。

 

ワードプレスプラグイン

ログインをしようとすると「プラグインが投稿やプロフィールを読み込もうとしている」が表示されます。「Authrorize」を押してください。

 

ワードプレスプラグイン

連携が完了しました。次は「Customize」で投稿の表示形式を設定していきます。

 

3、投稿の表示を設定

ワードプレスプラグイン

Customizeを開いてください。

 

General

Width of Feed

サイトに埋め込んだ際の投稿表示領域の幅を設定だきます。単位は「px」「%」から選択して設定してください。

 

Height of Feed

サイトに埋め込んだ際の投稿表示領域の高さを設定だきます。

 

Background Color

投稿表示領域の背景色を設定できます。

 

Layout

Number of Photos

表示する画像の枚数を設定します。

 

Number of Columns

画像を表示する際の列数を設定できます。

 

Padding around Images

画像の周りの余白設定です。

 

Disable mobile layout

スマートフォンの表示を設定できます。

 

Disable mobile layout

スマートフォンの表示を設定できます。

 

Disable mobile layout

スマートフォンの表示を設定できます。

 

Photos

Sort Photos By

表示する画像の並び順を「新しい順」か「ランダム」で設定できます。

 

Image Resolution

画像の解像度を設定します。「Auto-detect (recommended)」のままで良いと思います。拘る方は調整してみてください。

 

Header

Show Feed Header

表示領域にヘッダーのIDとプロフィール写真を表示するか、しないかを選択します。

 

Header Size

ヘッダーのサイズを調整できます。

 

Show Bio Text

チェックを入れると、ヘッダーに自己紹介を表示します。

 

Header Text Color

ヘッダーのテキストの文字色を設定します。

 

Load More’ Button

Show the ‘Load More’ button

「Load More」ボタンを表示します。Layoutの「Number of Photos」で設定した枚数より多い画像を表示するにはこちらにチェックを入れます。

 

Button Background Color

ボタンの背景色を設定します。

 

Button Text Color

ボタンに表示するテキストの文字色を設定します。

 

Button Text

ボタンに表示するテキストを設定します。

 

‘Follow’ Button

Show the Follow button

「Follow」ボタンを表示します。

 

Button Background Color

ボタンの背景色を設定します。

 

Button Text Color

ボタンに表示するテキストの文字色を設定します。

 

Button Text

ボタンに表示するテキストを設定します。

 

Misc

Custom CSS

オリジナルのCSSを設定できます。

 

Custom JavaScript

オリジナルのJavaScriptを設定できます。

 

4、インスタグラムの投稿を表示するには

上記で設定が終わりました。サイト内にインスタグラムの投稿を表示する方法です。TOPページや固定ページ、投稿ページ、ウィジェットにも表示することができます。下記ショートコードを表示したい箇所に入力します。

[instagram-feed]

まとめ

如何でしょうか?うまく表示されましたか?こちらのショートコードを入力した後に設定を変更しても問題ありません。バランスを考えて設定しましょう。

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

 

賢威テーマ」は、SEO業界で圧倒的な実績を持つWebプランニングチーム「ウェブライダー」が、ノウハウを余すことなく詰め込んだSEOテンプレートパックです。当サイトは賢威テーマで構築しております。




WEB運営・制作ディレクター

この記事のライター:BUTTER

Googleストリートビュー撮影、WEBサイト制作(WordPress)、デジタルマーケティング、モールテックス小物のハンドメイドをしております。中小企業の社長様から個人事業主の方までお仕事のご依頼を頂き、WEBサイト制作(ポータルサイト・メディアサイト・ECサイト)、楽天サイト制作、楽天サイト運営、店内ストリートビュー撮影、Google広告、Yahoo広告、SNS広告運用を担当させて頂きました。趣味:モールテックスDIY、ローカルガイド撮影、音楽観賞。

リンクツリー ツイッター インスタグラム

 

PR