カラーミーショップ 2020年08月23日 naeco.jp

カラーミーショップにインスタ画像を埋め込む方法 (2019年版)

インスタアイキャッチ

追記）YQL（Yahoo Query Language）の無料サービス終了に伴って、記事を書き直しました。
追記2）外部から画像が参照できなくなりました。いまはこの記事の方法も使えません。
追記3）追加情報は記事の一番下を参照してください。

情報発信やブランディングにInstagram（インスタグラム、インスタ）を利用している方は多いですが、公式のウィジェット（機能をウェブサイトに貼る仕組み）はありません。

一般的には、SnapWidget（外部サービス）がよく利用されます。機能も無料で使えますし、設定・設置も簡単に行えます。よく見かける、おしゃれなスライドショーを簡単に実装できます。

もっと自由にデザインしたい場合は、ウィジェットではない別の埋め込み方法を検討することになります（今回の内容はこれです）。

Instagramの画像を取ってくる3つの方法

ウィジェット

SnapWidget、Elfsightなどがサービスを提供しています。
設置はとても簡単で、5分もかからず設置することができます。
SnapWidgetは無料プランは広告が付きますし、デザインが決まっている点がすこし難点。

API（Application Programming Interface）

「ウェブサービス間でデータのやり取りをするためにあらかじめ用意された機能」のようなものです。Instagramにも公式で付いている機能です。プログラミングが必須で、3つのなかで一番難しい方法になります。
アプリケーションを作成して実行するため、アプリの置き場所としてウェブサーバーを借りる必要があります。
Instagram APIについては2020年までに段階的に廃止されることが告知され、今後はInstagram Graph APIに移行します。作成したアプリケーションの審査が必要になって、個人で何かやるのは大変そうに感じました。

RSS配信＋PHP+Ajax+JSONP

APIを使うよりは簡単に設置できる上、ウィジェットと違ってデザイン面の制約もありません。
とはいえ、動作しない場合に試行錯誤できるスキルが必要になります（頑張れる人向け）。
APIと同様に、PHPが動作するウェブサーバーを借りる必要があります。

今回は「RSS配信＋PHP+Ajax+JSONP」を使って、インスタ画像を埋め込む方法について紹介します。

処理の流れ

・Feed43でRSS配信（RSSフィード）の前準備をします

・カラーミーショップから起動した「PHPスクリプト」が
→Feed43で生成した「RSSフィードを取得」し
→「必要項目を切り出し」て
→「Ajax+JSONP」という方法でカラーミーショップに「送信」して
→カラーミーショップで「表示」

前準備として、InstagramをRSS配信するサービスについて

RSS配信はブログではすでにおなじみです。
私はfeedlyというRSSリーダーでブログの更新記事を読んでいますが、そういう使い方ができるのも、ブログが決まったフォーマットで情報を配信しているからです。

一方で、InstagramはRSS配信していません。更新情報をRSS配信するところから検討することになります。
ネット検索すると Feed43 という無料サービスが見つかりましたので、そちらを借りることにします。
「RSS Feed43」というキーワードで検索すると解説がたくさん見つかります。詳細はそちらを参照ください。

作業が少しだけややこしいですが、その部分はこのページでも例示します。

1. まずは Feed43 のページを開きます

「Create your first RSS feed」をクリック。利用規約に同意して「Continue」。

2. このサービスを利用するURLを入力する

Address欄にURLを入力して「Reload」。例ではnaeco.jpのインスタアカウントを試します。

Feed43のEdit画面

3. Page Sourceの表示結果を確認する

ごちゃごちゃとした文字列がPage Source欄に表示されます。

Feed43ページソース

中段あたりの選択範囲内（青背景部分）が必要なデータです。
インスタページURLのショートコード（"shortcode"）、画像URL（"display_url"）などが含まれています。
日付（"taken_at_timestamp"）はタイムスタンプで取得しますので、変換してから使用してください。

選択範囲内には不要データとして、comments_disabled、dimensionsも含まれますが、これらもいったん抽出します。

4. 抽出するパターンを定義する

Page Sourceで範囲選択した部分を、Item (repeatable) Search Pattern欄にコピぺして、抽出データ部分を{%}に置き換えます。準備が整いましたら「Extract」。

Feed43抽出パターン定義

Item (repeatable) Search Pattern 例

"shortcode":"{%}","edge_media_to_comment":{%},"comments_disabled":{%},"taken_at_timestamp":{%},"dimensions":{%},"display_url":"{%}","edge_liked_by":{%},"edge_media_preview_like"

上手くいけば、データ抽出できているのが確認できます。

Feed43抽出結果

5. 出力用フォーマットを定義する

{%?}は上画像の赤字部分と対応しています。セットする欄は二つ。
・Item Link Template欄にクリック時のリンク先（https://www.instagram.com/p/ショートコード）
・Item Content Template欄に画像URL、お気に入り数、コメント数

それ以外は使いませんので、適当に欄を埋めてください。
「Preview」で結果を確認してみましょう。

Feed43フォーマット定義

6. RSS配信の準備完了

結果を確認して、問題なければ準備完了です。
あとで使うFeed URLはメモしておきます。

Feed43プレビュー

PHPでRSSを送信する

上のFeed URLのソースコードを開くとわかりますが、XML形式のRSSフィードになっています。
そこからPHPで必要項目を切り出して、ショップサイトに送信します。

内容をしっかり理解したい場合は、RSS、Ajax、JSONP、クロスドメインなどのキーワードをネット検索してください。

'https://feed43.com/????????????.xml'はご自身のFeed URLを設定します。

get-instagram-posts.php

<?php
define (MAX_NUM,12); //表示させたい件数
$rss = simplexml_load_file('https://feed43.com/????????????.xml', 'SimpleXMLElement', LIBXML_NOCDATA);
$i = 0;
foreach($rss->channel->item as $item) {
  if ($i >= MAX_NUM) {break;}
  $description = (string)$item->description; //文字型にキャスト
  $posS = mb_strpos($description, '{"count":');
  //配列にセット
  $output[$i] = array(
    "link" => (string)$item->link,
    "image" => mb_substr($description, 0, $posS)
  );
  $i++;
}

header( 'Content-Type: text/javascript; charset=EUC-JP' );
echo $_GET['callback'] . '(' . json_encode($output). ')';

カラーミーショップ側

'https://your-domain.jp/get-instagram-posts.php'は置き場所を指定します。
$("#insta").appendでid="insta"にHTMLタグを挿入しています。

$(function(){
  $.ajax({
    type: 'GET',
    url: 'https://your-domain.jp/get-instagram-posts.php',
    dataType: 'jsonp',
    success: function(json)
    {
      // success
      $.each(json,function(i,item){
        $("#insta").append('<li><a href="' + item.link +'" target="_blank"><img src="' + item.image + '" /></a></li>');
      });
    }
  });
});

HTML・CSS

<ul id="insta"></ul>

<style>
  ul#insta {
    display: flex;
    list-style-type: none;
  }
</style>

表示結果

表示結果は下図のとおり。デモページ（ページ下段）
CSSでスタイルを入れて、見た目を調整してください。

RSSでインスタ画像を埋め込むデモ

今回のまとめ

インスタグラムの設置は、ウィジェットを使う方法が一番簡単です。
この記事は、事情があって別の方法を模索している方向けです。

Feed43は無料サービスですので、ある日突然サービス終了することがありえます。

ウィジェットを使わない分、デザイン・レイアウトの細かい作り込みが可能です。そのような要望があるときはご相談ください。
参考）インスタ画像を埋め込む スライドショー版（制作物ページ）

追記

InstaWidgetはサービス終了したようです（2019/11/01）。

WordPressプラグインでインスタ画像を表示して、iframeでカラーミーショップに埋め込むことは可能です（そこまでする必要があるかはわかりませんが）。

執筆者

えいじ@naeco.jp　この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら