SnapWidgetを使えばホームページやブログにインスタグラムの最新記事一覧が挿入できる

インスタグラムの投稿を自社のホームページやブログにも表示したい場合どうするか。インスタの投稿単位であれば標準の埋め込み機能を使えばよいが、インスタの最新記事一覧を埋め込むことはできない。そこで、専用のプラグインかWEBサービスを活用ができないか探してみた。
「SnapWidget」というWEBサービスを使えばホームページやブログにインスタグラムの最新記事一覧が簡単に挿入できることがわかった。

「SnapWidget」を使用した結果

蕎麦食べ歩き北陸https://sindan.org/に、遠田が蕎麦のことを紹介しているインスタグラムの最新記事一覧を埋め込んでみた。

▼蕎麦食べ歩き北陸https://sindan.org/の下部

画像をクリックすると、該当記事が開く。ただし、インスタグラムの記事が直接開くわけではなく「snapwidget」のページが表示される。そのページからクリックするとインスタグラムの該当記事を表示させることができる。このワンクッションはこのWEBサービスを使う以上はやむをえないだろう。実用上はそれほど問題がなさそうなので、このまま使ってみることにする。

「SnapWidget」の設定方法

「SnapWidget」を設定するには、https://snapwidget.com/にてユーザー登録をする必要がある。登録は簡単で、メールアドレスとパスワード（自分で決めることができる）などを設定すればすぐに使える。

設定したら「UPDATE＆GETWIDGET」をクリックする。すると、ポップアップで埋め込むソースが表示されるので、その部分をコピーする。

上記のソースは以下の通り。

<script src="https://snapwidget.com/js/snapwidget.js"></script>
<iframe src="https://snapwidget.com/embed/692987" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe>
<div style="font:10px/14px 'Roboto','Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:400;width:100%;text-align:right"><a href="https://snapwidget.com" style="color:#777;text-decoration:none;">SnapWidget · Instagram Widget</a></div>

基本的にはこのままコピペで貼り付ければよい。
しかし、このまま貼り付けると作者表示の部分が冗長なので削除し、実際には記事部分のみを貼り付けた。

▼実際に使用したソース

<script src="https://snapwidget.com/js/snapwidget.js"></script>
<iframe src="https://snapwidget.com/embed/692987" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe>

これを表示したいブログ（WordPressなど）に埋め込めばいい。

WordPressのウィジェットに貼ってみた。

▼フッターウィジェット