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

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

「SnapWidget」を使用した結果

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

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

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

「SnapWidget」の設定方法

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

instasnapwidgetsetting.jpg

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

instasnapwidgetsettingtxt.jpg

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

<!-- SnapWidget -->
<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>

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

▼実際に使用したソース

<!-- SnapWidget -->
<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のウィジェットに貼ってみた。

▼フッターウィジェット
instasnapwidget.jpg

WordPressで表示する方法としては、ウィジェットを使わない方法もあるが、今回は手早くできる方法としてすでに使用していたウィジェットに貼り付けた。


このページはTwitter、はてな、Google+、FacebookなどのSNSで以下のような反響があります。
なお、コメントはFacebookにログインしている状態でのみ受け付けております。セキュリティ上の観点からこのようにしております。ご了承願います。
このエントリーをはてなブックマークに追加  

この記事のURL「https://dm2.co.jp/2019/05/snapwidget.html」をQRコードで表示
この記事のURL「https://dm2.co.jp/2019/05/snapwidget.html」をQRコードで表示「https://dm2.co.jp/2019/05/snapwidget.html」
パソコンで表示されたページをスマホでも見たい場合は、このQRコードをスマホのカメラ(QRコードが読めるリーダー)で読むとページが表示されます。