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

インスタグラム WordPress

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

YUKI
YUKI

下の画像のようなイメージでトップページや投稿ページなど好きなところにインスタグラムを表示させることができます。

インスタグラム
YUKI
YUKI

今回は無料版を使用します。無料版の場合は、画像のリンク先がInstagramではなく、Snap Widgetのサイトにリンクされます。Instagramにリンクさせたい場合は、有料版を使用してください。

SnapWidgetのアカウント作成

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

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

ウィジェットを作成する

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

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

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

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

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

z

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

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

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

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

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

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

YUKI
YUKI

変更する内容は下の表を参考にしてみてください。

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

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

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

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

WordPressにコードを貼り付ける

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

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

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

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

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

YUKI
YUKI

私の場合は、トップページを固定ページで作成しているので、固定ページにコードを貼り付けました。紹介する方法は、テーマCocoonでの貼り付け方ですが、他のテーマを使っている場合も操作はほとんど同じです。

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

以上で完了です。

YUKI
YUKI

こちらが実際に埋め込んだInstagramです。

インスタグラム
YUKI
YUKI

「Instagram」という表記は自分で作成した画像を貼り付けています。
カスタマイズの詳細は下の表記を参考にしてみてください。

  • Thumbnail Size:160px
  • Layout:3×2
  • Photo Padding:5px
  • Hover Effect:Fade In
  • Sharing Buttons:No
  • Responsive:Yes

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

インスタグラムスマホ表示

まとめ

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

目を引くデザインのWEB画像制作します
この記事を書いた人
Web Designer | YUKI

一児の母/Webデザイナー
出産後、未経験からWebデザインを学び、フリーランスWebデザイナーとして活動中。
結婚や出産で環境が変わっても、女性が自分らしく輝けるようにデザインを通してサポート。
ホームページやSNSで使用する画像/ロゴ/名刺 など制作しています。
ご依頼・お問い合わせはポートフォリオサイトをご確認ください。

WordPress
スポンサーリンク
formom design blog
タイトルとURLをコピーしました