WordPressとInstagramを連携！SnapWidgetを使ってサイトをおしゃれに変身させよう

ブログやサイトのトップページにInstagramの写真をオシャレに表示させる方法ないかな？
そんな疑問をお持ちの方のために、今回は『SnapWidget』という機能を紹介します。
このSnapWidgetを利用するとプラグインをインストールせずに、サイトとInstagramを連携することが可能になります。

SnapWidgetのアカウント作成

SnapWidetへ移動してアカウントを作成します。

必要事項を入力してSIGN UPをクリックするとアカウントの登録が完了します。

ウィジェットを作成する

アカウントの登録が出来たら、続けてウィジェットを作成します。
CHOOSE A SERVICEをクリックすると連携させたいサービスを選択できるようになります。

今回はInstagramを連携させたいので、Instagramを選択。

表示させたいレイアウトを選択。

次のような表示が出た場合、右側のチャットのような英文は「有料版へアップグレードする場合はお試し期間もありますよ」というような紹介文なので、必要なければ×で消してOKです。

有料版の14日間の無料トライアルを勧めてきますが、今回は無料版を使用するので下の方に小さく書かれている Continue to use a free widget. をクリックします。

SnapWidgetとInstagramのアカウントを連携させる

画像の矢印部分をクリックします。

このような画面が表示されるのでInstagramを選択し、アカウントにログインして連携させます。

ログインできたら、2つの項目にチェックが入っていることを確認して許可するを選択。

表示させたいレイアウトを考える

Instagramにログインして連携が完了すると、このような画面が表示されます。
左側の部分をカスタマイズして好みのレイアウトに変えていきます。

①	Thumbnail Size	画像サイズの変更
②	Layout	画像のレイアウトを変更 例）3×2の場合、横3列・縦2行で表示されます。
③	Photo Border	枠線を表示する or しない
④	Background Color	背景色の変更 カラーコードを入力すると背景色が変更できます。
⑤	Photo Padding	画像間の隙間の調整
⑥	Hover Effect	画像にマウスをのせたときのアニメーションを選択
⑦	Sharing Buttons	SNSのシェアボタンの表示 or 非表示
⑧	Responsive	レスポンシブデザインに対応する or しない

UPDATE PREVIEWをクリックすると右側にプレビューが表示されます。

プレビューを確認して問題なければ、GET WIDGETをクリック。

コードが表示されるので右下のCOPY TO CLIPBOARDをクリックし、コードをコピーします。

WordPressにコードを貼り付ける

WordPressの編集画面に移動し、先ほどコピーしたコードを貼り付けます。

テキストというウィジェットを追加したい箇所にドラッグ&ドロップします。
ヘッダーの下に表示させたい場合はコンテンツ上部へ、フッターの上に表示させたい場合はコンテンツ下部へドラッグ&ドロップします。

テキストを選択し、そこにコピーしたコードを貼り付けます。

トップページのみに表示させたい場合は、
『ウィジェットの表示』という項目をチェック・入力したページで表示に変更し、トップページのみにチェックを入れます。

トップページを固定ページで作成している場合

固定ページの編集画面を開いて、表示させたい箇所でカスタムHTMLのブロックを追加。
そこにコピーしたコードを貼り付けます。

以上で完了です。

スマホではこんな感じです。

まとめ

無料版でもInstagramの画像をサイトと連携できるのでとても便利ですね。いろいろなレイアウトを試しておしゃれなサイトを作りに挑戦してみてください。