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

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

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

SnapWidgetとは

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

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

SnapWidgetの使い方

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

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

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
GRID SCROLLING BOARD
SLIDESHOW POPUP MAP
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をお使いの方は、下記の記事の貼り付け方法を参考にしてください。

まとめ

SnapWidgetを使って、SNSの投稿を埋め込む方法について解説しました。しかし、SnapWidgetの無料プランで埋め込めるのは、Instagram、Facebook、TwitterだけでYouTubeの埋め込みはできません。

もし、YouTube動画をサイト上に表示したいとお考えなら、下記に基本的な埋め込み方法を記載してますので、こちらもぜひご覧ください。