「ウェブサイトやブログにSNSの投稿をオシャレに表示したい」
普通の埋め込み機能でも表示できるんですが、レイアウトが固定なので使い所が限られてくるんですよね。特に、Instagramの投稿は、複数で表示することが多いので困ってしまうわけです。
そこで、よりオシャレにSNS投稿を埋め込むことができる「SnapWidget」を使ってみてはいかがでしょうか。当記事では、「SnapWidget」の詳細な使い方を解説してますので、参考に導入してください。
SnapWidgetとは
主要SNS(Instagram等)のコンテンツをWebサイトに表示できるウィジェットを作成するサービスです。SNSの埋め込み機能だけではレイアウトが決まっていますが、SnapWidgetを使えば、複数のコンテンツを様々なレイアウトでサイト上に表示できるようになります。
しかし、SnapWidgetで埋め込んだ場合、Instagramの最新投稿を常にサイト上に反映させることはできません。WordPressとInstagramの連動表示を重視するのであれば、下記のプラグインをお勧めします。
WordPressのサイト内にインスタグラムフィードを埋め込む際に最も簡単に活用できるプラグインの紹介です。表示するフィードのデザインやカラム数まで調整できますので、当記事で使い方を解説いたします。 弊社のYouTuber TAKAPONによる動画解説は、下記よりご覧いただけます。 ...
SnapWidgetの使い方
SnapWidgetを使ってInstagramの投稿をウェブサイトに表示する手順は下記になります。順番に進めていきましょう。
- SnapWidgetにログイン
- ウィジェットのレイアウトを決める
- 見た目を調整して埋め込みコードを取得
- 埋め込みコードをサイト上に貼り付ける
SnapWidgetにログイン
下記より、SnapWidgetにアクセスして、画面右上の「SIGN UP」をクリックします。
ここで、Facebookアカウントをお持ちの方は、「SIGN WITH FACEBOOK」でログインできますが、お持ちでない方は、各項目を入力して「SIGN UP」を押し、会員登録を済ませましょう。
ウィジェットのレイアウトを決める
ログインできたら、作成するウィジェットのレイアウトを選択してきます。下記の画面になりますので、「CHOOSE A SERVICE」を押してください。
次にSNSとレイアウトを選択していきます。今回はInstagramのウィジェットを作成するので、「Instagram」を選択し、レイアウトは「GRID」にしてみました。
レイアウトの選択でお困りの方は、下記のサンプルを参考にしてください。レイアウトを選択できたら、「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をお使いの方は、下記の記事の貼り付け方法を参考にしてください。
WordPressサイトにInstagram投稿を表示するなら、埋め込み機能を使用する方法が最も簡単です。外部ツールやプラグインを使用せずともInstagram投稿を表示できますので、当記事を参考に埋め込んでみましょう。 2020年10月24日からFacebook・InstagramのoEmbed...
まとめ
SnapWidgetを使って、SNSの投稿を埋め込む方法について解説しました。しかし、SnapWidgetの無料プランで埋め込めるのは、Instagram、Facebook、TwitterだけでYouTubeの埋め込みはできません。
もし、YouTube動画をサイト上に表示したいとお考えなら、下記に基本的な埋め込み方法を記載してますので、こちらもぜひご覧ください。
コメント