ブログの最新記事をカラーミーに埋め込む

ブログの最新記事をカラーミーショップで表示させたい場合、以前はfetch(Smarty関数)を使う方法をよく見かけました。
(セキュリティ上の理由から?)この方法は2019年2月以降使えなくなりました。

fetch廃止に伴ってカラーミ―ショップのサポートからは、iframe(HTMLタグ)による代替が提案されていますが、今回紹介する方法はそれとは別のものになります。
iframeの埋め込みページは表示が重くなる場合もありますので、非同期通信(Ajax)でデータのやり取りを行うことにします。

ブログは記事情報をRSSフィードというきまった形式で配信しています。
タイトル・URL・画像などを取得することができます。

RSSフィードの例(一部)RSSフィード例

今回の処理の流れは、
カラーミーショップから起動した「PHPスクリプト」
「ブログのRSSフィードを取得」
「必要項目を切り出し」
「Ajax+JSONP」という方法でカラーミーショップに「送信」して
→カラーミーショップで「表示」

作り込みが必要な部分はPHPスクリプトで、ブログとカラーミーショップのあいだで橋渡しをする重要な機能です。
中身は以下の三つです。
・simplexml_load_file関数でRSSフィードを取得します
・取得データをいい感じに切り出します
・Ajax+JSONPでカラーミーに送信します

ブログの最新記事をカラーミーに埋め込む(デモページ)

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

トップページ上部でスライドショーにして、お客様の目をひくこともできます。
カルーセル(画像を横並び)にすると、すこしおとなしめなお知らせ欄などにも使えます。

奇をてらわずに、カードデザインにして画像、タイトル、文章という形が一般的で多く見かけます。
事務的な内容が多い場合などは行で表示して、日付とタイトルのみという設置例も多いです。

WordPressではカテゴリー・タグごとにRSSフィードを配信しているので、必要な記事情報だけを取得できます。

実装
カラーミーショップとブログの連携方法として、比較的導入しやすい手段です。
PHPが動作するウェブサーバーが必要です。
Ajax(非同期通信)でもきちんとインデックスされますので、SEOも問題ありません。

注意点
アイキャッチ画像を取ってきますので、スライドショー表示する場合は大きいサイズが必要です。
画像の縦横比はそろえましょう。これらのレイアウト崩れはデモページで確認してください。

お使いのブログサービスによってはRSSフィード内から画像URLを取り出せない場合があります(要確認!)。そのようなときは画像表示ができません。

制作物用のお問い合わせボタン

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

機能実装のお手伝いをしています。お気軽にご相談ください。
追加の要望や設置場所の状態によって、お見積り金額は変動します。

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

関連記事