Smash Balloon Social Photo Feedでインスタグラムのフィードをサイトに表示

多くのWebサイトで、インスタグラムなどのSNSと連携しています。CMSサイトでは、更新情報をSNSのリンクに貼るなどの利用方法があります。今回は、Smash Balloon Social Photo Feedでインスタグラムのフィードをサイトに表示する方法を紹介します。

セットアップ

プラグインをインストール、有効化します。セットアップ画面が表示されるので、手順に沿って設定して行きます。セットアップウィザードを起動をクリックします。

ステップ1のInstagramアカウントに接続の＋新規作成をクリックします。What is the〜のBasicをクリックして、手順に沿ってInstagramの設定を行います。

ステップ2の機能を設定に進みます。画像の最適化にチェックを入れます。ソーシャルフィードコレクションやカスタマーレビュープラグインのチェックを外します。Nextボタンをクリックします。

こちらもお勧めですのチェックをすべて外して、Install Selected Plugingsをクリックします。

右上の、設定を終了をクリックします。これで、セットアップ完了です。

フィード作成

すべてのフィード画面が表示されるので、＋新規作成ボタンをクリックします。Instagramフィードを作成＞フィード形式を選択で、ユーザータイムラインを選択します。次へボタンをクリックします。

設定したInstagramのアカウントにチェックを入れます。次へボタンをクリックします。

左サイドメニューのフィードレイアウトをクリックします。レイアウトをグリッドに設定します。投稿数をデスクトップ、モバイルともに12に設定します。カラムをデスクトップ4、タブレット3、モバイル2に設定します。

ヘッダーで、アバター、プロフィールの設定をします。右上の保存ボタンをクリックします。

設置

右上の埋め込むボタンをクリックします。ショートコードが表示されるので、コピーします。

編集画面で、ショートコードブロックを設置し、ペーストします。トップページに設置する場合は、PHPに書き込みます。プレビュー画面を確認します。

以上で今回の説明は終了です。インスタグラムで投稿したら、サムネイルがWebサイトに自動で表示されるので、便利ですね。投稿のほかに、トップページや、ウィジェット、固定ページに埋め込むことができます。