ブログの最新記事をカラーミーで表示する

ブログの記事情報をカラーミーに設置

よくいただく相談で「ブログの最新記事を取ってきて、カラーミーショップ上で表示したい」というものがあります。

ブログは通常、RSSフィードという決まった形式で記事情報を配信していますので、そちらを取得してカラーミーショップ上で表示するのが一般的な方法です。

以前はfetch(Smarty関数)を使って、PHPで動的に作成したページをカラーミーショップに埋め込んでいることがよくありましたが、セキュリティ上の理由からか、この方法は使えなくなりました。
fetch廃止に伴ってカラーミ―ショップのサポートの方からは、iframe(HTMLタグ)による代替が提案されています。

naeco.jpでおすすめしている方法はそれとは別のものになります(Ajax+JSONP)。
送受信は非同期通信(Ajax)で行いますので、表示速度によるストレスはあまりないです(ページ描画時にロックしない)。
SEO的にも問題ありません(Ajaxを使っても、しっかりインデックスされます)。

RSSフィードの見せ方いろいろ

下例のように、トップページ上部でスライドショーにして、お客様の目をひくこともできます。商品記事などを動的に見せたい場合に使えます。
カルーセル(画像を横並び)にすると、すこしおとなしめなお知らせ欄や更新情報などにも使えます。

ブログRSSをカラーミーに表示する(デモページ)

ブログ記事をカラーミーに表示する例

もちろんスライドショー(カルーセル)表示せずに、HTML・CSSで整形して表示させることも可能です。カードデザインにして横4~6枚を並べるレイアウトもよく見かけます。

実装上の注意点

お使いのブログによって、RSSフィードの広告が入っていたり、画像URLが取り出せなかったり、表示件数も少なかったりします(要確認!)。RSSフィードで使い勝手がいいのはWordPressです。
WordPressではカテゴリー・タグごとにRSSフィードを配信しているので、必要な記事情報だけを取得できます。

PHPが動作するウェブサーバー(一般的なレンタルサーバー、ロリポップなど)が必要です。

スライドショー表示する場合は大きい画像サイズが必要です。画像の縦横比はそろっている方がよいです。

おまけ(ブログ記事以外でも)

Feed43(外部サービス)を使ってRSSフィードを配信している自ショップのインスタ画像なども取得可能です(SnapWidgetを利用して設置する場合が多いと思いますが選択肢として)。

参考)RSSを利用したインスタ画像表示(デモページ)

執筆者

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

メーカー系情報システム部門出身で、第一種情報処理技術者
個人事業主/カラーミー歴10年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。

お仕事のご相談はこちら