WordPressとインスタグラムを連携して、写真ギャラリーをサイトに埋め込むことができるプラグイン「Smash Balloon Social Photo Feed」をご紹介します。
自分のインスタグラム写真をWordPressに表示させるなら、インスタグラムギャラリーの埋め込みプラグインを使う方法が一番簡単です。
今回紹介する Smash Balloon Social Photo Feed は、ギャラリーのややこしい設定はすべてプラグイン任せでOK、埋め込みコードをコピペするだけで設置可能です。
また、様々な機能が強化された有料版「Instagram Feed Pro」を使うと、レイアウトの変更やハッシュタグを使った写真表示、カルーセル表示機能などが使えるようになります。
なお、このプラグインは以前「instagram feed」という名称でしたが、今は「Smash Balloon Social Photo Feed」に変更されています。プラグイン検索で「instagram feed」と入力すると、名称変更後のプラグインが見つかるので間違わないように注意してください。
WordPress以外のサイトにインスタグラム写真ギャラリーを埋め込む場合は、Instagram API と instafeed.jsを使うという方法もあります。以下の記事を参照してください。
Smash Balloon Social Photo Feedのインストール
では、さっそくSmash Balloon Social Photo Feedをインストールしてみましょう。
まずはダッシュボードの左メニューから「プラグイン」→「新規追加」へ進み、検索窓から「Smash Balloon Social Photo Feed」と入力してください。
検索結果には「Smash Balloon Social Post Feed」という似たプラグインが一緒に出てくるのでお間違いなく。「今すぐインストール」→「有効化」します。
インスタグラムとWordPressを連携させる
インストール後に左メニューの「Instagram Feed」から設定を表示させて、インスタグラムのアカウントと連携するボタン「Connect an Instagram Account」をクリックします。
ユーザーネームとパスワードを入力して、インスタグラムにログインしてください。
連携済みのインスタグラムアカウントが表示されました。これで準備はOKです。
以前はインスタグラムのアクセストークンとユーザーIDを入力する必要がありましたが、今はプラグインが自動で設定してくれます。
他の設定項目ですが、「Preserve settings when plugin is removed」にチェックを入れると、プラグインを削除しても連携設定はそのまま残るので、ギャラリーを一時停止する場合に便利です。
「Check for new posts every」は、新規投稿をチェックする間隔です。更新間隔の単位は分、時、日を指定できます。最後に「変更を保存」してください。
インスタグラムギャラリー埋め込み
続いてInstagramギャラリーをWordPressに埋め込みます。やり方はとても簡単、ギャラリーを埋め込みたい固定ページ又は投稿ページにショートコードをコピペするだけです。
ショートコードは設定の下の方、もしくは上のタブ「3. Display your Feed」にあります。
まずは編集中の投稿か固定ページに、一番シンプルなショートコード［instagram-feed］をテキストモードで貼り付けてみて下さい。
［instagram-feed］
これだけでインスタグラムギャラリーが埋め込まれて写真が表示されるようになります。
ギャラリー下の「Load More..」をクリックすると、さらに写真が表示され、「Follow on Instagram」からは、そのユーザーのインスタグラムページに移動することができます。
もしくは、テーマに直接ショートコードを貼り付けます。「外観」→「テーマエディター」に進んで、写真ギャラリーを表示したい場所に以下のPHPコードを追加します。
<?php echo do_shortcode('[instagram-feed]'); ?>以上、プラグインをインストールしてから、WordPressと連携してインスタグラム写真ギャラリーを埋め込むまで、たったの数分程度で作業が完了しました。
Instagram Feed カスタマイズ
Smash Balloon Social Photo Feedは、一列あたりの表示枚数や写真の表示順序などのカスタマイズが可能で、「2. Customize」タブに各種設定項目があります。
General
フィードの横幅、縦幅、背景色を変更します。幅はピクセルか%のどちらでも設定可能です。
Width of Feed： フィードの横幅
Height of Feed： フィードの縦幅
Background Color： フィードの背景色
Layout
フィードのレイアウトを設定します。
Layout Type： 有料版のInstagram Feed Proにすると変更可
Number of Photos： 写真の総表示枚数
Number of Columns： 横一列あたりの写真数
Padding around Images： 写真の間隔
Disable mobile layout： モバイルレイアウトに変更
Disable mobile layoutにチェックを入れると、スマホとPCが同じスタイルになるので、フィードの写真を一覧できるようになります。左はチェックあり、右はチェックなしです。
カスタマイズの一例として、Number of Photosは30、Number of Columnsは6、Padding around Imagesは2px、Background Colorは青に設定してみました。
Photos
写真の並び順と大きさを変更します。
Sort Photos By： 最新版から順に表示かランダムかを選択
Image Resolution： 写真サイズを選択
Header
フィード上部のヘッダー表示に関する設定です。
Show Feed Header： ヘッダーの表示か非表示を選択
Header Size： ヘッダーサイズを選択
Show Bio Text： アカウント紹介文の表示か非表示
Header Text Color： ヘッダーの色を変更
あとは「’Load More’ Button」と「’Follow’ Button」でボタンの各種設定、「Misc」でカスタムCSSやJavaScriptを記載したり、キャッシュの設定ができます。
ショートコード
Smash Balloon Social Photo Feedは、ショートコード内に別途コードを追記することで、様々なカスタマイズが可能です。
「3. Display Your Feed」内にオプション一覧が掲載されています。ピンクの欄は有料版の「Instagram Feed Pro」のみ設定可能な項目です。
あとはギャラリーを埋め込みたい固定ページ又は投稿ページに、ショートコードを貼り付けてください。テーマ内のPHPファイルからショートコードを呼び出すときは、以下のようにコードを記述すればOKです。
<?php echo do_shortcode('[instagram-feed ●●●●●●]'); ?>
ショートコードのカスタマイズは、複数表示のフィードをそれぞれカスタマイズするような場合に使うと便利ですよ。
有料版 Instagram Feed Pro
Smash Balloon Social Photo Feedには、49ドルから使える有料版「Instagram Feed Pro」もあります。
こちらを購入すると、レイアウトの変更やハッシュタグを使った写真表示、フィード内写真の情報やキャプション追加、カルーセル表示機能などが使えるようになります。
さらなるカスタマイズをお望みの方は、Instagram Feed Proも検討してみてください。
インスタグラム写真埋め込みはプラグインで
以上、Smash Balloon Social Photo Feedの使い方をご紹介しました。
以前にInstagram API と instafeed.jsを使って、インスタグラム写真を埋め込む方法を紹介しましたが、WordPressの場合はプラグインを使うと簡単に設置できます。
手軽に使えてフィードの各種設定も可能です。WordPressにインスタグラム写真ギャラリーを埋め込むなら、ぜひ「Smash Balloon Social Photo Feed」を使ってみてください。
