WordPressにInstagramをオシャレに表示できる「SnapWidget」の使い方

「ウェブサイトやブログにSNSの投稿をオシャレに表示したい」

普通の埋め込み機能でも表示できるんですが、レイアウトが固定なので使い所が限られてくるんですよね。特に、Instagramの投稿は、複数で表示することが多いので困ってしまうわけです。

そこで、よりオシャレにSNS投稿を埋め込むことができる「SnapWidget」を使ってみてはいかがでしょうか。当記事では、「SnapWidget」の詳細な使い方を解説してますので、参考に導入してください。

SnapWidgetとは

主要SNS（Instagram等）のコンテンツをWebサイトに表示できるウィジェットを作成するサービスです。SNSの埋め込み機能だけではレイアウトが決まっていますが、SnapWidgetを使えば、複数のコンテンツを様々なレイアウトでサイト上に表示できるようになります。

しかし、SnapWidgetで埋め込んだ場合、Instagramの最新投稿を常にサイト上に反映させることはできません。WordPressとInstagramの連動表示を重視するのであれば、下記のプラグインをお勧めします。

2020.09.12

2020.12.25

WordPressサイトにインスタグラムフィードを表示するプラグイン「Smash Balloon Social Photo Feed」の使い方

WordPressのサイト内にインスタグラムフィードを埋め込む際に最も簡単に活用できるプラグインの紹介です。表示するフィードのデザインやカラム数まで調整できますので、当記事で使い方を解説いたします。弊社のYouTuber TAKAPONによる動画解説は、下記よりご覧いただけます。 ...

SnapWidgetの使い方

SnapWidgetを使ってInstagramの投稿をウェブサイトに表示する手順は下記になります。順番に進めていきましょう。

SnapWidgetにログイン
ウィジェットのレイアウトを決める
見た目を調整して埋め込みコードを取得
埋め込みコードをサイト上に貼り付ける

SnapWidgetにログイン

下記より、SnapWidgetにアクセスして、画面右上の「SIGN UP」をクリックします。

SnapWidgetトップページ

SnapWidget

ここで、Facebookアカウントをお持ちの方は、「SIGN WITH FACEBOOK」でログインできますが、お持ちでない方は、各項目を入力して「SIGN UP」を押し、会員登録を済ませましょう。

SnapWidgetに登録

ウィジェットのレイアウトを決める

ログインできたら、作成するウィジェットのレイアウトを選択してきます。下記の画面になりますので、「CHOOSE A SERVICE」を押してください。

ウィジェットの型を選ぶ

次にSNSとレイアウトを選択していきます。今回はInstagramのウィジェットを作成するので、「Instagram」を選択し、レイアウトは「GRID」にしてみました。

SNSとレイアウトの種類を選択

レイアウトの選択でお困りの方は、下記のサンプルを参考にしてください。レイアウトを選択できたら、「CONFIGURE WIDGET」をクリックします。


GRID	SCROLLING	BOARD

SLIDESHOW	POPUP	MAP

見た目の調整と埋め込みコードの取得

次にウィジェットの見た目を調整していきます。「Username」を押して、Instagramアカウントにログインし、投稿データを取得してください。（上手くいかない時は何度か挑戦してみましょう。）

ウィジェットの設定画面

上記画面は左側で設定を行い、右側にプレビューが表示される仕組みです。選択したレイアウトによって設定項目は変わりますが、「GRID」の各項目を下記にまとめましたので、参考にしてください。

Username(必須)	Instagramのアカウントを登録する。
Description	管理画面に表示される説明文。サイト上には表示されない。
Thumbnail Size	各画像のサイズを変更する。
Layout	縦と横に並べる画像の数を決める。
Photo Border	枠線の表示・非表示を選択。
Background Color	カラーコードを入力して背景色を変更する。例）赤色：#ff0000
Photo Padding	画像と画像の隙間を調整する。
Hover Effect	マウスオーバー時のアニメーションを選択。
Sharing Buttons	シェアボタンを表示するかどうかを選択。
Responsive	Yesなら横幅100%で表示、Noなら固定幅で表示。

各項目の調整が終わり、「GET WIDGET」を押すと、下記の画面になるので、「COPY TO CLIPBOARD」をクリックして、埋め込みコードを取得します。

埋め込みコードをコピー

取得した埋め込みコードを貼り付ける

取得した埋め込みコードをサイト上に貼り付ければ、作成したウィジェットを表示できるようになります。基本的には、Instagramの埋め込み方法と同じですので、HTMLを記載できる箇所に貼り付けます。WordPressをお使いの方は、下記の記事の貼り付け方法を参考にしてください。

2020.12.25

WordPressにInstagram投稿を埋め込む方法

WordPressサイトにInstagram投稿を表示するなら、埋め込み機能を使用する方法が最も簡単です。外部ツールやプラグインを使用せずともInstagram投稿を表示できますので、当記事を参考に埋め込んでみましょう。 2020年10月24日からFacebook・InstagramのoEmbed...