wordPressサイドバーにInstagramを表示させるプラグインを紹介 | LIVE YOUR LIFE

wordPressサイドバーにInstagramを表示させるプラグインを紹介

 

最近ではソーシャルメディアが著しく発展していますが、TwitterやFacebookに加えてInstagramも大きく注目を集めています。

Instagramは写真媒体を中心としたソーシャルメディアで、特に若い女性を中心にユーザー数も大きく増え続けていますね。

 

今回は、そんなInstagramをwordPressサイトのサイドバーに表示させる方法について解説していきます。

プラグインの設定を施すだけで簡単に設置できるものですので、アカウントを持っているという場合は積極的にフォロワーを増やすための施策を投じていきましょう。

 

サイドバーにInstagramを表示させるプラグイン『Instagram Feed』

 

今回ご紹介するのは、wordPressのプラグイン『Instagram Feed』

当サイトでも導入しているプラグインですが、実際は以下のようなデザインで表示されます。

 

こうしてInstagramを表示するとフォロワーが増加する可能性が増すばかりでなく、サイドバーに多少の彩りを加えることもできます。

ビジネスとは関係のないプライベートな部分もサイト訪問者に触れていただくことで、よりあなたのファンを増やすこともできるので、Instagramアカウントを持っているという方はぜひとも導入してみてくださいね。

 

Instagram Feedの設定方法

 

それではさっそく、プラグインのインストールならびに設定方法について解説していきます。

 

まず、wordPressのダッシュボード画面から『プラグイン』→『新規追加』を選択し、検索窓に『Instagram Feed』と打ち込みましょう。

プラグインが表示されたら、『今すぐインストール』ボタンを選択します。

 

インストール後忘れずに有効化が済んだら、再びダッシュボード画面に戻りましょう。

 

基本設定

 

続いてプラグインの基本設定を施していきましょう。

ツールバーに『Instagram Feed』という項目が追加されているので選択すると、以下のようなプラグインの設定画面へと移ります。

 

ここではあなたのInstagramアカウントを実際にリンクさせていきます。

まずは上記の赤枠で囲ったバナーをクリックし、『アクセストークン』『ユーザーID』を取得しましょう。

 

ご自身のアカウント情報を入力し『Authorize』をクリックすると、以下のようにアクセストークンとユーザーIDが表示されます。

 

表示されたコードを上記の矢印のように、下の『Access Token』『User ID(s):』という項目へとコピー&ペースとしましょう。

その下に2つほど項目がありますが、こちらは特に設定しなくて構いません。

無事入力が済んだら『変更を保存』をクリックし、これで基本的な設定は以上になります。

 

ここからは、表示方法のデザインカスタマイズを行っていきましょう。

 

Customize

 

プラグインの設定画面から『Customize』を選択し、お好みでカスタマイズ設定を施していきましょう。

まず一番上に、下のような設定項目が表示されます。

 

  • Width of feed:横幅の設定、基本的に100%のままで構いません。
  • Height of Feed:縦幅の設定。
  • Background Color:背景色の設定、デフォルトの状態は透明です。

 

Photos

 

 

  • Sort Photos By:『Newest to oldest』で新しい投稿から順番に表示され、『Random』でランダム表示させることができます。
  • Enable Pop-up Lightbox:Pro版で使用できるようになるため割愛。
  • Number of Photos:表示される写真数。
  • Number of Columnes:横列に並べる写真数。
  • Image Resolution:写真のサイズ、『Auto-detect』で自動調整されます。
  • Padding around Images:写真周囲の余白、空欄にすると余白なしに設定できます。
  • Disable mobile layout:デフォルトの状態で自動的にモバイル対応します。

 

Header

 

 

  • Show the Header:チェックを入れると、写真の上にプロフィール情報が表示されます。
  • Header Text Color:名前やプロフィール部分の文字色。

 

‘Load More’ Button

 

 

  • Show the ‘Load More button’:表示しきれない写真を表示させるボタン、ボタンをクリックすると表示数だけ追加表示される仕様です。
  • Button Background Color:ボタン色、デフォルトでは黒です。
  • Button Text Colorボタンテキスト色、デフォルトでは白です。
  • Button Text:ボタンに記載される文字、デフォルトでは『Load More』と表示されます。

 

‘Follow’ Button

 

 

 

  • Show the Follow button:アカウントをフォローするページに移動するボタンを表示させます。
  • Button Background Color:ボタン色、デフォルトでは薄い青です。
  • Button Text Color:ボタンテキスト色、デフォルトでは白です。
  • Button Text:ボタンに記載される文字、デフォルトでは『Follow on Instagram』と表示されます。

 

その他の項目に関してはPro版で設定することができるので、今回は特に手を加えなくてOKです。

以上で、Instagram Feedのカスタマイズは完了です。

 

Instagramをサイドバーに設置する方法

 

さて、カスタマイズが済んだら、次は実際にサイドバーにInstagramを表示させましょう。

まずはサイドバーに表示させるためのショートコードを作成する必要がありますが、非常に簡単に済むので安心してくださいね。

 

というのも、以下のコード内の『あなたのユーザーID』部分を、先ほど表示されたユーザーIDに変えるだけですので、特段複雑なショートコードなどを使用する必要もありません。

 

上記のショートコードにユーザーIDを追記することができたら、ダッシュボード画面から『外観』→『ウィジェット』を選択しましょう。

そして、あとは『テキスト』ウィジェットをInstagramを表示させたい箇所にドラッグ&ドロップし、先ほどのショートコードを入力するだけです。

 

以上で、無事にInstagramをサイドバーに表示させることができました、お疲れさまでした^^

 

最後に

 

以上、WordPressサイトのサイドバーにInstagramを表示せるブラグイン、『Instagram Feed』の設定方法について解説しました。

ショートコードも非常に単純なものでしたので、簡単に設置することができたと思います。

 

これからの時代、特に個人の発信力が大きな力を発揮し、誰もが自身のファンとなる人を獲得できる時代においては、SNSの活用は欠かせない大切な要素となります。

Instagramは比較的女性性が高いソーシャルメディアですので、そういった各媒体ごとの特色も意識しながら自身の好きなものを発信していけると良いですね。

写真は表示させなくても良いという方は、サイドバーにInstagramのアイコンを表示させることができる『Lightweight Social Icons』というプラグインを以前ご紹介したので、ぜひともこちらの記事をご参照ください。

 

この記事が気に入ったら
いいね ! しよう

Twitter で
公開日:2017/02/07
  

MAIL MAGAZINE 無料メールマガジンはこちら

 

 

  

コメントを残す

サブコンテンツ

TO THE TOP